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

我在CSS样式表的开头有以下代码（当然链接到我的index.html）：

我用的是：

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

但它仍然不起作用。我的代码出了什么问题？

您在

src

属性中重复了两次

local（“Calibri”）

另外，请记住IE不支持

local（）

，因此如果您在IE中查看站点，它不会加载字体。最重要的是，据我所知，仅支持EOT格式

对于OTF字体，请使用

格式（“opentype”）

（您有“truetype”）

---

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

不是这方面的专家，但您可以尝试此工具

---

它可能至少有助于生成一个您应该拥有的示例。

已解决：它支持TTF（而不是OTF）文件。一般来说，目前使用的公认代码如下：

@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所建议的：

---

“本地”的笑脸是因为您无法确定用户的本地文件是否是您想要的文件（请阅读页面了解详细信息，这是一个有趣的阅读。）

Calibri可在上获得许可。获取与Windows捆绑的副本绝对不能使您有权重新分发嵌入式副本。我以CALIBRI为例！：）我想有两个“本地人”（特别是像“MyFont Bold”这样的字体）是完全正常的。@font face和CSS3与HTML5没有任何关系。此外，@font-face在IE6中的工作方式与CSS2规范中的相同。

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