CSS中的font-size属性使用教程

基本语法结构：

Font-size+字体大小数值+单位
单词：font-size
语法：font-size : absolute-size | relative-size | length
取值：xx-small | x-small | small | medium | large | x-large | xx-large
xx-small:最小
x-small:较小
small:小
medium:正常(默认值)，根据字体进行调整
large:大
x-large:较大
xx-large:最大
也可取具体长度单位值

例子1——默认设置

在一个空白的HTML文档内，你没有任何关于字体大小的声明而只使用默认设置。在大多数浏览器上为html和body标签的默认字体大小为100%。这等同于如下算式——

1. 100% = 1em = 1rem = 16px = 12pt

例子2——绝对单位VS相对单位

绝对和相对单位之间的差异可以通过改变html的字体大小来突出显示。如果我们设置html{font-size:200%}，这将只影响<p>用相对单位设置的字体的大小。

这是使用相对单位的一个重要优势。有了如此轻易缩放字体大小的功能，你可以通过只改变html字体大小来创建一个真正具有响应性的网站。这里有一个很好的例子
例子3——REM VS EM（和%）

em（和%）单位是通过计算父元素的字体大小来显示当前的字体大小。比如——

1. html {
2.   font-size: 100% /* =16px */
3. }
4. body {
5.   font-size: 2em; /* =32px */
6. }
7. p {
8.   font-size: 1em; /* =32px */
9.   /* font-size: 0.5em; =16px */
10. }

当你为一个元素使用em单位时，你必须考虑到所有父元素的字体大小。正如你看到的，这很容易（让字体大小的计算）变得复杂而凌乱。

解决这个问题的便是rem。rem是基于html元素的字体大小而不是父元素。比如——

1. html {
2.   font-size: 100% /* =16px */
3. }
4. body {
5.   font-size: 2rem; /* =32px */
6. }
7. p {
8.   font-size: 1rem; /* =16px */
9. }

使用rem可以让你拥有em和%的缩放能力而无需处理嵌套问题。
例子4——视口宽度大小

vw是CSS3新加入的一个使用视口宽度来计算字体大小的单位。这样可以允许更多的响应字体大小。

尽管这似乎是为响应式设计的一个很有用的单位，但我个人不是它的粉丝。因为它并不能在字体大小上给我更多的控制权，他总是显示的过大或过小。

我的方法

在我做这项研究之前，我一直使用像素来设置我的字体大小。这是因为现在的大多数浏览器允许用户在字体太小的情况下自行放大页面，所以使用像素并没有什么问题。

但是，我发现这种方式在很大程度上限制了扩展能力。虽然我的字体在中小屏幕上看起来不错，但他应该在大屏幕上有更好的优化。即便用户有放大的选项，这也不应该是我们希望他们来做的事情。

因此我使用rem设置的解决方案是(使用像素作为备用)。

1. html {
2.   font-size: 62.5%; /* sets the base font to 10px for easier math */
3. }
4. body {
5.   font-size: 16px;
6.   font-size: 1.6rem;
7.   /* sets the default sizing to make sure nothing is actually 10px */
8. }
9. h1 {
10.   font-size: 32px;
11.   font-size: 3.2rem;
12. }

这样我扩大了字体大小而只需要这样写——

1. @media screen and (min-width: 1280px) {
2.   html {
3.     font-size: 100%;
4.   }
5. }