如果当前字体中不存在字体粗细,浏览器如何更改字体粗细?



假设我有一个网页字体,不同的字体权重对应不同的文件。当我在CSS中更改不同的权重时,我认为它会查找与该font-weight相关联的相应字体文件。一切正常

现在,如果我有另一种字体,它没有不同的字体权重,那么我再次在样式表中设置不同的字体权重,并在浏览器中查看字体权重的变化。

所以,我想知道,在缺少font-weight的情况下,如何计算字体应该是什么样子?这是浏览器尝试使用某些算法猜测的东西吗?如果是这样,我还需要其他字体粗细文件吗?或者,这些算法在不同浏览器中的可靠性如何?

正如@BoltClock在评论中提到的,这在CSS字体模块Level 3 CR的3.2节字体权重:Font -weight属性和5.2匹配字体样式中有描述,但它并没有定义所有的细节,浏览器的行为可能会有所不同。

基本原则是使用给定字体粗细的字体。对于大多数字体,只有普通(常规,400)和粗体(700)字体可用,也许只有普通。在这种情况下,所有小于正常值的字体和500被映射为正常值,600、800和900被映射为加粗。

如果粗体不可用,但要求加粗(通过font-weight设置为600或更大),浏览器可以在正常字体上使用算法(合成)加粗。理论上,这取决于font-synthesis属性,但它还没有实现,所以它取决于浏览器。

测试页(假设Windows中通用的Lucida Sans Unicode字体可用,只有普通字体):

<!DOCTYPE html>
<title>Test</title>
<style>
* { font-family: Lucida Sans Unicode }
</style>
<p>Hello world
<p style="font-weight: 600">Hello world
<p style="font-weight: 700">Hello world
<p style="font-weight: 800">Hello world

Firefox和IE以合成粗体(faux bold)显示除第一段以外的段落,而Chrome只以这种方式显示后两段,即不将600映射为粗体,而是将其映射为normal。

一般来说,合成粗体是印刷工不喜欢的,这是有充分理由的。然而,对于那些笔画宽度变化很小或没有变化的无衬线字体,例如Lucida Sans Unicode或Arial Unicode ms,它可能会产生可接受的结果

此链接的答案:

font-weight属性接受关键字值或预定义值数值。可用的关键字有:

正常粗体粗体粗体打火机可用的数值:

100 200 300 400 500 600 700 800 900关键字值normal映射到数值400和粗体值映射到700。

为了查看使用400或700以外的值的效果所使用的字体必须具有与指定字体相匹配的内置字体权重。

如果一个字体有一个粗体("700")或普通("400")版本作为字体家族,浏览器会使用它。如果这些不可用,浏览器将模仿它自己的粗体或正常版本的字体。它不会模仿其他不可用的权重。字体通常使用名称如"Regular"one_answers"Light",以识别任何可供选择的字体大小。

如果没有找到合适的字体族,浏览器基本上会猜测。猜测意味着你会得到较差的渲染质量,以及不同浏览器之间不一致的结果。所以,如果可能的话,你真的应该尽量不要让这种情况发生:

裁判:http://alistapart.com/article/say-no-to-faux-bold

最新更新