問題描述

問題描述

查看框架代碼的時候，發(fā)現(xiàn)了幾處對字體設(shè)置的代碼，請幫忙解答其作用。

1.代碼段中font-size: 62.5%;的作用？

html { font-size: 62.5%; /*1*/}

2.代碼段中font:12px/1.5的作用？3.代碼段中5b8b4f53的作用？4.代碼段中font-size:1.2rem的作用？

body { font:12px/1.5 tahoma,arial,simsun,sans-serif,5b8b4f53; /*2,3*/ font-size:1.2rem; /*4*/}

5.代碼段中font-size:100%的作用？

input,button,textarea,select,label { font-size:100%; /*5*/}

問題解答

回答1：font-size: 62.5%;瀏覽器的默認(rèn)字體大小為16px，為了方便計算，這里把最頂層的html元素的字體大小設(shè)為16 * 62.5% = 10px。font:12px/1.5 和 font-size:1.2rem;設(shè)置body下的字體大小為1.2rem = 10px * 1.2 = 12px，行高為字體大小的1.5倍。5b8b4f53是宋體的unicode編碼。（參考：中文字體編碼對照表）表單的font-size:100%瀏覽器默認(rèn)設(shè)置中，表單控件的字體大小默認(rèn)比普通文本要小，這里把瀏覽器的默認(rèn)樣式覆蓋掉。回答2：1. 代碼段中 font-size: 62.5%; 的作用

一、基礎(chǔ)介紹

“Ems”: em 大小不固定，成為相對單位（body 則相對瀏覽器的默認(rèn)字體設(shè)置，子集相對父級）， 瀏覽器默認(rèn)設(shè)置字體大小為 16px，則 1em = 16px , 且其可擴(kuò)展（2em = 32px），目前常用的字體大小 px 換算成 em：

16px = 1em; 14px = 0.875em; 12px = 0.75em; 10px = 0.625em;

“Pixels”: px 大小是固定的，稱為絕對單位，在移動端的可訪問性差

“Points”: pt 大小固定，屬于絕對單位，適用于印刷、打印媒體“Percent”: % 跟 em 相似，以 percent 來表示，則當(dāng)前字體的大小為 100% ，使用 % 設(shè)置字體，你的頁面字體在移動設(shè)備端的可訪問性也很好

二、關(guān)系

一般情況下，1em=12pt=16px=100%，下面例子前提在 body 中設(shè)置基礎(chǔ)字體大小。

相對單位 em 和 % 會隨著基礎(chǔ)字體大小的變化而變化，而 pt 和 px 不會變化，這就是為什么選擇 em 和 % 設(shè)置 web 文檔文本的字體（其在移動端的訪問性也很好）。

三、em 與 % ，em 與 px 的換算

em 的特點(diǎn)：

em 的值并不是固定的em 會繼承父級元素的字體大小

重寫步驟：

body 選擇器中聲明 Font-size:62.5%；

將你的原來的 px 數(shù)值除以 10，然后換上 em 作為單位；

如果只需要以上兩步就能解決問題的話，可能就沒人用 px 了。經(jīng)過以上兩步，你會發(fā)現(xiàn)你的網(wǎng)站字體大得出乎想象。因?yàn)?em 的值不固定，又會繼承父級 元素的大小，你可能會在 content 這個 p 里把字體大小設(shè)為 1.2em，也就是 12px。然后你又把選擇器p的字體大小也設(shè)為 1.2em，但如果 p 屬于 content 的子級的話，p 的字體大小就不是 12px，而是 1.2em= 1.2 * 12px=14.4px 。這是因?yàn)?content 的字體大小被設(shè)為 1.2em，這個 em 值繼承其父級元素 body 的大小，也就是 16px * 62.5% * 1.2=12px,，而 p 作為其子級，em 則繼承 content 的字體高，也就是 12px。所以 p 的 1.2em 就不再是 12px，而是 14.4px。

重新計算那些被放大的字體的 em 數(shù)值。避免字體大小的重復(fù)聲明，也就是避免以上提到的 1.2 * 1.2= 1.44 的現(xiàn)象。比如說你在 #main 中聲明了字體大小為 1.2em，那么在聲明 p 的字體大小時就只能是 1em，而不是 1.2em，因?yàn)榇?em 非彼 em，它因繼承#content的字體高而變?yōu)榱?1em=12px。

詭異的1 2px 漢字：在完成 em 轉(zhuǎn)換時還會發(fā)現(xiàn)一個詭異的現(xiàn)象，就是由以上方法得到的 12px(1.2em) 大小的漢字在IE中并不等于直接用 12px 定義的字體大小，而是稍大一點(diǎn)。這個問題我已經(jīng)解決，你只需在 body 選擇器中把 62.5% 換成 63% 就能正常顯示了。

2.代碼段中 font:12px/1.5 的作用？

font: 12px;line-height: 1.5;3.代碼段中 5b8b4f53 的作用？

font:12px/1.5 tahoma,arial,simsun,sans-serif,5b8b4f53;

這是 css 中 font 的簡寫寫法。

字體：字體大小/字體行高 字體格式。

'5b8b4f53' 就是 “宋體”。用 unicode 表示，不用 SimSun, 是因?yàn)?Firefox 的某些版本和 Opera 不支持 SimSun 的寫法。注釋亂碼：強(qiáng)烈建議不要用中文注釋，如 font-family:’宋體’

為了方便大家好查，整理了些中文名 Unicode：

字體名稱 Unicode新細(xì)明體 65B07EC6660E4F53細(xì)明體 7EC6660E4F53標(biāo)楷體 680769774F53黑體 9ED14F53宋體 5B8B4F53新宋體 65B05B8B4F53仿宋 4EFF5B8B楷體 69774F53仿宋_GB2312 4EFF5B8B_GB2312楷體_GB2312 69774F53_GB2312微軟正黑體 5FAEx8F6F6B639ED14F53微軟雅黑 5FAE8F6F96C59ED14. 代碼段中 font-size:1.2rem 的作用？

參考答案1

5. 代碼段中 font-size:100% 的作用？

參考答案1

回答3：

1和5 ：font-size:100%就是默認(rèn)字體大小，62.5%就是默認(rèn)字體大小的62.5%

2：font:12px/1.5 ；12px字體大小，1.5倍行高（line-height）

3:5b8b4f53 宋體的編碼

4：rem是根據(jù)html根元素計算的。html,body{font-size:20px;}那么1rem就是20px,2rem就是40px