css中如何實現字體響應式

這篇文章主要介紹了css中如何實現字體響應式，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

問題場景：

在實現響應式布局的過程中，如何設置字體大小在不同的視窗尺寸以及不同的移動設備的可讀性?

需要了解的有:

1.px,em,pt之間的換算關系
1em = 16px
1px  = 1/16 em = 0.0625em

////以下用的比較少//////
1em = 12pt
1px = 3/4 pt = 0.75pt
1pt = 1/12 em 0.0833em
1pt = 4/3 px = 1.3333px

2.任意瀏覽器默認字體都是16px。所有未經調整的瀏覽器默認尺寸為 1em=16px

3.chrome強制最小字體為12px，即使設置成10px，最終會顯示成12px。這點解釋了為什么有時候在ie或mozllia里的字體大小與chrome有初入

4.px,em,rem vw,vh,vmin的區別在哪？

px：

相對單位。相對于屏幕分辨率。這就是為什么分辨率越大字體越小的原因所在。那px的優缺點又如何？

優點：比較穩定、精確。

缺點：如果對頁面進行縮放，影響文本可讀性。可通過使用em作為字體單位解決這個問題。

em：

相對單位。根據基準數值縮放字體大小，是一個相對值，而非具體值。基準值取決于，父級元素所設置的font-size。如果父級元素未設置font-size 依次向上尋找直到根節點。

優點：彌補了px的不足

缺點：過于依賴父級節點，容易出現字體大小重復聲明。

rem:

相對單位。相對于根結點html的字體大小。

缺點：避免了em依賴父級元素字體大小

優點：參考系只有一個，根節點字體大小

<SPAN style="FONT-SIZE: 16px">html{font-size:100%}    
     
//響應式的字體大小相對于根節點變化    
@media (min-width: 640px) { body {font-size:1rem;} }    
@media (min-width:960px) { body {font-size:1.2rem;} }    
@media (min-width:1100px) { body {font-size:1.5rem;} }    
</SPAN>

5.為什么根結點字體大小要設置成62.5%？

上面介紹過瀏覽器默認字體大小為16px，如果想要在不同的頁面尺寸下設置字體大小分別為12、14、18px怎么辦？

難道必須使用 12/16 rem,14/16rem,18/16rem 這種方式來計算字體的相對大小嗎?

更簡便的方式，在根結點設置字體大小為10px，這樣一來在media里可以直接寫成1.2rem,1.4rem,1.8rem。 根結點如果設置成10px，那么相對于瀏覽器默認字體大小為 font-size:10/16 % 即 font-size:62.5%

<SPAN style="FONT-SIZE: 16px">html{font-size:10px}    
     
//響應式的字體大小相對于根節點變化    
@media (min-width: 640px) { body {font-size:1m=1.2 rem;font-size:12px;  /某些瀏覽器不支持rem/} }    
@media (min-width:960px)  { body {font-size:1.4 rem; font-size:14px; /*某些瀏覽器不支持rem，需要再次使用px聲明font-size*/} }    
@media (min-width:1100px) { body {font-size:1.8 rem; font-size:18px; /*同上*/} }    
</SPAN>

<SPAN style="FONT-SIZE: 16px">html{font-size:16px}    
     
//響應式的字體大小相對于根節點變化    
@media (min-width: 640px) { body {font-size:12/16 rem;font-size:12px;  /某些瀏覽器不支持rem，需要再次使用px 聲明font-size/} }    
@media (min-width:960px)  { body {font-size:14/16 rem; font-size:14px; /*某些瀏覽器不支持rem，需要再次使用px聲明font-size*/} }    
@media (min-width:1100px) { body {font-size:18/16 rem; font-size:18px; /*同上*/} }    
</SPAN>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css中如何實現字體響應式”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!