这时候你也许会想，和 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 端浏览器，你可能没太在意过；手机浏览器里因为设置项比较少，大家应该都见到过。如果我们可以通过浏览器的设置，对几乎所有网页的文字大小进行一个相应的调整，那我们的浏览体验就得到了提升。毕竟每个人对于文字大小的需求都不太一样，有的人可能希望一屏能显示更多的文字，而减少翻页的操作；有的人视力不太好（比如小老鼠），就希望文字能够显示得大一点。浏览器给出的这种调整方式就是为了满足不同浏览者的需求。
暂无评论内容