html - 自定义@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

希望对您有所帮助!