回顧上一篇文章"【實(shí)戰(zhàn)】用Media Query實(shí)現(xiàn)響應(yīng)式Web布局"，談到頁(yè)面框架實(shí)現(xiàn)響應(yīng)式布局，那么這里就有一個(gè)疑問(wèn)：字體也可以嗎？答案：完全可以。

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

前面四種相信大家都比較熟悉了，對(duì)rem或許陌生，因?yàn)樗荂SS3新引進(jìn)的設(shè)置字體大小的方法。下面針對(duì)px、em、rem三種最常用方法進(jìn)行對(duì)比下：

px單位：

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

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

就提出了使用“em”來(lái)定義Web頁(yè)面的字體。

em單位：

em單位的引進(jìn)的確解決了一些問(wèn)題，比px單位要實(shí)用多了，但也有缺陷。

em都是以

的“font-size”為基準(zhǔn)。如果我們使用“1em”等于“10px”來(lái)改變默認(rèn)值“1em=16px”,我們?cè)O(shè)置font-size:1.2em就是相當(dāng)于font-size:12px。

em 的計(jì)算是基于父級(jí)元素的，對(duì)元素字體大小進(jìn)行設(shè)置，都有可能需要知道他父元素的大小，在復(fù)雜頁(yè)面中多次使用麻煩就來(lái)了，蛋疼啊蛋疼。

說(shuō)明：頁(yè)面默認(rèn)字體大小16px的，換句話說(shuō)，閣下未對(duì)字體進(jìn)行任何設(shè)置時(shí)，字體大小是16px，這是各大瀏覽器【甚至牛逼轟轟的IE6】都約好了。Go on>>

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

金無(wú)足赤，人無(wú)完人，沒(méi)有更好，只有最好 No best, but better. There is nothing best but better，于是rem出現(xiàn)了。

rem單位：

承載著頁(yè)面仔的“夢(mèng)想”，css3帶著它的小弟rem來(lái)了。一起來(lái)了解下。

rem[font size of the root element]，它是相對(duì)于根元素，而em是相對(duì)于父級(jí)元素，這樣就意味著，我們只需要在根元素確定一個(gè)參考值，在對(duì)頁(yè)面其他元素設(shè)置字體的時(shí)候，暫且可不考慮父級(jí)元素的大小了。來(lái)個(gè)實(shí)例說(shuō)說(shuō)吧：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;}

這樣一來(lái)，rem要比em實(shí)用多了，但是別高興的太早啊，眾所周知，CSS3的東東很多IE6/7/8不支持的，rem也不例外呢，如果我們想使用rem的話就得多設(shè)置一個(gè)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;}

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

總結(jié)：

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。