CSS @字體面不工作，默認字體顯示

我試圖使用自定義字體在我的網頁，但它不工作。任何想法爲什麼？CSS @字體面不工作，默認字體顯示

@font-face { 
    font-family: 'raleway'; 
    src: url("Raleway-Regular.tff") format("truetype"); 
} 

.logoarea { 
    float: left; 
} 

.logo { 
    width: 120px; 
    height: 74px; 
} 
.topnavbar { 
    font-family: 'raleway'; 
}

這是我的css代碼。我已經檢查過以確保文件的拼寫正確。 CSS和我的字體在同一個目錄中。

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <!-- TEMP - AUTO REFRESH --> 
    <meta http-equiv="refresh" content="2" /> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    <title>OJMari</title> 
</head> 
<body> 
    <div class="logoarea"> 
    <img src="images/logo.png" alt="OJMari Logo" class="logo" /> 
    </div> 
    <div class="topnavbar"> 
    test 
    </div> 
</body> 
</html>

這是我的HTML代碼。我沒有看到任何問題。

我已經驗證了這兩個，所以沒有人知道爲什麼會這樣？對於那些很好奇的人來說，這就是我在Google Chrome 59上看到的html輸出。 HTML Output

來源

2017-05-13 MTMaster

你確定該文件類型爲'.TFF'而不是'.TTF'？ – RBCunhaDesign

相關：http://stackoverflow.com/questions/14393302/ttf-files-not-rendering-on-chrome-and-firefox –

這似乎字型爲格式不正確。請更改字體擴展的.ttf

@font-face { 
    font-family: 'raleway'; 
    src: url("Raleway-Regular.ttf") format("truetype"); 
}

來源

2017-05-13 03:54:04

哇，謝謝！我認爲這可能是一個愚蠢的錯誤...我改變了它，字體現在完美工作。 – MTMaster

的問題是，不同的瀏覽器將需要不同的字體文件格式，請參閱：https://help.webflow.com/article/list-of-font-file-types-for-maximum-browser-support

不知道，如果你使用的青菜，但是這應該給你什麼，我的意思是一個想法：

https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6

來源

2017-05-13 02:52:07

CSS @字體面不工作，默認字體顯示

回答

相關問題