在CSS中使用@font_face添加本地ttf字体

Question

我正在尝试将本地字体添加到正在测试的站点。它称为“ AcrosstheRoad.ttf”，可以在我的assets / fonts /文件夹中找到。我正在做以下尝试将其读入CSS文件：

@font-face {
  font-family: 'AcrosstheRoad';
  src: url('assets/fonts/AcrosstheRoad.ttf')  format('truetype');
}

我想将其用作特定的标头类型，所以我正在使用

h3{
font-family: 'AcrosstheRoad';
color: #333;
}

但是不幸的是字体没有加载。有人知道我在做什么错吗？

谢谢！克里斯蒂娜（Christina）

Answer 1

首先在之前添加一个斜杠assets：

(('/assets/fonts/AcrosstheRoad.ttf'))

这可能是问题，也可能不是问题，这取决于CSS文件的位置以及网站的结构。

如果上述方法不起作用，请将字体转换为.woff2和.woff（尝试使用此字体：http : //www.fontsquirrel.com/tools/webfont-generator）。其背后的原因是某些浏览器确实很挑剔。将您的CSS更改为：

@font-face {
  font-family: 'AcrosstheRoad';
  src:  url('/assets/fonts/AcrosstheRoad.woff2') format('woff2'),
        url('/assets/fonts/AcrosstheRoad.woff') format('woff');,
       url('/assets/fonts/AcrosstheRoad.ttf') format('truetype');
}