css3 - CSS字体设置的几个问题？

Question

问题描述

查看框架代码的时候，发现了几处对字体设置的代码，请帮忙解答其作用。

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

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

2.代码段中font:12px/1.5的作用？
3.代码段中\5b8b\4f53的作用？
4.代码段中font-size:1.2rem的作用？

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

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

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

Answer 1

• font-size: 62.5%;
  瀏覽器的預設字體大小為16px，為了方便計算，這裡把最頂層的html元素的字體大小設為16 * 62.5% = 10px。
• font:12px/1.5 和 font-size:1.2rem;
  設定body下的字體大小為1.2rem = 10px * 1.2 = 12px，行高為字體大小的1.5倍。
• 5b8b4f53
  是宋体的unicode編碼。 （參考：中文字體編碼對照表）
• 表單的font-size:100%
  瀏覽器預設設定中，表單控制項的字體大小預設比一般文字小，這裡把瀏覽器的預設樣式覆蓋掉。

Answer 2

1. 程式碼段中 font-size: 62.5%; 的作用

一、基礎介紹

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

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

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

3. “Points”: pt 大小固定，屬於絕對單位，適用於印刷、印刷媒體
4. “Percent”: % 跟 em 相似，以 percent 來表示，則當前字體的大小為 100% ，使用 % 設定字體，你的頁面字體在行動裝置端的可訪問性也很好

二、關係

一般情況下，1em=12pt=16px=100%，下面例子前提在 body 中設定基礎字體大小。

相對單位em 和% 會隨著基礎字體大小的變化而變化，而pt 和px 不會變化，這就是為什麼選擇em 和% 設定web 文件文字的字體（其在行動端的存取性也很好）。

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

em 的特點：

1. em 的值並不是固定的
2. em 會繼承父級元素的字體大小

重寫步驟：

1. body 選擇器中宣告 Font-size:62.5%；

2. 將你原來的 px 數值除以 10，然後換上 em 的單位；

   如果只需要以上兩步驟就能解決問題的話，可能就沒人用 px 了。經過以上兩步，你會發現你的網站字體大得出乎想像。因為 em 的值不固定，又會繼承父級 元素的大小，你可能會在 content 這個 p 裡把字體大小設為 1.2em，也就是 12px。然後你又把選擇器p的字體大小也設為 1.2em，但如果 p 屬於 content 的子級的話，p 的字體大小就不是 12px，而是 1.2em= 1.2 * 12px=14.4px 。這是因為 content 的字體大小被設為 1.2em，這個 em 值繼承其父級元素 body 的大小，也就是 16px * 62.5% * 1.2=12px,，而 p 作為其子級，em 則繼承 content 的字體高，也就是 12px。所以 p 的 1.2em 就不再是 12px，而是 14.4px。

3. 重新計算那些被放大的字體的 em 數值。避免字體大小的重複聲明，也就是避免以上提到的 1.2 * 1.2= 1.44 的現象。比如說你在#main 中宣告了字體大小為1.2em，那麼在宣告p 的字體大小時就只能是1em，而不是1.2em，因為此em 非彼em，它因繼承#content的字體高而變為了1em=12px。

詭異的1 2px 漢字：在完成em 轉換時還會發現一個詭異的現象，就是由以上方法得到的12px(1.2em) 大小的漢字在IE中並不等於直接用12px 定義的字體大小，而是稍大一點。這個問題我已經解決，你只要在 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,b8bf53;

這是 css 中 font 的簡寫寫法。

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

"5b8b4f53" 是 「宋體」。用 unicode 表示，不用 SimSun, 是因為 Firefox 的某些版本和 Opera 不支援 SimSun 的寫法。
註釋亂碼：強烈建議不要用中文註釋，如 font-family:'宋体'

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

字体名称	Unicode
新细明体	65B07EC6660E4F53
细明体	7EC6660E4F53
标楷体	680769774F53
黑体	9ED14F53
宋体	5B8B4F53
新宋体	65B05B8B4F53
仿宋	4EFF5B8B
楷体	69774F53
仿宋_GB2312	4EFF5B8B_GB2312
楷体_GB2312	69774F53_GB2312
微软正黑体	5FAEx8F6F6B639ED14F53
微软雅黑	5FAE8F6F96C59ED1

4. 程式碼段中 font-size:1.2rem 的作用？

參考答案1

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

參考答案1

Answer 3

1和5 ：font-size:100%
就是預設字體大小，62.5%就是預設字體大小的62.5%

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

3:5b8b4f53 宋體的編碼

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