我的客户（非常注重像素完美）不喜欢浏览器渲染字体的方式。目前我正在使用font-squirrel将OTF字体转换为Web字体。问题是，我看不到其他选择。我可以创建一个包含所有这些文本的PNG文件，但这似乎不是一种适合浏览器用户的解决方案。我需要处理的典型设计示例是：上面的是Web字体，下面的是来自PSD的屏幕截图。两者都使用相同的字体系列和相同的间距。客户希望它看起来更像下面那个。您的做法会是什么？假设您所说的“不喜欢浏览器渲染@font-face”的意思是发生的眨眼。如果不是，请详细说明。
4个回答
3
我假设你所说的“不喜欢浏览器渲染@font-face”的是指闪烁。如果不是，请详细说明。
目前只有3个选项可以消除这种闪烁。前两个解决方案很明显 - 使用图片或使用Web安全字体。显然，这些方法都打败了初衷。
第三个选择是在CSS中嵌入字体的base64代码。这会增加CSS文件的大小（kb），但它将完全消除闪烁，因为字体与CSS一起加载，所以在加载辅助文件时不会出现闪烁。
包含bas64字体的使用方法如下：
目前只有3个选项可以消除这种闪烁。前两个解决方案很明显 - 使用图片或使用Web安全字体。显然，这些方法都打败了初衷。
第三个选择是在CSS中嵌入字体的base64代码。这会增加CSS文件的大小（kb），但它将完全消除闪烁，因为字体与CSS一起加载，所以在加载辅助文件时不会出现闪烁。
包含bas64字体的使用方法如下：
@font-face {
font-family: "FontName";
src: url("data:font/opentype;base64,[ the base64 code here ]");
}
有一些在线的base64转换器，你可以将.otf文件上传到这些转换器中，它们会输出base64代码。 这是一个这样的转换器。
- Scott
5
要么是这样，要么就是Windows出了名的糟糕抗锯齿 :) - BoltClock
1有趣的事实：这种现象通常被称为“未样式化文本的闪烁”或“FOUT”。在荷兰语中，“fout”意味着“错误”。:-P - Peter-Paul van Gemerden
据我所知，您无法控制浏览器的抗锯齿功能。 - Scott
无论如何，这对我的问题没有任何影响。目前，我相信问题出在浏览器渲染上，而不是font-squirrel在处理OpenType字体时做得不好的原因。 - Gajus
我不知道您可以将字体作为base64代码嵌入，您是否有一个列出所有可能作为base64嵌入的文件的网址列表？ - H Aßdøµ
0
另一种常见且流行的处理方式是自动字体替换（使用JavaScript）。这种解决方案对屏幕阅读器用户友好，因为HTML包含纯文本，并且替换是在浏览器中使用JavaScript完成的。
这种技术的一个例子是sIFR，它是开源的并使用Flash作为替换。
- Peter-Paul van Gemerden
2
1请注意，尽管如此，这并不适用于所有情况。特别是在iOS中无法使用，因为Flash播放器无法安装在那里。 - Steve Jorgensen
顺便说一句：有一些不依赖于Flash的替代方案，比如FLIR，但是它们通常很麻烦设置。 - Peter-Paul van Gemerden
0
我使用的一种方法是创建背景图像来代表所有显示文本，然后使用CSS来“隐藏”实际文本，只显示图像。为了可访问性，不应使用display:none或display:hidden来隐藏文本。相反，使用大的负文本缩进将文本移动到显示器的左侧，或将其放在嵌套的、绝对定位的元素中，在显示区域之外。
我通常使用负缩进来处理所有不包含在可点击元素中的文本，并使用嵌套的、绝对定位的元素技术来处理任何包含在可点击元素中的内容（这样可以避免在某些浏览器中出现的活动元素轮廓扩展到左侧的情况）。
我通常使用负缩进来处理所有不包含在可点击元素中的文本，并使用嵌套的、绝对定位的元素技术来处理任何包含在可点击元素中的内容（这样可以避免在某些浏览器中出现的活动元素轮廓扩展到左侧的情况）。
- Steve Jorgensen
0
看起来似乎已经加粗了。尝试将font-weight设置为普通。
- Ariona Rian
3
不，字体的粗细被设置为正常。 - Gajus
那很奇怪。你试过用!important来覆盖它吗？ - Ariona Rian
1我可以从 Firebug 中看到它的字重是正常的。 - Gajus
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接