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

您在local("Calibri")媒体资源中重复src次。

另外，请记住IE不支持local()所以如果您在IE中查看您的网站，它将不会加载该字体。最重要的是，据我所知，IE只支持EOT格式。

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

还有一件事：如果这是Microsoft的Calibri字体，请记住许可证可能不允许此类使用。我不熟悉许可证，所以不能确定是否是这种情况。

Answer 2

一般来说，目前使用的接受代码是：

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

保罗爱尔兰建议：http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

本地的笑脸是因为你不能确定用户的本地文件是你想要的那个（阅读页面了解详情，这是一个有趣的阅读。）

Answer 3

已解决：它支持TTF（非OTF）文件。

Answer 4

不是此问题的专家，但您可以尝试使用此工具here。

它至少可以帮助您生成应该拥有的示例。

使用CSS3 / HTML5的自定义字体？

4 个答案: