我的客户（痴迷于像素完美）不喜欢浏览器呈现字体字体的方式。
目前我正在使用 font-squirrel 将 OTF 字体转换为 webfonts。
问题是，我没有看到任何替代方案。我可以创建一个包含所有这些文本的 PNG 文件，但这听起来不像是浏览器用户友好的解决方案。
我必须进行的设计的典型示例是：
你的方法是什么？
我假设“不喜欢浏览器呈现@font-face 的方式”是指发生的闪烁。如果没有，你应该详细说明。
顶部是网络字体，底部是 PSD 的截屏。两者都使用相同的字体系列，相同的间距。客户希望它看起来更像底部。
【问题讨论】：
标签： css cross-browser font-face
我假设“不喜欢浏览器呈现@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.
【讨论】：
我使用的一种方法是创建背景图像来表示所有显示文本，然后使用 CSS 来“隐藏”实际文本，只显示图像。为了便于访问，不应使用 display:none 或 display:hidden 隐藏文本。相反，请使用较大的负文本缩进将文本移出显示的左侧，或将其放在显示区域之外的某个嵌套的、绝对定位的元素中。
我通常对不包含在可点击元素中的所有文本使用负缩进，而对于包含在可点击元素中的任何内容，我通常使用嵌套的、绝对定位的元素技术（因此活动元素轮廓不会从左侧扩展为在某些浏览器中可能会发生）。
【讨论】：
另一种常见且流行的处理方法是自动字体替换（使用 JavaScript）。此解决方案对屏幕阅读器用户很友好，因为 HTML 包含纯文本，并且替换是在浏览器中使用 JavaScript 完成的。
这种技术的一个例子是sIFR，它是开源的并使用 Flash 作为替代品。
【讨论】：
它看起来像加粗了。尝试将font-weight 设置为正常。
【讨论】：