标题皮了一下,小老鼠表示很开心。其实呢,我们这一章要讲的是——字重。
这个词我们日常好像也没接触过,其实就是讲的文字的粗细,你理解为文字的胖瘦,就可以接受字重这个叫法了。
属性名:font-weight
。然后它可以设置的属性值稍微有点多:
数字
首先它可以是整百的数字,100—900,九个值。
其中 400 相当于我们文字的正常粗细,就是不胖不瘦,中等身材。我们一般所说的加粗,相当于 700。
如果你设置的值不是整百的数字,那么会被四舍五入到整百。
这么说的话,我们网页上文字可以有九个粗细,比六个级别的标题还要多。想想真的是一件对设计师十分友好的事情。然而事实上,只是给出了这么多级别可供设置,但实际显示成什么样子,还要看字体是不是能够提供这么多粗细的样式。如果字体没有提供对应的粗细,那么就会选用比较接近的进行显示。所以你在修改数值的时候,没有感觉到变化,很可能是字体没有提供足够的选择。
正常
normal
这是它的默认值,这是我们在网页中看到文字最普通的样式,相当于上面数字中的 400。你没有设置字重的时候,就是这个样子的。
加粗
bold
加粗,相当于 700。这就是我们日常所说的加粗。然后我们日常使用的字体,一般来说,起码也会提供这两种粗细,所以没有什么特别的需求,设置这两个值很保险。
更粗、更细
lighter
、bolder
,两个比较级的单词,都表示比父元素的文字粗细更…怎么样。当然有一个前提,就是字体确实允许它更…怎么样。
大家可能会认为,这两个值都是在父元素的 font-weight
基础上进行整百的加减。而实际情况并不是,而是非常简单粗暴的从 100
、400
、700
、900
中选择一个最接近的更粗或者更细的值。所以事实上,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 去描述。
暂无评论内容