font-face替代品

Question

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

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

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

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

你的方法是什么？

  

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

顶部是web字体，底部是PSD屏幕。两者使用相同的字体系列，相同的间距。客户希望看起来更像底部。

Answer 1

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

目前只有3个选项可以消除眨眼。前两个是明显的解决方案 - 使用图像，或使用Web安全字体。显然，这些打败了目的。

第三个选项是为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.

Answer 2

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

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

Answer 3

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

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

Answer 4

它看起来像是粗体。尝试将font-weight设置为正常。