搜尋

首頁  >  問答  >  主體

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

问题描述

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

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*/
}
迷茫迷茫2871 天前591

全部回覆(3)我來回復

  • PHPz

    PHPz2017-04-17 11:19:10

    • 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%
      瀏覽器預設設定中，表單控制項的字體大小預設比一般文字小，這裡把瀏覽器的預設樣式覆蓋掉。

    回覆
    0
  • 黄舟

    黄舟2017-04-17 11:19:10

    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

    回覆
    0
  • 黄舟

    黄舟2017-04-17 11:19:10

    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

    回覆
    0
  • 取消回覆