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 @字体面不工作，默认字体显示

回答

相关问题