自定義@ 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等。以防萬一，如果自定義字體不起作用，則將應用此字體

參考文章URL和在線字體轉換工具

希望能幫助到你！