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