回顧上一篇文章"【實戰】用Media Query實現響應式Web布局"，談到頁面框架實現響應式布局，那么這里就有一個疑問：字體也可以嗎？答案：完全可以。

大伙都知道，現在設置字體大小常用的就只有幾種：px、em、pt、百分比，rem等。我們先可以看下各個單位之間的關聯，如下圖：

前面四種相信大家都比較熟悉了，對rem或許陌生，因為它是CSS3新引進的設置字體大小的方法。下面針對px、em、rem三種最常用方法進行對比下：

px單位：

px單位使用頻率最高的了，相比其他幾種要更加穩定和精確。缺陷就是太死板啦，如果哥姐們您近視，哪天忘記帶眼鏡，想通過瀏覽器調整字體大小把字體搞大

點，那就很高興的告訴您：行不通，也就是不能達到字體響應式，這種缺陷尤其是在移動端，小屏手機看得比較舒服，大屏手機預覽頁面字體就不咋滴了。于是后面

就提出了使用“em”來定義Web頁面的字體。

em單位：

em單位的引進的確解決了一些問題，比px單位要實用多了，但也有缺陷。

em都是以

的“font-size”為基準。如果我們使用“1em”等于“10px”來改變默認值“1em=16px”,我們設置font-size:1.2em就是相當于font-size:12px。

em 的計算是基于父級元素的，對元素字體大小進行設置，都有可能需要知道他父元素的大小，在復雜頁面中多次使用麻煩就來了，蛋疼啊蛋疼。

說明：頁面默認字體大小16px的，換句話說，閣下未對字體進行任何設置時，字體大小是16px，這是各大瀏覽器【甚至牛逼轟轟的IE6】都約好了。Go on>>

疑惑：既然em和px有諸多弊處，有木有比它們更好的呢？

金無足赤，人無完人，沒有更好，只有最好 No best, but better. There is nothing best but better，于是rem出現了。

rem單位：

承載著頁面仔的“夢想”，css3帶著它的小弟rem來了。一起來了解下。

rem[font size of the root element]，它是相對于根元素，而em是相對于父級元素，這樣就意味著，我們只需要在根元素確定一個參考值，在對頁面其他元素設置字體的時候，暫且可不考慮父級元素的大小了。來個實例說說吧：html{font-size:62.5%; /* 10÷16=62.5%? "1em"等于"10px"*/ }

body{font-size:1.2rem ; /* 12÷10=1.2 */}

p{font-size:1.4rem;}

這樣一來，rem要比em實用多了，但是別高興的太早啊，眾所周知，CSS3的東東很多IE6/7/8不支持的，rem也不例外呢，如果我們想使用rem的話就得多設置一個font-size以px為單位，如下：html{font-size:62.5%; /* 10÷16=62.5%?"1em"等于"10px" */ }

body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */ }

p{font-size:14px;font-size:1.4rem;}

這樣就兩全其美了。但是有個問題必須補充下，谷歌瀏覽器最小字體大小是12px的，關于這個問題的解決方法請閣下看先前寫的一篇文章：新版谷歌(Chrome)設置字體大小問題

總結：

相比PC端，rem在移動端【安卓和ios】要應用更多，所以掌握這方面的知識還是很有用處的，當初本人對于字體大小都是混為一談，錯用亂用。今天出此文章，希望能幫到大家，歡迎前來吐槽！！

總結

以上是生活随笔為你收集整理的html中响应式字体怎么写,如何实现网页中字体响应式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。