字体替代品

Question

我的客户（痴迷于像素完美）不喜欢浏览器渲染字体的方式。

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

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

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

您的方法是什么？

我假设“不喜欢浏览器渲染@font-face的方式”你指的是发生的眨眼。如果没有，您应该详细说明。

顶部一个是网络字体，底部一个是 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 代码。 这是一个这样的转换器。

Answer 2

我使用的一种方法是创建背景图像来表示所有显示文本，然后使用 CSS 来“隐藏”实际文本，并仅显示图像。为了可访问性，不应使用 display:none 或 display:hidden 隐藏文本。相反，使用较大的负文本缩进将文本移出显示左侧，或将其放入显示区域之外某处的嵌套、绝对定位元素中。

我通常对可点击元素中未包含的所有文本使用负缩进，并对可点击元素中包含的任何内容使用嵌套的绝对定位元素技术（因此活动元素轮廓不会像在某些浏览器）。

Answer 3

另一种常见且流行的处理方法是自动字体替换（使用 JavaScript）。该解决方案对屏幕阅读器的用户很友好，因为 HTML 包含纯文本，并且替换是在浏览器中使用 JavaScript 完成的。

这种技术的一个例子是 sIFR，它是开源的并使用 Flash 作为替代品。

Answer 4

看起来好像已经加粗了。尝试将 font-weight 设置为正常。