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

Question

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

然而，在 Chrome 中，自定义字体显得像素化且不流畅。下面是我在 Firefox & IE（顶部）和 Chrome（底部）中的字体示例的屏幕片段链接： 屏幕截图比较

在这么小的示例屏幕截图中可能很难看出差异，但是当这种情况发生在整个页面上时，它会非常明显。

下面是我如何在样式表中使用 @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 出现“首先”解决了这个问题。

例子：

-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-squirrel 字体生成器来生成 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 转换时文本模糊，因此添加建议的属性将模糊切碎的文本并部分解决问题。它仍然有点模糊，但在许多情况下，它比切碎更好。

示例 1（问题）：切碎的文本。我在这里添加了旋转以确保文本被切碎。
示例2（已解决）：半平滑文本。应用 3d 变换会使文本变得模糊，因此切碎的文本看起来更平滑。

小问题是看起来我们不能在 CSS 中只针对 Windows 版本的 Chrome，所以我们必须使用 javascript 来应用适当的类。

Answer 7

这个问题将在 Chrome 37 中得到解决。

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