渲染字体与字体系列不同

Question

我有一个DIN Regular True Type字体，我会像这样导入并声明它：

@font-face {
  font-family: 'DINRegular';
  src: url('../fonts/DINBek-Regular.ttf')  format('truetype'), 
}

body {
    font-family: 'DINRegular', Tahoma, Geneva, sans-serif;
}

然而，我的网站上有一个手风琴始终显示为 Times New Roman。在代码检查器中，字体系列为“DINRegular”，但在“计算”选项卡上呈现的字体却是 Times New Roman。有任何解决办法吗？

- The Hawk

---

什么浏览器？常规正文是否使用了正确的字体？ - Brian Glaz

Answer 1

在 format('truetype') 后面应该加上一个分号，逗号应被删除并替换为分号。

format('truetype');

同时也需要从body的字体系列声明中去掉引号，这样它就是：

font-family: DINRegular, Tahoma, Geneva, sans-serif;

此外，如果您的浏览器不支持.ttf字体，则以下是完整字体声明的示例：

@font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
     url('myfont.woff2') format('woff2'),
     url('myfont.woff') format('woff'),
     url('myfont.ttf') format('truetype'),
     url('myfont.svg#myfont') format('svg');
}

在添加其他格式之后

- Jay

---

通常情况下这应该是有效的，但现在不行。这是否与我用于手风琴的Javascript有关？ - The Hawk

可能是这样吗？您的CSS中是否有任何font-family声明，或者随其一起提供的CSS中是否有？这些声明将覆盖在body中设置的字体。例如，如果您将div设置为不同的字体，并且该字体位于body中，则它将显示设置给它的字体，而不是body的字体。 - Jay

Answer 2

你只定义了一个 .ttf 字体，你需要定义其他格式，如 .woff、.eot 和 .otf。你可以通过使用 Font Squirrel Webfont generator 生成这些类型。

确保你拥有你想要在线使用的字体的适当许可证是非常重要的。

- Arslan Akram