html - 在 CSS3/HTML5 中使用自定义字体？

Question

我的 CSS 样式表的开头有这段代码(当然链接到我的 index.html):

@font-face {
    font-family: "Calibri";
    src: local("Calibri"), local("Calibri"), url("fonts/Calibri-Bold.otf") format("truetype");
}

我正在使用:

#id {
font-family: Calibri, Verdana, Arial, sans-serif;
}

但是还是不行。我的代码有什么问题？

Answer 1

您在 src 属性中重复了两次 local("Calibri")。

此外，请记住 IE 不支持 local()，因此如果您在 IE 中查看您的网站，它不会加载字体。除此之外，据我所知，IE 仅支持 EOT 格式。

对于 OTF 字体，使用 format("opentype")(您有“truetype”)。

还有一件事:如果这是 Microsoft 的 Calibri 字体，请记住许可证可能不允许这种类型的使用。我不熟悉该许可证，因此无法确定是否属于这种情况。