Custom @ Font-face CSS [英] Custom @Font-face CSS

问题描述

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

Can anybody see why this custom font code is not working for me, the font is placed in the root of my directory and i have tried the various font formats.

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>

推荐答案

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

Along with .woff you also need to add other font types as well

@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等情况下，如果你的自定义字体不工作，然后这种字体将应用

also you need to confirm path of fonts with respect to CSS file. also its a good practice along with custom fonts you should also give web safe fonts like arial, helvetica etc. so in case if your custom font wont work then this font will be applied

参考文章网址和在线字体转换工具

希望它有帮助！

这篇关于Custom @ Font-face CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！