Chrome浏览器中@font-face字体显示不流畅的问题

Question

Chrome浏览器中@font-face字体显示不流畅的问题

14

我有一个正在创建的网站，它看起来很不错（现在CSS3媒体查询在IE上不能工作），但我发现我的@font-face在Chrome for Windows中破碎并且看起来很糟糕（这是我找到的唯一一个主要问题）。

我已经搜索了一下，并找到了一个被认为可以解决问题的CSS3 RGB修复方法，但对我完全没用。我试过Paul Irish的Bulletproof fix，但这会导致我的字体在Android上破裂。我已经花费几个小时研究这个问题，但似乎找不到任何可行的方法。我听说过Cufon，但我正在尝试坚持使用@font-face，因为我只在Chrome上遇到了这个麻烦。

我去Font Squirrel获取了这个字体的@font-face kit，所以它看起来像这样：

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

}

它可以在大多数浏览器中使用（虽然我没有测试每个浏览器，但我已经测试了IE 6-9，看起来还不错，Windows的FF 9和OSX的FF 8，Safari Opera看起来很好。Chrome for Windows与@font face命令不兼容。

请问有什么建议可以让它看起来更好或修复它吗？（除了删除@font face类并使用常规字体。）

另外，我可以使用Chrome的条件注释来查看普通字体，但是我的HTML将无法验证，这该怎么办呢？

所以，任何帮助都将不胜感激...

- kia4567

有截图吗？因为在Windows上，Opera 12和Chrome 17看起来完全一样。 - c69

我不建议这样做来修复它，只是为了排除故障 - 如果您将svg格式移到iefix上方，它看起来更流畅吗？至少在我的Chrome版本（16.0.912.77）中，如果Chrome选择ttf或woff，则不会应用反锯齿。 - JimmiTh

@c69 好的。我有一张Windows上Chrome和Firefox的截图。 www.ambergoodwin.com/images/chrome.jpg www.ambergoodwin.com/images/firefox.jpg@TheKaneda 我尝试了你建议的方法，它确实帮助了我。它使它变得更加平滑，就像我想要的那样，但是IE现在将其呈现为纯粹的粗体和黑色。那么这个结果意味着什么？ - kia4567

Chrome的哪个版本？最近才修复了一个bug，其中在Windows上打开ClearType实际上会关闭Chrome除SVG外的所有内容的反锯齿和hinting。在16版中，反锯齿确实被应用，文本看起来很好：http://dl.dropbox.com/u/14034871/chrome16.png。 - JimmiTh

哇。我喜欢Dropbox。哈哈。我没有真正深入研究过它，但在你发布链接后，我很好奇，这样做要容易得多。所以谢谢你。;) 无论如何，奇怪的是，我正在运行Chrome 16.0.9我正在运行Windows XP，你呢？我不知道该怎么办... - kia4567

5个回答

2

我发现了另一个适用于我的情况的简单解决方案。

我使用Microsoft Windows 7 SP1和Goodle Chrome 23.0.1271.64 m，并在我的Web应用程序中使用FontAwesome。为了在Chrome中启用FontAwesome的反锯齿，只需按照maximo所说的那样开始src定义，以svg字体开头，但是在svg哈希后面删除字体名称。简单地将此转换：

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
       url('../font/fontawesome-webfont.woff') format('woff'),
       url('../font/fontawesome-webfont.ttf') format('truetype'),
       url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

这是英语中的文本，意思是“到这里”。

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
       url('../font/fontawesome-webfont.svg') format('svg'),
       url('../font/fontawesome-webfont.woff') format('woff'),
       url('../font/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

这有帮助吗？

（由simoneast编辑：将EOT版本移至顶部，否则会破坏IE。）

- Anthony

1

如果我使用你的修复方法@karminski，那么字体将无法在Safari（WIN）和IE（WIN）中显示。所以很遗憾，这不是一个解决方法。 - Jeremy Zahner

1

@JeremyZahner 这是因为建议实现不正确。SVG线条需要在两个EOT线条下面; 如果是这样，它将在IE中工作。然而，Chrome对SVG字体有一个神秘的错误，会导致布局在罕见的、不可预测的情况下完全混乱。 - Pointy

一直使用SVG并不是最好的方式，因为SVG缺乏提示信息。在启用字体平滑处理的系统上，如果没有提示信息，字体看起来会比必要的更模糊。因此，我编写了一个名为Font Smoothie的小脚本，它检测字体平滑处理是否已启用，并在需要时仅更正CSS。我还创建了一个名为Fontie的Web字体生成器，它可以接受otf或ttf文件，并为您生成适当提示的Web字体、CSS和Font Smoothie包。 - Torben

1

为了在Windows上使用Chrome浏览器渲染Web字体时获得良好的抗锯齿效果，您需要在字体声明中使用以下格式。

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

    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Futura';
        src: url('futura.svg#futura') format('svg');
    }
}

基本上，您需要强制Chrome使用SVG字体格式。您可以通过将.svg版本的url移动到顶部来实现这一点，但是在Windows上，Chrome在执行此操作时存在布局错误的问题（包括版本30及以下）。通过使用媒体查询覆盖字体声明，可以解决这些问题。

另外：有时候OpenType字体和SVG字体之间的基线位置不匹配，但是您可以通过简单地编辑SVG字体文件来进行调整。SVG字体是基于xml的，如果查看声明，就可以进行编辑。

<font-face units-per-em="2048" ascent="1900" descent="-510" />

你可以更改上升值并将其与其他字体格式版本匹配。

- Supercranky

非常确定这对我有很大帮助。我的字体在列表中会变得非常拥挤（在Chrome中），然后在多次刷新后才会恢复正常。因此，很难找出原因，因为有时它只是开始工作。我刚刚改用媒体查询，目前看起来不错。希望能保持！ - Sackling

1

有一个CSS3属性 'font-smooth' 被Webkit支持。你试过了吗？

- shaunsantacruz

-2

经过多个小时的寻找解决方案，我终于找到了一个完美的解决方案。虽然它需要支付年费，但如果你是一个拥有多个网站的网页设计师，这是必备的！

www.typekit.com

它适用于所有现代浏览器，并解决了我在Chrome上遇到的烦人问题，所以我很高兴。无论您的访问者使用何种浏览器，在屏幕上呈现出色彩鲜艳的字体都是值得支付一小笔费用的。如果出现问题，请联系他们，他们会为您解决。这给任何字体带来了安心感。

- kia4567

我发现同样有效的方法是将其制作成WordPress网站（这是我最近开始在所有网站上使用的方法），并下载WP Google Fonts插件。它可以解决其他浏览器中的所有问题，而且免费且非常简单！ - kia4567

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- maximo · Accepted Answer

我已经解决了这个问题！Chrome喜欢先加载SVG线。只需提高其优先级即可。嗯......应该有人告诉Font Squirrel。

https://dev59.com/nm855IYBdhLWcg3w-JMr#9041280

例如：

src: url('geosanslight-webfont.eot');
src: url('geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
     url('geosanslight-webfont.svg#GeosansLightRegular') format('svg'),          
     url('geosanslight-webfont.woff') format('woff'),
     url('geosanslight-webfont.ttf') format('truetype');

如果这对你有用，请让我知道。干杯！

(由simoneast编辑：将EOT版本移到顶部，否则会破坏IE。)