css - OTF 字体不起作用，但 ttf 可以

Question

我在使用 css 设置字体时遇到问题。

目前我有:

@font-face {
    font-family: 'myfont';
    font-weight: bold;
    src: url('_layouts/Fonts/myfont.otf') format("opentype");
}

它不会将我的字体应用于样式，但如果我将其更改为:

@font-face {
    font-family: 'myfont';
    font-weight: bold;
    src: url('_layouts/Fonts/testfont.ttf') format("opentype");
}

(即使我将 opentype 保留为格式)，它确实有效。

当然是我添加的风格:

font-family: 'myfont';

有人知道这个问题吗？

Answer 1

您需要加载相同字体的四个版本(eot、ttf、otf 和 woff)以进行交叉浏览优化。您可能看不到 .otf，因为您的浏览器不支持它(这就是您需要 4 的原因)。

我建议您使用 google 字体，它简单、快速且有效:https://www.google.com/fonts