Question

任何人都可以看到为什么这个自定义字体代码对我不起作用，字体放在我的目录的根目录中，我尝试了各种字体格式。

CSS

@font-face
{
font-family: pacifico;
src: url(pacifico-webfont.woff);
}
 #nav ul li {
font-family:pacifico;
font-size:18px;
display: block;
margin-left:30px;
}

HTML

 <div id="nav" class="subMenu">
    <ul>
        <li><a data-scroll-nav='0'>Home</a></li>
        <li><a data-scroll-nav='1'>About Me</a></li>
        <li><a data-scroll-nav='2'>Portfolio</a></li>
        <li><a data-scroll-nav='3'>Contact</a></li>
    </ul>


</div>

Answer 1

除了.woff，您还需要添加其他字体类型

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

#nav ul li {
font-family:pacifico, arial, helvetica, sans-serif;
font-size:18px;
display: block;
margin-left:30px;
}

您还需要确认与CSS文件相关的字体路径。你也应该给自定义字体提供一个很好的做法，你也应该提供像arial，helvetica等网页安全字体。所以，如果你的自定义字体不起作用，那么这个字体将被应用

参考Article URL和在线font conversion tool

希望它有所帮助！

自定义@ Font-face CSS

1 个答案: