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