1

嗨，我正在尝试学习使用font-face向我的浏览器添加不同的字体，但我似乎在代码中遗漏了一些东西，因为样式不适用。这是我的代码：

<div id="logo">
      <img src="img/header/THANATHOS.png" alt="Logo"/>
      <p>a gamers community</p>
</div>

<style>
@font-face {
    font-family: 'HarlowSolid';
    src: url('Fonts/normal/HarlowSolid.eot'); /* IE9 Compat Modes */
    src: url('Fonts/normal/HarlowSolid.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Fonts/normal/HarlowSolid.woff') format('woff'), /* Modern Browsers */
         url('Fonts/normal/HarlowSolid.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Fonts/normal/HarlowSolid.svg#svgFontName') format('svg'); /* Legacy iOS */
}

div#logo p{
    font-family: HarlowSolid , Helvetica , sans-serif;
}
</style>

我在这里做错了什么？

4

2 回答 2

5

确保您已将其包装在<style> /* Code Here */</style>标签中，或将其放入样式表中。

还要检查您编写该代码的文件的路径。因此，如果它在/css/style.css其中并且 harlowSolid.woff 位于名为 的根文件夹中fonts，那么您的代码需要是url('../Fonts/normal/HarlowSolid.woff')

还要检查您正在测试的浏览器是否支持 font-face。尽管使用您包含的条件，但它应该不太可能遇到问题。

只是为了确认：您发布的实际代码是正确的，因此请检查您的文件是否存在/结构正确。

If you're using Chrome/Safari/FF, you can usually right click -> Inspect Element, look out for the red cog symbol in the bottom right corner which will denote coding/resource errors. (Click it to see the description of the problem.)

于 2012-09-05T14:59:38.660 回答
2

Are the second src right? Have a look at http://www.w3schools.com/css3/css3_fonts.asp

@font-face {
    font-family: 'HarlowSolid';
    src: url('Fonts/normal/HarlowSolid.eot'); /* IE9 Compat Modes */
    **src:** url('Fonts/normal/HarlowSolid.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Fonts/normal/HarlowSolid.woff') format('woff'), /* Modern Browsers */
         url('Fonts/normal/HarlowSolid.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Fonts/normal/HarlowSolid.svg#svgFontName') format('svg'); /* Legacy iOS */
}
于 2012-09-05T15:55:47.413 回答