它是如何工作的css字体重量值?

时间:2012-11-03 08:14:01

标签: css

我不了解字体粗细值。当我将其更改为粗体,普通或600+时,也会更改字体。但是将它改为100到500,不会改变任何东西。为什么要有这些价值?

4 个答案:

答案 0 :(得分:12)

font-weight值,从100到900,反映了设计字体的不同重量字体的排版实践。很少有字体具有所有这些权重,但是已经选择了比例来或多或少地覆盖所使用的不同权重。 CSS3字体草稿描述了数字和传统印刷术语之间的correspondence,例如Thin,Extra Light等,但术语确实有所不同。

在排版中,每个重量都是由印刷师设计的单独字体。这就是为什么大多数字体只有两个,或者只有一个重量的一个原因:设计字体需要时间,而时间就是金钱。特别适用于网络上使用的字体的另一个原因是显示设备相当粗糙,使得精细排版通常是一种相当无意义的尝试。特别是,小字体高度在低分辨率设备上不能很好地工作。

CSS规范定义了将声明的字体权重映射到可用权重的算法。例如,当只有权重400和700可用时(通常情况),则权重100,200和300被映射到400.

但是,在某些情况下浏览器会使用算法粗体字形。这是一个问题而不是解决方案,并且由于浏览器的不同,如果你要求不存在的权重,它可能会导致奇怪的事情。如果要求权重为600或更多,并且字体仅具有正常(400)字体,则大多数浏览器似乎使用算法粗体。例如,当文本处于Arial Unicode MS(没有粗体字体)时设置font-weight: bold会创建Arial Unicode MS的人工粗体版本。

常用字体还有其他问题。有时您需要使用字体名称,就好像它是字体名称一样,例如font-family: Arial Black代替逻辑设置font-family: Arial; font-weight: 900。有时这不起作用,因为在某些浏览器上只有逻辑方式才有效。

通常,不要尝试使用除正常和粗体之外的其他权重,除非通过@font-face使用可下载字体(网络字体),这样可以控制字体粗细问题。大多数可以用作可下载的字体只包含两个基本权重,或者只包含一个,但是有一些有趣的免费字体和几个权重。

答案 1 :(得分:1)

font-weight值会改变字体的重量。

通常只有所有浏览器。

font-weight:bold;

正常工作。

100-500 font-weight不粗体字体,因为它粗体字的百分比小于50%。

并且浏览器自动将其更改为普通字体而不是粗体

答案 2 :(得分:0)

font-weight设置您希望浏览器呈现的字体的预期权重。通常,相同字体的不同权重实际上是单独的字体(考虑ArialArial Black),浏览器甚至可以用不同的字体系列替换更大胆的字体。浏览器也不需要提供所有权重的所有字体,因此某些font-family / font-weight组合可能没有任何效果。

浏览器和CSS不是排版系统。您无法保证按照您指定的方式完全呈现所请求的样式。如果您想要更好地控制字体,请考虑使用@font-face声明。

答案 3 :(得分:0)

基本上,如果不存在具有指定font-weight的字体,它将被最接近的font-weight替换。这就是为什么你没有看到任何变化。

请注意,400是正常的,700是粗体,并且大多数网络字体没有更多的字体权重。所以95%的时间,你可以坚持使用“粗体”和“正常”来指定css中的font-weight。