我有一个使用CSS3的@ font-face嵌入自定义字体的Web应用程序。到目前为止,这在IE和Firefox中完美无缺。
然而,使用Chrome,自定义字体显示为像素化并且不顺畅。以下是一个链接到Firefox&的我的字体示例的屏幕片段IE(上)和Chrome(底部):
Screenshot comparison
可能很难看到这样一个小样本屏幕截图的差异,但是当这种情况发生在整个页面上时,这是非常明显的。
以下是我在样式表中如何使用@ font-face的示例:
@font-face { font-family: 'MyFont'; src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'),url('../Content/fonts/MyFont.ttf') format('truetype'); }
另外值得一提的是,当我在虚拟机上运行的任何浏览器中拉出该网站时,字体都比SUPER波澜壮阔,比Chrome示例差得多。当我使用我所有运行Win7 VMWare桌面的学校电脑时,都会发生这种情况。当我从在朋友的Mac上运行的Windows 7虚拟机中提取站点时,也会发生这种情况。
解决方法
这是Chrome开发者正在修复的已知问题:
http://code.google.com/p/chromium/issues/detail?id=137692
要解决,直到之前先尝试:
html { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; }
如果这不适合你,这个工作对我来说(上面没有修复Windows Chrome):
http://code.google.com/p/chromium/issues/detail?id=137692#c68
它似乎重新排列@ font-face CSS规则,以允许svg出现’第一’修复这个问题。
例:
-before-------------- @font-face { font-family: 'chunk-webfont'; src: url('../../includes/fonts/chunk-webfont.eot'); src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),url('../../includes/fonts/chunk-webfont.woff') format('woff'),url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),url('../../includes/fonts/chunk-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } -after-------------- @font-face { font-family: 'chunk-webfont'; src: url('../../includes/fonts/chunk-webfont.eot'); src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),url('../../includes/fonts/chunk-webfont.svg') format('svg'),url('../../includes/fonts/chunk-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }