html - @ font-face无法正常工作。我是HTML＆CSS新手用户

 @font-face
   {
    font-family: 'trajan';
    src:
        url ('fonts/trajan.otf'),
        url ('fonts/trajan.eot'),
        url ('fonts/trajan'),
        url ('fonts/trajan.woff'),
        url ('fonts/trajan2'),
        url ('fonts/trajan3');
   }


 #customfont{

    color: white;
    list-style: none;
    font-size: 40px;
    font-family: trajan;

}

的HTML

<div id="customfont">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>

字体大小改变。看来我只把自定义字体部分弄乱了。我将字体存储在名为“ fonts”的文件夹中

最佳答案

我不知道这有什么区别，但是您有一个没有扩展名的网址（url（'fonts / trajan'））

否则您的路径可能不正确（也许您的CSS位于一个文件夹中，而您需要向上一个文件夹吗？）。

无论如何，这是我用于@ font-face的结构：

/* FONTS */
@font-face {
  font-family: 'trajan';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/trajan.eot');
  src: url('fonts/trajan.eot?#iefix') format('embedded-opentype');
  src: local('trajan'), url(fonts/trajan.woff) format('woff');
}