Chrome 中的网络字体

Question

我有一个在 Firefox 上看起来很棒的网络字体，但在 Chrome 上却不是。我尝试过使用text-rendering 属性，但效果并不理想。我的 CSS 是这样的：

@font-face {
    font-family: 'TextFont';
    src: url('[my font file url]') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: TextFont, Tahoma, Geneva, sans-serif;
    text-rendering: auto;
}

更改 text-rendering 在 Firefox 中似乎没有任何作用，因此我发布了一个屏幕截图。

结果：

• Firefox（又名“它应该是什么样子”）

• 铬 - text-rendering: auto

• Chrome - text-rendering: optimizeLegibility

• Chrome - text-rendering: optimizeSpeed

• 铬 - text-rendering: geometricPrecision

与 Firefox 相比，所有 Chrome 屏幕截图看起来都非常糟糕。 我在 CSS 中缺少什么吗？

我使用的是 Windows 7、Firefox 8.0 和 Chrome 15.0。

Answer 1

Chrome 已宣布在 Chrome 37 中，他们将从 Windows 图形设备界面切换到 Microsoft 的 DirectWrite API，该技术可改善字体在现代屏幕上的外观。

测试版现已推出： https://www.google.com/chrome/browser/beta.html

来自谷歌： http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html

Answer 2

不确定这是否是您所看到的，但 Chrome 的抗锯齿和 truetype 字体存在问题。根据http://www.fontspring.com/blog/smoother-web-font-rendering-chrome，您可以在字体中的 TrueType 之前指定 SVG 字体，例如：

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); 
src: url('webfont.eot?#iefix') format('embedded-opentype'),
    url('webfont.svg#svgFontName') format('svg'),
    url('webfont.woff') format('woff'),
    url('webfont.ttf')  format('truetype');
}

最大的缺点是 Safari 会同时下载 svg 和 woff。

Answer 3

试试这个：

 -webkit-text-stroke: .5px

.5 有点随意——0 到 1 之间的某个像素值是关键。这会强制字体的子像素提示。

可以在这里看到一个演示： http://dabblet.com/gist/4154587

Answer 4

您确实无法通过 CSS 改进这一点。 Firefox 和 Chrome 的文本渲染引擎不同，您会看到结果。如果字体没有正确提示并为网络字体做好准备，您可以期望这样的结果会得到增强。

字体是从哪里获得的？

您可以尝试通过 FontSquirrel 运行它，以查看 Ethan 提供的任何自动提示是否可以使这一点正常化。

有关渲染和 DiretWrite 的一些附加信息，这是您所看到的最大差异化因素......http://blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

Answer 5

这就是我所做的一切，它适用于 IE、Firefox、Chrome

@font-face {
   font-family: 'NeutraTextBold';
   src: url('../fonts/neutra_text_bold-webfont.eot');
   src: url('../fonts/neutra_text_bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/neutra_text_bold-webfont.woff') format('woff'),
     url('../fonts/neutra_text_bold-webfont.ttf') format('truetype'),
     url('../fonts/neutra_text_bold-webfont.svg#NeutraTextBold') format('svg');
  font-weight: normal;
  font-style: normal;

}
body{
font: 12px 'NeutraTextBold', sans-serif;
color: #FFF;
}

我从fontsquirrel 获得我的代码