在CSS中使用@font-face添加本地ttf字体

Question

在CSS中使用@font-face添加本地ttf字体

11

我正在尝试为我测试的网站添加本地字体。它叫做“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

- Christina

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Katherine · Accepted Answer

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