Question

您好我正在尝试使用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>

我在这里做错了什么？

Answer 1

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

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

同时检查您正在测试的浏览器是否为support for font-face。虽然你已经包含条件，但它不太可能遇到问题。

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

如果您使用的是Chrome / Safari / FF，通常可以右键单击 - ＆gt;检查元素，注意右下角的红色齿轮符号，表示编码/资源错误。（单击它以查看问题的描述。）

Answer 2

第二个src是对的吗？看看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 */
}

Font-Face无效

2 个答案: