@font 在 Chrome 中面对波涛汹涌的字体

Posted 2023-03-06

【中文标题】@font 在 Chrome 中面对波涛汹涌的字体

【英文标题】：@font face choppy font in Chrome

【发布时间】：2012-02-21 10:18:45

【问题描述】：

我有我的website that I am creating here，它看起来不错（现在 CSS3 媒体查询不适用于 IE）但我发现我的@font 脸坏了，在 Windows 版 Chrome 中看起来像废话（到目前为止，这是唯一的主要我找到的）。

我已经对其进行了搜索，发现应该可以工作的 CSS3 rbg 修复程序，但它对我没有任何帮助。 Paul Irish 做了防弹修复，但是我的字体在 android 中中断了。我已经研究了几个小时，但似乎找不到任何可行的方法。我听说过 Cufon，但我正试图坚持使用 @font face，因为我遇到了这个问题。

我去了字体松鼠，得到了我正在使用的字体的字体套件，所以它看起来像这样

@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 上检查过它，它看起来不错，FF 9 用于 Windows，FF 8 用于 OSX， Safari Opera，它看起来很棒。Windows 版 Chrome 不能很好地使用 @font face 命令。

是否有人对我可以做些什么来使它看起来更好或修复它有什么建议？ （除了删除 @font 面类和使用常规字体。）

此外，我最终可以使用 Chrome 的条件注释来查看常规字体，但我的 html 将无法验证是吗？

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

【问题讨论】：

有截图吗？因为它在 Windows 上的 Opera 12 和 Chrome 17 中看起来相同。

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

@c69 好的。我在 Windows 屏幕截图上有一个 chrome 和一个 Firefox。 www.ambergoodwin.com/images/chrome.jpg www.ambergoodwin.com/images/firefox.jpg @TheKaneda 我尝试了你的建议，它有所帮助。它按照我想要的方式平滑了它，但是 IE 现在将它呈现为简单的粗体和黑色。那么这个结果意味着什么？

什么版本的 Chrome？直到最近才修复了一个错误，其中在 Windows 中打开 ClearType 实际上在 Chrome 中为除 SVG（使用完全不同的渲染器）之外的所有内容打开了抗锯齿和提示 off。在版本 16 中，应用了抗锯齿 并且文本看起来不错：dl.dropbox.com/u/14034871/chrome16.png

哇。我喜欢保管箱。哈哈。我并没有真正研究它，但是在你发布你的链接之后我很好奇，这很容易。所以谢谢你。 ;) 无论如何，奇怪的是，我正在运行 Chrome 16.0.9 我正在运行 Windows XP，但你呢？我对该怎么做感到困惑...... [1]：dl.dropbox.com/u/43287957/Chrome-16.0.9.jpg

【参考方案1】：

webkit 支持 CSS3 属性“font-smooth”。你试过吗？

【参考方案2】：

我已经解决了这个问题！当您首先加载 SVG 行时，Chrome 会喜欢它。把它放在优先级上。嗯……应该有人告诉 Font Squirrel。

https://***.com/a/9041280/1112665

例如

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。）

【讨论】：

我实际上已经尝试过了，它确实有效，但是我松开了实际的 ie 修复程序，它从这个特定的字体变成了所有版本的 ei 中更粗更黑的常规字体。你知道如何处理新的 ei 问题吗？ IE 8 ---> dl.dropbox.com/u/43287957/ie8-WINDOWS.jpg FF 用于 MAC ---> dl.dropbox.com/u/43287957/firefox-MAC.jpg Chrome 用于 WINDOWS ---> dl.dropbox.com/u/43287957/chrome-WINDOWS.jpg

我不确定 IE 修复程序是什么。我一直在使用字体松鼠 @font-face 生成器，只是交换了上面提到的行。您可以在以下位置查看：bit.ly/yGMCvg

然后按照此处发布的说明进行操作：***.com/questions/5477521/…

这在 IE 中不起作用。在任何@font-face 规则中，EOT 文件 always 必须是第一个。没有其他浏览器会使用 EOT 文件，并且 IE 规则必须是第一个，否则 IE 将忽略整个事情。因此，将 SVG 行 放在 EOT 文件之后，它就可以工作了。

【参考方案3】：

经过数小时的寻找修复后，我找到了一个完美的修复。它需要支付年费，但是如果您是拥有多个网站的网页设计师，这是必须的！

www.typekit.com

它适用于所有现代浏览器，它解决了我对 Chrome 的讨厌问题，所以我很高兴。无论您的访问者正在查看什么内容，拥有出色类型的小笔费用都是值得的。开始有问题，联系他们，他们会为您解决。几乎任何字体都可以安心使用。

【讨论】：

我发现也能正常工作的是将它变成一个 wordpress 网站（这是我最近开始对我所有的网站做的）并下载 WP Google Fonts 插件。它修复了其他浏览器中的所有这些问题，它是免费的而且非常简单！

【参考方案4】：

我为我的情况找到了另一个简单的解决方案。

我有 Microsoft Windows 7 SP1 和 Goodle Chrome 23.0.1271.64 m 并在我的 Web 应用程序中使用 FontAwesome。要在 Chrome 中为 FontAwesome 启用抗锯齿功能，请按照 ma​​ximo 所说的简单删除 - 使用 svg 字体开始 src 定义，但还要在之后删除字体名称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。）

【讨论】：

如果我修复了@karminski，那么字体将不会显示在 Safari (WIN) 和 IE (WIN) 中。所以不，很遗憾，这不是解决办法。

@JeremyZahner 这是因为建议实施不正确。 SVG 线需要位于两条 EOT 线的下方；如果是，那么它将在 IE 中工作。然而，Chrome 的 SVG 字体存在一个神秘的错误，会导致布局在罕见的、不可预测的情况下完全混乱。

一直使用 SVG 并不是最好的方法，因为 SVG 缺乏提示信息。在没有提示的情况下，字体看起来比在启用字体平滑的系统上更模糊。因此我写了a small script called Font Smoothie，它检测是否启用了字体平滑并仅在需要时更正CSS。我还创建了a webfont generator named Fontie，它采用 otf 或 ttf 并为您生成一个带有适当提示的 webfonts、CSS 和 Font Smoothie 的包。

【参考方案5】：

要让 webfonts 在 Windows 上的 Chrome 中呈现良好的抗锯齿效果，您需要在字体声明中使用这种格式：

@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" />

您可以更改 ascent 的值并使其与其他字体格式版本匹配。

【讨论】：

很确定这对我有很大帮助。在列表中时，我的字体会全部挤在一起（在 chrome 中），然后在多次刷新后恢复正常。所以很难找出原因，因为有时它会开始工作。我只是将其更改为使用媒体查询，到目前为止一切都很好。希望它留下来！