自定义@Font-face CSS

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

希望对你有帮助！