@font-face 不在客户网站上工作？

Posted 2023-03-06

【中文标题】@font-face 不在客户网站上工作？

【英文标题】：@font-face not working on a client site?

【发布时间】：2011-02-12 10:53:16

【问题描述】：

这是 CSS 代码

@font-face 
    font-family: 'FuturaStdBook';
    src: url('site/font-face/futurastd-medium-webfont.eot');
    src: local('☺'), url('site/font-face/futurastd-medium-webfont.woff') format('woff'), url('site/font-face/futurastd-medium-webfont.ttf') format('truetype'), url('site/font-face/futurastd-medium-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;


h2 font-family:'FuturaStdBook', sans-serif

会不会和mime类型有关？

如何确保我的路径是正确的？

【问题讨论】：

提供什么 MIME 类型？什么操作系统上的什么浏览器？

我们是否必须为所有字体文件扩展名提供 mime 类型支持。

您确定在客户端计算机上没有安装名为“☺”的字体吗？抱歉，无法抗拒。

几乎可以肯定这不是 MIME 类型相关的问题，主要是因为对于任何字体格式没有注册的 mime 类型。这就是 CSS 规范中出现 format('') 的主要原因。

【参考方案1】：

问题在于你的字体声明中font-weight 和font-style 的定义。由于h2元素默认定义在bold面中，因此这些元素不考虑font-face声明（因为浏览器认为，字体文件for normal weighted 只有重量，这很可能是真的）。​​

解决方案：您需要第二个带有font-weight: bold 的字体声明或您将h2 元素设置为具有font-weight:normal 和font-style: normal。

【讨论】：

仍然无法正常工作。我如何确认路径正确并且字体正确加载，问题是别的吗？

你使用 Firebug 吗？如果是，在“网络”选项卡中，是否下载过字体？是正确的网址吗？

...响应头是什么？您可以相应地更新您的问题以帮助找到答案。

@Boldwyn - 如何知道使用firebug net tab，字体是否正在下载？

响应头中没有字体信息

【参考方案2】：

如果您使用的是 IIS，则需要为 .eot 扩展名注册 MIME 类型。

在 IIS 管理器的 IIS 部分，打开 MIME 类型配置 在“操作”下，点击“添加...” 在扩展名框中输入.otf，在MIME类型框中输入application/octet-stream。 点击确定

您需要为您使用的每个非标准扩展程序执行此操作（.ttf 已注册，.woff 未注册），但应该这样做！

【讨论】：

实际上我上周刚刚经历过这个...... IIS 不知道如何提供文件，所以请求只是以 404 结束。

【参考方案3】：

尝试使用 Font Squirrel 为您的自定义字体获取防弹 CSS 声明。