如何在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;
}

但是它仍然无法工作。我的代码有什么问题吗？

- fomicz

---

@font-face和CSS3与HTML5毫无关系。此外，@font-face在IE6中的工作方式与CSS2规范相同。 - Ian Devlin

Answer 1

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

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

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

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

- Jeff

---

Calibri可以在http://www.ascendercorp.com/font/calibri/上获得许可。仅仅因为Windows捆绑了一份副本并不意味着您有权重新分发嵌入式副本。 - bobince

我以CALIBRI作为例子！ :) 我想对于像“MyFont Bold”这样命名的字体，拥有两个“本地化”是完全正常的。 - fomicz

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

如Paul Irish所建议：http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

“local”表情符号的作用是因为你无法确定用户本地文件是否是你想要的文件（详细内容请阅读该页面，它很有趣）。

- Fra Sprea

Answer 3

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

- fomicz

Answer 4

虽然我不是这方面的专家，但你可以尝试使用这个工具这里。

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

- tgai