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

我的 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;
}

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

你有local("Calibri")在你的重复两次src财产。

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

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

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