@font-face 的 CSS 问题答案

【问题标题】：CSS problem with @font-face@font-face 的 CSS 问题
【发布时间】：2011-11-16 15:04:06
【问题描述】：

所以我正在对这个华丽的新启动网站进行前端编码，并且我正在使用一种特定的字体。我正在使用@font-face，字体显示在所有浏览器中，但有一些问题：

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

2) 在 Opera 和 Safari 中，字体呈现正常（仍然像素化），但在 IE、Firefox 和 Chrome 中，它呈现粗体，比正常粗体。我尝试放置字体粗细，但字体不支持任何粗细，所以这很正常。对这个问题有什么想法吗？

我真的很想要这种字体，但我不明白每个人是如何使用 font-face 来解决所有这些渲染问题的。我希望我错过了什么。

【问题讨论】：

我使用@font-face 的经验是，有些字体比其他字体效果更好，而 ymmv 在不同浏览器和不同平台上的显示效果更好。我坚持使用我测试过的几种字体，并且喜欢相关矩阵的外观。时间可能会提高某些字体的质量。
是的，我正在使用 windows，因为项目的后端将在 .net 上，我真的认为这个问题超出了我的范围，所以我正在寻找一个不错的跨浏览器字体现在。谢谢你们！

标签： html css fonts font-face

【解决方案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 没有可靠的解决方案让它在所有浏览器和系统上看起来都一样。

【讨论】：