css - 字体替代品

Question

我的客户(痴迷于像素完美)不喜欢浏览器呈现 font-face 字体的方式。

目前我正在使用 font-squirrel 将 OTF 字体转换为网络字体。

问题是，我看不到任何替代方案。我可以创建一个包含所有这些文本的 PNG 文件，但这听起来不像是一种对浏览器用户友好的解决方案。

我必须处理的典型设计示例是:

您的方法是什么？

I'm assuming that by "dislikes the way browsers render @font-face" your'e referring to the blink which happens. If not, you should elaborate.

上面的是网络字体，下面的是PSD的屏幕截图。两者都使用相同的字体系列，相同的间距。客户希望它看起来更像底部。

Answer 1

我假设“不喜欢浏览器呈现@font-face 的方式”是指发生的闪烁。如果没有，您应该详细说明。

目前只有 3 个选项可以消除闪烁。前两个是显而易见的解决方案——使用图像，或使用网络安全字体。显然，这些与目的背道而驰。

第三个选项是在 CSS 中嵌入字体的 base64 代码。这会增加您的 CSS 文件的大小 (kb)，但它会完全消除闪烁，因为字体是随 CSS 一起加载的，因此在加载辅助文件时不会闪烁。

包含 bas64 字体的用法如下所示:

 @font-face {
 font-family: "FontName";
 src: url("data:font/opentype;base64,[   the base64 code here   ]");
 }

有一些在线 bas64 转换器，您可以将 .otf 文件输入其中，它们会生成 base64 代码。 Here's one such converter.