Question

我有一个使用CSS3的@ font-face嵌入自定义字体的Web应用程序。到目前为止，这在IE和Firefox中完美运行。

但是，使用Chrome时，自定义字体会出现像素化并且不平滑。下面是Firefox和＆amp;中我的字体示例的屏幕摘要链接。 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');
}

另一件可能值得一提的事情是，当我在虚拟机上运行的任何浏览器中启动网站时，字体超级波动，比Chrome示例更糟糕。当我使用任何运行Win7 VMWare桌面的学校计算机时，就会发生这种情况。当我从在朋友的Mac上运行的Windows 7 VM上拉网站时也会发生这种情况。

Answer 1

这是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出现'first'修复此问题。

示例：

-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.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Answer 2

不幸的是，所有浏览器都以不同方式呈现字在一个看起来不错的一个可能在另一个中遇到麻烦。为font-face找到一个好的字体并不容易...如果你想要像素完美，你将不得不使用图像。

但并非所有内容都丢失了，这里有20种免费字体（甚至免费用于商业用途！），它们渲染效果非常好（我总是最终检查此列表）：http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

请记住，您无法托管付费字体，或者您将分发付费字体，最终可能会遇到麻烦。

Answer 3

您可能希望使用optimizeLegibility：http://aestheticallyloyal.com/public/optimize-legibility/

还有-webkit-font-smoothing：http://maxvoltar.com/archive/-webkit-font-smoothing

使用font-squirrels字体生成器生成webfonts和css以加载字体也可能是值得的： http://www.fontsquirrel.com/fontface/generator （虽然我不确定这是否能解决你的问题）

Answer 4

对我来说，最好的工作：

@font-face {
    font-family: MyFont;
    src: url("MyFont.ttf") format('truetype');
}

h1 {
    font-family: MyFont;
    -webkit-text-stroke: 0.5pt;
    -webkit-font-smoothing: antialiased;
}

Answer 5

我建议使用这个：

-webkit-text-stroke: 0.3pt;
-webkit-font-smoothing: antialiased;

Answer 6

尝试添加 -webkit-transform：translateZ（1px）; 或其他3D变换。

说明：

Chrome还有另一个错误 - 应用了3d变换时模糊的文字，因此添加建议的属性会模糊切碎的文字并部分解决问题。它仍然有点模糊，但在许多情况下它比切碎的更好。

example1（issue）：chopped text。我在这里添加了旋转以确保文本被切断 example2（已解决）：semi-smooth text。应用3D变换会使文本模糊，因此切碎的文本看起来更加流畅。

小问题是看起来我们不能仅针对CSS中的Windows版Chrome，因此我们必须使用javascript来应用适当的类。

Answer 7

Chrome 37将解决此问题。

http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html

@ font-face用于自定义字体，Chrome中的字体不流畅

7 个答案: