如何改善谷歌浏览器中的字体外观？

Question

.

左边是firefox 4，右边是chrome 12。有没有办法让chrome渲染出更漂亮的字体？

上图是在 windows xp 上拍摄的。下面是来自 Windows 7 的另一个示例。

Answer 1

检查 ClearType 设置 - Chrome 屏幕截图看起来像是被迫呈现非抗锯齿。这将杀死几乎任何网络字体，因为它们没有单色提示（出于大小原因等）。我曾经看到这个报告为“IE 渲染文本更好”，因为它会忽略您的操作系统级别的 ClearType 设置并默认将其打开。

Answer 2

所有这些答案都是错误的！这是 Google Chrome 中的一个大错误，请在此处查看官方错误报告/线程，包括大量屏幕截图：Chrome 代码的官方错误报告

目前最好的解决方法是简单地给你的元素/标题这个简单的规则：

-webkit-text-stroke: 1px

约翰博士的补充：我发现了一个同样有效的建议html { -webkit-text-stroke: 0.25px}- 在这里找到了 https://groups.google.com/forum/?fromgroups#!topic/mathjax-users/dV_TmJ1QMO4

Answer 3

Chrome 正在读取您在 Windows XP 上默认关闭的 ClearType 设置。

1. 要解决此问题，请先关闭 Chrome 浏览器。

2. 现在右键单击桌面上的任意位置，然后从下拉菜单中选择“属性”。

3. 单击新窗口顶部的“外观”选项卡。

4. 然后单击“效果”按钮。

5. 第二个选项应为“使用以下方法平滑屏幕字体的边缘”。

6. 选择“ClearType”选项。

7. 单击应用并重新打开您的 Chrome 浏览器。

从现在开始，Chrome 将为您的字体呈现很好的抗锯齿效果，以获得流畅的效果。

Answer 4

将 SVG 文件放在 font-face css 规则中的较高位置，例如第一或第二：

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

代替：

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg');
font-weight: normal;
font-style: normal;
}

可以在此处查看此修复程序的示例：

FontSpring 示例
Adtrak 示例

Answer 5

您是否在 Google Chrome 中启用了 GPU 加速？键入about:flags并查找 GPU Accelerated Canvas 2D，如果启用则禁用它。当我在启用加速的情况下浏览时，某些网站上的字体看起来很锯齿。