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

发布于 2024-09-19 18:20:44 字数 338 浏览 3 评论 0原文

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

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

原文

I have this code in the beginning of my CSS stylesheet (linked to my index.html, of course):

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

And i'm using:

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

But it still doesn't work. What's wrong with my code?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寄居者 2024-09-26 18:20:44

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

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

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

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

回复收藏 0 原文

﹎☆浅夏丿初晴 2024-09-26 18:20:44

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

@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/

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

In general, the accepted code to use at the moment is this:

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

The smiley for local is because you can't be sure the user's local file is the one you intend to be (read the page for the details, it's an interesting read.)

回复收藏 0 原文