标题皮了一下,小老鼠表示很开心。其实呢,我们这一章要讲的是——字重。

这个词我们日常好像也没接触过,其实就是讲的文字的粗细,你理解为文字的胖瘦,就可以接受字重这个叫法了。

属性名:font-weight。然后它可以设置的属性值稍微有点多:

数字

首先它可以是整百的数字,100—900,九个值。

其中 400 相当于我们文字的正常粗细,就是不胖不瘦,中等身材。我们一般所说的加粗,相当于 700。

如果你设置的值不是整百的数字,那么会被四舍五入到整百。

这么说的话,我们网页上文字可以有九个粗细,比六个级别的标题还要多。想想真的是一件对设计师十分友好的事情。然而事实上,只是给出了这么多级别可供设置,但实际显示成什么样子,还要看字体是不是能够提供这么多粗细的样式。如果字体没有提供对应的粗细,那么就会选用比较接近的进行显示。所以你在修改数值的时候,没有感觉到变化,很可能是字体没有提供足够的选择。

正常

normal 这是它的默认值,这是我们在网页中看到文字最普通的样式,相当于上面数字中的 400。你没有设置字重的时候,就是这个样子的。

加粗

bold 加粗,相当于 700。这就是我们日常所说的加粗。然后我们日常使用的字体,一般来说,起码也会提供这两种粗细,所以没有什么特别的需求,设置这两个值很保险。

更粗、更细

lighterbolder,两个比较级的单词,都表示比父元素的文字粗细更…怎么样。当然有一个前提,就是字体确实允许它更…怎么样。

大家可能会认为,这两个值都是在父元素的 font-weight 基础上进行整百的加减。而实际情况并不是,而是非常简单粗暴的从 100400700900 中选择一个最接近的更粗或者更细的值。所以事实上,lighter 只能选择前三个值中的一个;而 bolder 只会选择后三个值。


然后列出一下这九个数字值所对应的,一般情况下的名称:

  • 100: Thin (Hairline)
  • 200: Extra Light (Ultra Light)
  • 300: Light
  • 400: Normal
  • 500: Medium
  • 600: Semi Bold (Demi Bold)
  • 700: Bold
  • 800: Extra Bold (Ultra Bold)
  • 900: Black (Heavy)

这个对照,仅供参考。我们在日常写网页的时候,都要考虑最差的情况,毕竟你永远也猜不到用户的电脑上使用的会是哪些字体。

然后到这里我们也解决了最开始 <strong></strong> 的问题,这个标签是表示强调的意思,而我们为了在文本中把这个意思表达出来,会将这个标签内文字的字重设置得高一点,浏览器默认一般是 bold。但是我们也可以根据需求给它设置成其他样子,比如说,并不让它加粗,而是把文字设置为红色,这是完全没有问题的。所以还是那句话:用 HTML 说明这个东西是什么,而它长什么样子,留给 CSS 去描述。

【本章助记卡片:卡片 for 第三十四章