logo标签列表

谷歌浏览器中的网页字体

csswebfontstext-rendering
8

我有一个网页字体，它在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;
}

在Firefox中更改text-rendering似乎无法产生任何效果，因此我会上传一张截图进行说明。

结果如下:

  • Firefox (也就是“应该看起来的样子”)

    enter image description here

  • Chrome - text-rendering: auto

    enter image description here

  • Chrome - text-rendering: optimizeLegibility

    enter image description here

  • Chrome - text-rendering: optimizeSpeed

    enter image description here

  • Chrome - text-rendering: geometricPrecision

    enter image description here

所有Chrome的截图看起来都比Firefox的糟糕。 我在CSS中漏写了什么吗？

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

1
Chrome在Windows上呈现字体的效果很差，这是一个几乎无法解决的问题（除非Google决定使用ClearType）。这就是为什么你应该转向Linux ;) - Blender
我切换到Linux没有问题，但我需要它在任何地方看起来好。 - cambraca
我对Linux进行了讽刺，但是在Chrome上使用自定义字体我从来没有好运气。 - Blender
1
你可能想先尝试提供SVG文件。这并不适用于所有人，但你可能想试一下。我们在博客文章中写了相关内容。你可以在这里阅读：http://www.fontspring.com/blog/smoother-web-font-rendering-chrome - Fontspring
@Fontspring - 感谢您指出这一点 - 当品牌字体在Chrome中看起来如此悲伤时，我感到非常失望；首先提供SVG已经产生了很大的改变。赞！ - somewhatsapient
5个回答
3

不确定您是否遇到了这个问题，但Chrome在反走样和TrueType字体方面存在问题。根据http://www.fontspring.com/blog/smoother-web-font-rendering-chrome的建议，您可以在font-face中先指定SVG字体，再指定TrueType字体，例如：

@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文件。
小心复制/粘贴上面的内容 - 引号是“单引号”，而不是撇号（CSS无法理解它们）。 - kolosy
1
哎呀！我修复了撇号。谢谢提醒。 - Nils
2

试试这个：

 -webkit-text-stroke: .5px

这里的.5值有点任意 - 在0和1之间的某个像素值是关键。这会强制对字体进行子像素提示。

可以在此处查看演示： http://dabblet.com/gist/4154587

1

这就是我做所有浏览器的方法，它在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获取我的代码。

不确定为什么我因此受到了负评，我只是试图提供一个在我看来有效的答案。如果有人愿意告诉我为什么被踩，那么我就可以知道以后怎么做了。 - Andres
0

通过 CSS 真的没有什么可以改进的。Firefox 和 Chrome 的文本渲染引擎不同，你看到的就是结果。如果字体没有正确提示和准备好用于 Web 字体，你可以期望会出现这样的增强效果。

字体从哪里获取的？

你可以尝试通过 FontSquirrel 运行它，看看 Ethan 提供的任何自动提示是否可以使其规范化一些。

关于渲染和 DiretWrite 的一些额外信息，这就是你看到的最大的区别...http://blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

希望有一天 Chrome 可以修复这个问题。在此跟踪此 Bug： https://code.google.com/p/chromium/issues/detail?id=137692 - djsadinoff
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接