html - @font-face 不工作。我是新手 html & css 用户

Question

 @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>

---

字体大小改变。看来我只有自定义字体部分搞砸了。我已将字体存储在名为“字体”的文件夹中

Answer 1

我不知道这是否有任何区别，但你有一个没有扩展名的 url ( 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');
}