为网站用户添加字体到 HTML/CSS 代码（跨浏览器）答案

【问题标题】：Adding fonts to HTML/CSS code for website users (cross-browser)为网站用户添加字体到 HTML/CSS 代码（跨浏览器）
【发布时间】：2012-01-17 19:23:47
【问题描述】：

假设我有几个在 PSD 中用于网站设计的 .otf 和 .dfont 字体文件。现在我需要将这些字体添加到 HTML/CSS 代码中。我知道 CSS3 的 @font 功能可以做到这一点。但我确信它不适用于旧浏览器？那么跨浏览器的实现方式是什么？

【问题讨论】：

【解决方案1】：

首先，网站不需要在所有浏览器中看起来都一样（http://dowebsitesneedtolookexactlythesameineverybrowser.com/）。在旧版浏览器中不显示这些字体是完全可以的。只需提供@ThiefMaster 提到的后备。

如果您坚持在旧浏览器上使用相同的字体，您可能不得不依赖 Cufon (http://cufon.shoqolate.com) 来实现跨浏览器兼容性。使用特征检测（使用Modernizr）并有条件地加载Cufon 库。请注意，在正文上使用 Cufon 会使页面加载速度变慢。

PS：所有 IE 版本都支持网页字体嵌入。

【讨论】：

什么是回退？你说的提供后备是什么意思？喜欢给出相似的字体而不是确切的字体？？
是的。在您的样式规则中，只需提供类似的字体，如果浏览器不支持 @font-face 可以显示该字体
cufon方案与ThiefMaster方案相比有什么优势？这很重要。
使用 cufon，您可以为不支持 @font-face 的浏览器显示 same 字体，而 ThiefMaster 的解决方案显示 similar-looking 字体不支持的浏览器。

【解决方案2】：

您可以使用http://www.fontsquirrel.com/fontface/generator 创建包含各种@font-face 声明的最兼容的CSS。

显然会有一些旧浏览器不支持它 - 对于那些你应该在使用自定义字体时指定常规字体的浏览器，例如像这样：

p { font-family: "your font", sans-serif; }

【讨论】：

【解决方案3】：

我正在使用 FontSquirrel 的 @font-face 工具包生成器，我认为它运行良好。

晒

【讨论】：

这是他已经知道的。他需要针对旧版浏览器的解决方案。
你是怎么做到的？我提供了最兼容的跨浏览器字体解决方案。您了解@font 标签这一事实并不意味着您知道如何获得与所有各种字体格式完全兼容的工具包。当然，对于较旧的浏览器（IE6 和朋友），您必须始终“回退”到标准字体，但没有什么可做的。
这里有几个问题：.dfont 文件对于这个站点来说太大了，超过 3Mb。我可以加载的字体数量有问题（只有 3 个），最后，Gotham-Black.otf 字体有问题。它被生成器列入黑名单:(((((((
@ShaiMishali 我以为他已经知道了。对不起这是我的错。顺便说一句，IE6 和朋友 DO 支持网络字体嵌入。甚至 IE4。

【解决方案4】：

FontSquirrel 不适合我。另一方面，http://transfonter.org/ 非常适合将 DFONT 转换为 TTF。

【讨论】：