作爲前端程序員對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