Css @Chrome字体中的字体

我有我的，它看起来不错（现在CSS3媒体查询不适用于IE），但我发现我的@font-face坏了，在Chrome for Windows中看起来像垃圾（到目前为止，这是我发现的唯一主要的一个）

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

我去了FontSquirrel，得到了我正在使用的字体的字体面工具包，看起来像这样

@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，它看起来很棒。Chrome for Windows与@font face命令的配合不太好

有没有人对我能做些什么使它看起来更好或者修复它有什么建议？（除了删除@font-face类和使用常规字体之外。）

此外，我可能会使用Chrome的条件注释来查看常规字体，但我的HTML不会验证，嗯

---

因此，如果您有任何帮助，我们将不胜感激。

webkit支持CSS3属性“”。您试过了吗？

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

e、 g

让我知道这是否对你有效。干杯

---

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

在寻找修复程序的许多小时后，我找到了一个完美的修复程序。它需要年费，但是如果你是一个拥有多个网站的网页设计师，这是必须的

www.typekit.com

---

它适用于所有现代浏览器，它解决了我在Chrome上遇到的棘手问题，所以我很高兴。无论访问者在什么网站上观看，都值得花一点钱来使用优秀的字体。如果有问题，请与他们联系，他们会帮你解决。几乎任何字体都可以放心。

我找到了另一个简单的解决方案

我有Microsoft Windows 7 SP1和Goodle Chrome 23.0.1271.64 m，用于我的web应用程序。要在Chrome simple remove中为FontAwesome启用抗锯齿，请按maximosaid-startsrc定义使用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;
}

对此：

有帮助吗

---

（由simoneast编辑：将EOT版本移到顶部，否则会中断IE。）

要使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之前，包括版本30）。通过使用媒体查询覆盖字体声明，这些问题得以解决

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

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

---

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

有屏幕截图吗？因为它在Opera 12和Chrome 17中看起来完全相同，都在windows上。我不建议这样做是为了修复它，只是为了排除故障-如果将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将它呈现为纯粗体和blac那么这个结果意味着什么？Chrome的哪个版本？直到最近才修复了一个bug，在Windows中打开ClearType实际上在Chrome中关闭了除SVG（使用完全不同的渲染器）之外的所有内容的抗锯齿和暗示.在第16版中，应用了反别名，文本看起来还可以：哇。我喜欢dropbox。哈哈。我还没有仔细研究过它，但在你发布了你的链接后，我很好奇，这就简单多了。所以谢谢你。；（无论如何，奇怪的是，我在运行Chrome 16.0.9，我在运行Windows XP，不过你呢？我不知道该怎么办。。。[1] ：我实际上已经尝试过这个方法，它确实有效，但是后来我松开了实际的ie补丁，它在所有版本的ei中都从这个特定的字体变成了更粗体和黑色的常规字体。你知道如何处理新的ei问题吗？IE 8---->FF for MAC---->Chrome for WINDOWS--->我不确定IE的补丁是什么。我一直在使用font squirrel@font face生成器，只是交换了上面提到的行。您可以在以下位置看到它：然后按照此处发布的说明操作：这在IE中不起作用。在任何

@font-face

规则中，EOT文件始终必须位于第一位。没有其他浏览器会使用EOT文件，IE规则必须是第一个，否则IE会忽略整个事情。因此，将SVG行放在EOT文件之后，它就会工作。如果我在@karminski进行修复，那么字体将不会显示在Safari（WIN）和IE（WIN）中。所以不，遗憾的是，这不是一个解决办法。@JeremyZahner，这是因为建议的实施不正确。SVG线需要位于两条EOT线的下方；如果是这样的话，它将在IE中工作。然而，Chrome在SVG字体方面有一个神秘的缺陷，在罕见的、不可预测的情况下，会导致布局完全混乱。一直使用SVG

@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');
    }
}

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