CSS：font-szie

作为前端程序员对font-size这个属性肯定是再熟悉不过，相信这是我们使用频率最高的属性之一了。
但是之前接到一个需求涉及到字体的适配，发现我好像对这个本应该很熟悉的属性好像有点陌生，于是花了点时间看了一下CSS的英文文档，虽然是一个简单的知识点，但是收获还是很大的。

font-size语法

/* <absolute-size> values */
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;

/* <relative-size> values */
font-size: smaller;
font-size: larger;

/* <length> values */
font-size: 12px;
font-size: 0.8em;

/* <percentage> values */
font-size: 80%;

/* Global values */
font-size: inherit;
font-size: initial;
font-size: unset;

从文档可以看出来，font-size支持absolute values relative values length percentage default几种类型值，其中absolute value我们在实际项目中很少使用到，毕竟UI同学在做设计的时候不会那么放任让字体随浏览器默认，或者给个larger就搞定了。

先说说px

最开始接触CSS设置文本字号的时候就是使用font-size:xxpx，能够简单直接的页面变化，不会有什么心理预期上的误差，因为不管你是320px的小屏幕还是1080px的大屏幕，font-size设置了多少就是多少。

再说rem em %

这几个单位是我们使用频次较高的，也是最能解决问题的。

• %
%算是接触的比较早的，比如下面的例子：

body:{
	font-size: 75%;//相对默认字号16px，75%*16=12px
}
span{
	font-size: 100%;//12px*100%=12px;
}

• em
em是一个相对单位，会参考其父元素且第一个有font-size的值，也就四我们所说的继承。

<div style="font-size:12px;">
我是12px
	<div style="font-size: 2em;">
	我是24px
		<div style="font-size: 4em;">猜猜我是多少？</div>
	</div>
</div>

• rem
rem是CSS3的属性，与em相比多了r，顾名思义，就是它的参考对象发生了变化，em是参照父元素，那么rem的r则是只参照root，也就是html，出现rem的原因也是想要避免参照元素的混乱，这样有一个唯一的参照标准，对于我们做适配来说，会是比较方便快捷的，只要控制好html的基值，就能比较容易适配各种复杂的情况了。

@media screen and (min-width:320px){
    html{
        font-size:75%;
    }
}
@media screen and (min-width:360px){
    html{
        font-size:84.375%;
    }
}
...
//类似这种可以根据屏幕尺寸做出适配

以上都仅接受正值

浏览器默认字号

现在浏览器一般都有一个可以更改页面默认字号的功能，一些有使用大字体习惯的用户都会不遗余力的去找到这个隐藏功能，然后更改成自己喜欢的大小。用户看起来是很舒服了，但是对于我们这些页面装修工来说算是灾难性的功能，因为默认字号改了，我们很多字号又都是使用的relative values，自然就会受到影响，这样的用户体验是不够友好，但是如果我们在html设置了固定字号，那更改默认字号自然就不会对我们的页面生效了。不过这个做法是不是不符合用户至上，我们也要因自己网站的面向用户而定吧，不一定要禁止，但也不是不能禁止。

参考：
https://www.w3.org/WAI/UA/TS/html401/cp0401/0401-FONT-SIZE.html
https://devdocs.io/css/font-size