Font-Face无效

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')

还要检查您正在测试的浏览器是否支持font-face.虽然你已经包含条件,但它不太可能面临问题.

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

如果您使用的是Chrome/Safari/FF,通常可以右键单击 - >检查元素,查看右下角的红色齿轮符号,表示编码/资源错误.(单击它以查看问题的描述.)