html - @font-face 的 CSS 问题

Question

所以我正在为这个华丽的新启动网站编写前端代码，并且我使用的是特定字体。我正在使用@font-face，该字体在所有浏览器中都显示，但存在一些问题:

1) 字体看起来像素化了，这使得它有点难看。这个问题实际上在我之前用其他字体发生过，所以如果有人推荐我如何使字体平滑，我会很高兴。

2) 在 Opera 和 Safari 中，字体呈现正常(仍然像素化)，但在 IE、Firefox 和 Chrome 中，它呈现粗体，比正常情况更粗。我尝试使用 font-weight 但字体不支持任何重量，所以这是正常的。关于这个问题有什么想法吗？

我真的很想要这种字体，但我不明白为什么每个人都在使用 font-face 来解决所有这些渲染问题。我希望我遗漏了什么。

Answer 1

取决于您使用的操作系统，因为@font-face 使用操作系统字体渲染引擎。在 Windows XP 上，只需忘记正确完成它即可。 Windows 7 在 IE7/8 中也能很好地完成这项工作。

Cleartype 选项可能会导致您的字体看起来参差不齐 - 关闭它会修复边缘，因为它不会执行额外的抗锯齿功能，因为嵌入的字体已经抗锯齿了。

在客户端 禁用 cleartype 的一种方法是应用 IE 特定的 filter: 属性(只需使用一些简单的属性，这样它除了触发之外不会做任何事情效果 - 如旋转 0 度)到您的 css 标题 - 导致 IE 关闭 cleartype 以避免过滤器渲染和 Cleartype 渲染之间的冲突。但这只会修复 IE。

还有特定于 webkit 的 -webkit-font-smoothing 可以正常工作并且可以帮助您使用 chrome 和 css3 font-smooth(从未使用过这个所以可以'不会告诉您结果或支持的浏览器)。

如果你真的想保留你选择的字体，你能做的最可靠的事情就是使用 Cufon或类似的字体替换器。根据我的经验，它通过额外的脚本加载来完成这项工作。

总体而言，@font-face 没有可靠的解决方案来让它在所有浏览器和系统上看起来都一样。