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。代码检查器中的字体系列是＆＃34; DINRegular＆＃34;，但是＆＃34; Computed＆＃34;上的渲染字体。 tab表示字体是Times New Roman。任何想法如何解决？

Answer 1

格式后有一个逗号（'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');
}

添加其他格式后

Answer 2

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

要确保一件事是您拥有适合您尝试在线使用的字体的许可。

渲染字体与字体系列不同

2 个答案: