Google Chrome中的字体平滑处理

Question

我正在尝试将我的图标转换成字体字形。

现在，问题是Google Chrome在Windows 7上的字体反锯齿（在OS X上看起来很好）。我有两张截图，在第一张截图中，您可以看到所需的行为，如在Firefox / Windows 7和所有其他浏览器中所见，除了Google Chrome，这是第二张截图。这个问题是字体本身的问题吗？还是由于系统设置？是CSS设置引起的吗？

Firefox 12 Windows 7

Google Chrome 18 Windows 7

最令人困扰的部分用红色突出显示。

- Korpsa

---

每个浏览器的平滑效果都不同！而且，恐怕 CSS 无法解决这个问题，字体格式也不能。一般来说，这是浏览器的问题（有些添加了操作系统平滑，有些使用自己的平滑方式，有些则混合了两种），或者我愿意说是标准的问题，在平滑方面特别是针对 Web 的平滑，因为没有相关标准。CSS3 变换也存在同样的问题（现在可能已经被修复了），但是每个浏览器的抗锯齿效果都不同。 - tomsseisums

Answer 1

使用CUFON而不是@font-face，因为在Windows中呈现字体时，它是更好的选择，因为CUFON将字体放入画布中，在Windows中看起来更加平滑。

- sandeep

---

那是一种解决方案。谢谢你的回答，我会等待看看是否有人能够提供不需要额外JavaScript的解决方案，然后再尝试你的。 - Korpsa

Answer 2

使用text-shadow可以有所帮助，尝试添加一点阴影，模糊度为4-6像素。试着调整一下，你可能会找到“甜点”。某些字体大小似乎比其他字体更具问题性，尝试将其上下调整一到两个像素，看看是否有所帮助。我正在与Google这个特定的问题作斗争，并希望能引起某人的注意。在这张图片中，上面的例子是IE9，下面的例子是Google Chrome（都是Windows 7）。https://twitter.com/#!/tacomamama/status/197397136470589440/photo/1

- Jennifer B

---

谢谢这个提示。它确实改善了字体的外观。 - Korpsa