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

Question

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

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

而且我想将它用作某种 header 类型，所以我正在使用

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

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

谢谢！克里斯蒂娜

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');
}

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

Adding local ttf fonts using @font_face in CSS

html

css

fonts