@font-face 的 CSS 问题
因此，我正在对这个华丽的新初创网站进行前端编码，并且使用特定的字体。我正在使用@font-face，该字体在所有浏览器中都显示，但存在一些问题：
1）字体看起来像素化，这使得它有点难看。这个问题实际上在我以前使用其他字体时也发生过，所以如果有人推荐我如何使字体平滑，我会很高兴。
2) 在 Opera 和 Safari 中，字体呈现正常（仍然像素化），但在 IE、Firefox 和 Chrome 中，字体呈现为粗体，比正常情况更粗体。我尝试添加字体粗细，但字体不支持任何粗细，所以这是正常的。关于这个问题有什么想法吗？
我真的想要这种字体，但我无法理解每个人如何使用 font-face 来解决所有这些渲染问题。我希望我错过了一些东西。
So I'm front-end coding this flashy new start-up website and I am using a specific font. I am using @font-face, and the font shows in all browsers but some issues:
1) The font looks pixelated which makes it kinda ugly. This problem actually has happened to me before with other fonts so I will be happy if somebody recommends me how to get the font smooth.
2) In Opera and Safari the font renders normally (still pixelated) but in IE, Firefox and Chrome it renders bold, kinda bolder than normal. I tried putting font-weight but the font doesn't support any weight so it's normal. Any ideas on that problem ?
I really want this font and I can't understand how everybody is using font-face with all those rendering problems. I hope I am missing something.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
取决于您使用的操作系统，因为 @font-face 使用操作系统字体渲染引擎。在 Windows XP 上，忘记如何正确完成它。 Windows 7 在 IE7/8 中也能很好地完成这项工作。
可能导致字体看起来锯齿状的一件事可能是 Cleartype 选项 - 关闭它可以修复边缘，因为它不会执行不需要的额外抗锯齿，因为嵌入字体已经抗锯齿了。
在客户端禁用cleartype的一种方法是应用特定于IE的
filter:属性（只需使用一些简单的属性，这样除了触发效果之外它不会做任何事情 -例如旋转 0 度）到 css 中的标题 - 这会导致 IE 关闭cleartype 以避免过滤器渲染和 Cleartype 渲染之间的冲突。但这只能修复 IE。还有 webkit 特定的
-webkit-font-smoothing，它工作正常，可能会帮助你使用 chrome 和 css3font-smooth（从未使用过这个，所以不能告诉你关于结果或支持的浏览器）。如果您确实想保留所选字体，您可以做的最可靠的事情是使用 Cufon 或类似的字体替换器。根据我的经验，它需要额外的脚本负载来完成这项工作。
总的来说，对于 @font-face 来说，没有可靠的解决方案可以让它在所有浏览器和系统上看起来都一样。
Depends on what OS are you using since @font-face uses OS font rendering engine. On Windows XP just forget about getting it done right. Windows 7 does the job pretty much ok also in IE7/8.
One thing that can cause your fonts to look jagged can be the Cleartype options - turning it off fixes the edges since it won't do the extra anti-aliasing that is not needed since the embeded font is already anti-aliased.
One way to disable cleartype on the client side is to apply a IE specific
filter:property (just use some simple property so it won't do anything except triggering the effect - like rotation by 0 degrees) to your headers in css - that causes IE to turn off cleartype to avoid conflicts between filter rendering and Cleartype rendering. But this will fix IE only.There is also webkit specific
-webkit-font-smoothingwhich works ok and might help you with chrome and css3font-smooth(never used this one so can't tell you about results or supported browsers).Most solid thing you could do, if you really want to keep your selected font, is to use Cufon or similar font replacer. From my experience it does the job with an extra script load.
Overall for @font-face there is no solid solution to get it look the same on all browsers and systems.