这时候你也许会想,和 HTML 一样,我只需要知道更多的属性,CSS 就可以写得差不多了。Emmm……你说对了一半,所以我们先认识一些属性,把这一半拿下再说。

前面我们已经知道如何去设置文字的颜色了,那么现在我们来改变它的大小。HTML 部分和前面一样,我就不写了。

表示文字大小的 CSS 属性是:font-size,后面的属性值给定文字的尺寸。

应该说到这里,我们就已经学会了这个属性。但是还有一个比较麻烦的问题,我们如何去描述文字的大小?那么这里有很多种方式[1]

绝对大小

p {
  font-size: xx-small;
  font-size: x-small;
  font-size: small;
  font-size: medium;
  font-size: large;
  font-size: x-large;
  font-size: xx-large;
}

我们并不能给一个元素同时设置七个文字大小,如果坚持这样设置,那么前面的设置会被后面的设置所覆盖,起作用的只有最后一条。这里只是为了把可能的取值都列出来给大家看,才这么写的,

单词我就不解释了,和我们买衣服时看的 Size 十分类似。所以意思也很明白。至于它们具体是多大……Who care?当你使用这种写法的时候,可能更多关注的是它们相对的大小,这种大一点,那一种小一点。

相对大小

觉得上面的说法很随便?那么我们还有更加随便的。相对大小就是相对于父元素字体大小而言:

p {
  font-size: larger;
  font-size: smaller;
}

更大一点儿,或者更小一点,是不是更加随便呢?

这两种方法都在你并不关心文字具体尺寸的时候使用,但是它们也有一些计算方法,不过可能因为浏览器而异。

像素

上面这些粗略的说法,让你这个严谨的人感到不安。那我们就来换一个精确的表达方式,像素(px)。

p {
  font-size: 16px;
}

文字的大小是 16 像素,这是很准确的。但是这个指的是虚拟像素,而不是物理像素。区别是什么呢?

你看我还在用我的旧笔记本,14 吋的显示器,只有 1366×768 的像素;而你那么土豪,同样是 14 吋的显示器,居然用上了 4K 屏幕,有 3840×2160 的像素。这是什么概念呢?在相同的面积下,我的显示器上只有一个像素,而在你的显示器上,差不多就有 3×3 九个像素。

那同样是 16 像素的文字,在我的显示器上看起来很合适,到你的显示器上岂不是要小得像蚂蚁了?然而实际情况并不是,你的电脑系统中会有一个缩放设置,强行使用更多的像素来表达一个像素。比如说放比例是 300%,电脑就会用 3×3 的面积去表达一个像素。这时候你电脑上的文字实际看起来比我电脑上还能大一些。

这种情况在手机上更为常见,所以有时候我们发现虽然设置的都是相同的字号,在手机上显示出来的文字可能更大一些。

那么有了这个精确的单位,我们觉得世界很美好了。但它也是有缺陷的,就是太精确了。他把文字的大小给彻底确定下来了,导致浏览器无法对文字的大小进行进一步的调整。

上面我们刚刚讲的,是系统级的缩放。它影响的不只是文字,而是几乎一切显示的内容都进行了相应的缩放。而在浏览器里,还有一个显示文字大小的设置。这个在 PC 端浏览器,你可能没太在意过;手机浏览器里因为设置项比较少,大家应该都见到过。如果我们可以通过浏览器的设置,对几乎所有网页的文字大小进行一个相应的调整,那我们的浏览体验就得到了提升。毕竟每个人对于文字大小的需求都不太一样,有的人可能希望一屏能显示更多的文字,而减少翻页的操作;有的人视力不太好(比如小老鼠),就希望文字能够显示得大一点。浏览器给出的这种调整方式就是为了满足不同浏览者的需求。

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

>注释 1: 真的是很多种,但是有一些实在不常用,就没有提及,我们这里主要讲比较常用的方式.