css - 为什么我的谷歌字体在同一个字符的多个部分有不一致的粗细？

Question

我想知道是否有人可以指出正确的方向。我希望显示 Google 字体 Orbitron在每个给定的字体大小下具有一致的权重。听起来很简单，对吧？不在我的场景中。在某些 font-sizes 下，某些字符在同一字符内具有多个权重。

注意:我正在 Windows 7、Chrome v27

中对此进行测试

代码:

<link href='http://fonts.googleapis.com/css?family=Orbitron:400,500,700,900' rel='stylesheet' type='text/css'>
.sixteen{
    font-family: Orbitron;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
}
.nineteen{
    font-family: Orbitron;
    font-weight: 400;
    font-size: 19px;
    line-height: 22px;
}

<h4 class="sixteen">Home of Front End Developer and</h4>
<h4 class="nineteen">Home of Front End Developer and</h4>

这是一个fiddle解释我的问题。如果你看一下 fiddle ，你会在第一行看到大写字母 F、E 和 D 字符比该行中的其余字符具有更多的重量/厚度。但是正如您会在下一行中注意到的那样，

如果您无法复制我所看到的内容，请查看屏幕截图:

我的问题有两个方面:

1. 最好的技术描述方式是什么？ “一个给定字符中的多种字体粗细”不够简洁，而且不太可能有任何有值(value)的信息 Google results .
2. 有没有办法解决这个问题并使每个字体大小的每个字符的粗细保持一致？

Answer 1

1. 您所描述的只是字形中笔画的可见宽度的变化，或者简单地说是笔画宽度变化。这种变化在衬线字体中很常见，并且至少在某种程度上也出现在许多无衬线字体中。但是，在这种情况下，字体设计为具有相当恒定的笔划宽度，因此可见效果是由字体渲染差异引起的。

2. 无法消除字体渲染差异。字体渲染是一个复杂的问题，虽然一些提议的或实验性的 CSS 设置可能会影响它的某些方面，但它基本上不在你的控制范围内。例如，字体平滑(也称为抗锯齿)取决于操作系统及其设置以及浏览器及其设置。