【问题标题】:Why does my google font have inconsistent weight in multiple parts of the same character?为什么我的谷歌字体在同一个字符的多个部分有不一致的重量?
【发布时间】:2013-06-21 15:03:26
【问题描述】:

我想知道是否有人可以为我指明正确的方向。我希望在每个给定的字体大小下以一致的权重显示 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 来解释我的问题。如果你看一下小提琴,你会在第一行看到大写 FED 字符的顶行比其他字符的重量/厚度更大线。但正如您将在下一行注意到的那样,

如果你无法复制我所看到的,这里是一个屏幕截图:

我的问题有两个:

  1. 从技术上描述这个问题的最佳方式是什么? “一个给定字符中的多个字体粗细”不够简洁,并且不太可能有任何有价值的Google results
  2. 有没有办法解决这个问题并使每个字体大小的每个字符的权重保持一致?

【问题讨论】:

    标签: css typography google-webfonts google-font-api


    【解决方案1】:
    1. 您所描述的只是字形中可见笔划宽度的变化,或者简而言之笔划宽度变化。这种变化在衬线字体中是正常的,并且至少在某种程度上也出现在许多无衬线字体中。但是,在这种情况下,字体被设计为具有相当恒定的笔画宽度,因此可见效果是由字体渲染差异造成的。

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

    【讨论】:

    • 完美答案。谢谢!
    【解决方案2】:

    当您缩小到一定大小时,我发现在线使用的一堆字体存在这个问题。这是字体被抗锯齿的方式。

    你可以从谷歌看到同样的问题炫耀该字体:http://www.google.com/fonts/specimen/Orbitron

    【讨论】:

    • 感谢您的回复,但这并不能直接回答我的任何一个问题。
    • @FillipPeyton 是的,确实如此。 1)它被称为抗锯齿。 2)不要使用那么小的字体大小或使用可以在该大小下工作的其他字体。
    • 显然,我可以说较小的字体大小会“解决”这个问题,但我不想这样做。改变我的要求并不是“解决”我的问题。我的第二个问题是“有没有办法解决这个问题并使每个字体大小的每个字符的权重保持一致?”,所以不,你没有回答这个问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-05
    • 2021-04-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多