css - 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
铬合金 -text-rendering: optimizeLegibility
铬合金 -text-rendering: optimizeSpeed
铬合金 -text-rendering: geometricPrecision

与 Firefox 相比，所有 Chrome 屏幕截图看起来都非常糟糕。CSS中是否缺少我的东西？

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

score 3 · Accepted Answer

不确定这是否是您所看到的，但 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。

score 2 · Accepted Answer

试试这个：

 -webkit-text-stroke: .5px

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

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

score 1 · Accepted Answer

这就是我所做的一切，它适用于 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得到我的代码

score 0 · Accepted Answer

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

字体是从哪里获得的？

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

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

score 0 · Accepted Answer

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

css - Chrome 中的网络字体

5 回答 5

Related

Reference