对 2 种字体使用 @font-face 会导致速度大幅下降

Posted 2023-03-15

【中文标题】对 2 种字体使用 @font-face 会导致速度大幅下降

【英文标题】：using @font-face for 2 fonts causing big slow-down

【发布时间】：2011-09-10 13:26:46

【问题描述】：

这是我第一次使用@font-face。字体包来自 myfonts.com，我目前正在 Safari 中进行测试，并通过网络检查器注意到加载 2 种字体的 css 文件显示为近 2mb-download ！字体似乎以base64编码的形式存在。该包不包含实际的 .otf 文件。

我通过 .htaccess 文件添加了 Gzipping，这使该文件的大小减少了近一半，但只有 1mb，这仍然是不可接受的，我不明白为什么它这么大。

【参考方案1】：

Base64 比原始文件大 1.3 左右 - 来自wikipedia。你可以用这个convertor把文件转回原来的状态，但是网上有很多工具。

【讨论】：

谢谢，我使用转换器导出为 bin 文件，然后重命名为 .otf，似乎可以工作，并且下载量要小得多。但是当我现在访问该网站时，我会收到this wanning - 对此有什么办法吗？

@gio Im not sure. This may be a protection for the system. If you have the font as a file in the web folder, you can not use it must be installed and the browser does not have the rights to do this by itself, I think. When installed, probably this message wont 不再出现。

您好，您说必须安装，是指用户必须安装吗？

@gio 我没写好——必须安装它才能在系统上使用。 @font-face dont make it install on the system. Ive 在 Safari 5.0.5 上测试没有消息，也没有安装字体。抱歉，如果信息具有误导性。

是的，我就是这么想的，你不需要安装。所以我想知道这是否只是那个转换器的问题..也许我会寻找另一个......

【参考方案2】：

通过 myfonts.com (http://new.myfonts.com/fonts/typodermic/great-escape-rg/) 下载字体文件 或使用 font-squirrel 生成器从原始文件中制作它们（如果您之前购买过它们） (http://www.fontsquirrel.com/fontface/generator)