渲染字体不同于字体系列

Question

我有一个 DIN 标准 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。任何想法如何解决？

Answer 1

format('truetype') 后有一个逗号 - 删除并添加分号

format('truetype');

还要从正文中的字体系列声明中删除引号，这样就可以了

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

添加其他格式后