CSS魔法堂：再次認識font

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  文字承載着站點內涵，而良好的字體、排版則為用戶提供舒適的閱讀體驗。本文打算對字體稍微深入一下子網頁字體的內容，若有紕漏請大家指正，謝謝！

  目錄一坨:

  二, 字體分類

        1. 襯線體(Serif)

        2. 無襯線體/非襯線體(Sans-Serif)

        3. 等寬體(Monospace)

        4. 手寫體/書法體(Calligraphy)

　　   5. 符號體(Symbol)

   三, 再識font-family

　　   1. 認識font-family樣式屬性值

         2. 瀏覽器的默認字體

　　   3. 為何要以類族名稱結尾?

         4. 中文字體名稱的3種表示方式

　　   5. 到底如何設置font-family才能實現恰當地兼容呢?

　　   6. 3種設置font-family的思路!

   四, 字體樣式

   五、垂直排版基礎——baseline

   六, 字號單位

   七, 間距

   八, 分辨率與解析度

   九, 重溫font-variant、text-transform和font

   十, 了解ClearType

 

二、字體分類　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  1. 襯線體（Serif）

    襯線是筆畫末端的裝飾部分，用於更清晰地標明筆觸末端，提高辨識率從而提高閱讀速度。另外襯線字體感覺會更正統。下圖紅色部分就是襯線。

    

    網頁中英文襯線字體有Times New Roman和Georgia(下圖為12px的Times New Roman左 和 Georiga右)。

    

    網頁的中文襯線字體有宋體。

  2. 無襯線體/非襯線體（Sans-serif）

    

    網頁中英文無襯線字體有Arial,Verdana,Tahoma,Helivetica,Calibri等.(下圖由左至右依次為Arial,Verdana,Tahoma)

    

    注意：10px~12px的襯線字體在屏幕下難以辨認，因此網頁中常用無襯線字體而非襯線字體。原因請看解析度說明(下圖為10px的Verdana和Times New Roman對比)

    

  3. 等寬體（Monospace）

　　等寬字體僅針對西文字體。由於英文字母的寬度各不相同，導致編程時代碼排版很難看。在DOS命令中，看到的均是等寬字體。
　　編程對等寬字體的要求：
　　　　1. 所有字體等寬
　　　　2. 字體簡潔、清晰和規范
　　　　3. 支持ASCII碼為128以上的擴展字符集（如GBK,gb2312和unicode等）
　　　　4. 空白字符(ASCII:0x20)與其他字符等寬
　　　　5. 1,I和i能容易地區分
　　　　6. 0,o和O能容易地區分
　　　　7. 雙引號、單引號前后部分易於區分，最好是鏡像對稱
　　　　8. 標點符號外形清晰，尤其是大括號、圓括號和方括號
　　　　寬字體有Courier和Courier New等

  4. 手寫體/書法體（Calligraphy）

  5. 符號體（Symbol）

     Windows中最著名符號就是Webdings。

     

 

三、再識font-family　　　　　　　　　　　　　　　　　　　　　　

  通過CSS樣式屬性font-family我們可以按需設置網頁中文字采用的字體庫系列，如

font-family: "Microsoft YaHei", sans-serif;

  但在沒有深入理解字體庫的應用規則和設置方式之前，可能會遇到以下問題：

<!-- 在IE下瀏覽 -->
<p class="b1">微軟雅黑</p>
<p class="b2">Simsun</p>

<style type="text/css">
  .b1{
    font-family: "Microsoft YaHei", arial, sans-serif;
  }
  .b2{
    font-family: arial, sans-serif, "Microsoft YaHei";
  }
</style>

 類為b2的P元素雖然也設置了使用微軟雅黑，但渲染結果為宋體，這是為什么呢？下面我們一起探討一下！

  1. 認識font-family樣式屬性值

    屬性值通過逗號分隔 , 多個字體名稱，當瀏覽器在解析文字時會從左往右依次搜索字體庫，當搜索成功則采用該字體庫渲染該文字，否則繼續往右搜索。若均搜索失敗則使用瀏覽器默認的字體庫解析渲染文字。

      那就是說瀏覽器最終是以glyph的形式渲染文字。極端情況下“前端控”三個字可能由3種字體庫的glyph來渲染。

    字體名稱分為字體族名稱(family-name)和類族名稱(generic-family)

    字體族名稱(family-name)：是具體的字體名稱, 如"times","courier","arial"

    類族名稱(generic-family)：是字體類型名稱而具體的字體則由瀏覽器決定, 如"serif","sans-serif","cursive","fantasy","monospace"

    注意：

       1. font-family中設置的字體不會被瀏覽器自動下載, 字體是否可用則完全依靠客戶端是否已安裝該字體庫而已.

       2. 屬性值必須以類族名稱(generic-family)結尾確保字體會以正確的形式解析渲染.

  2. 瀏覽器的默認字體

       類族名稱(generic-family)的具體字體庫是由瀏覽器決定的，眾所周知Windows下的中文版IE、Chrome、FireFox的默認簡體中文字體均是中易宋體。

       IE:

      

      Chrome:

      

      因此類族名稱為serif,sans-serif,monospace均使用中易宋體字體庫（當然用戶可以自定義其他字體），也就是說若網頁中沒有設置font-family樣式屬性或沒有適合的中文字體庫時則使用宋體字體庫來解析渲染所有英文、中文和標點。

     但英文和半角標點使用宋體顯示確實難看，因此建議至少設置一下英文字體： 

html{
  font-family: Arial, Tahoma, Sans-serif;
}

    Mac OS X下瀏覽器的默認字體是文華黑體。（西文和數字的顯示效果 與中易宋體不相伯仲）

    Android下瀏覽器的默認字體是Droid Sans Fallback（效果和微軟雅黑類似）。

    GNU/Linux則由於發行版眾多，瀏覽器的默認字體不盡相同，一般為以下三種：文泉驛點陣宋體、文泉驛正黑和文泉驛微米黑（Droid Sans Fallback衍生而來）。

  3. 為何要以類族名稱結尾？

    類族名稱(generic-family)后的字體族名稱(family-name)不會生效,如:A是 font-family:arial,sans-serif,"宋體" ,B是 font-family:arial,"宋體",sans-serif 而瀏覽器默認字體為"微軟雅黑",那么將A通過微軟雅黑顯示中文,而B則用宋體顯示中文.這是因為搜索到sans-serif就已經在瀏覽器默認字體庫中找到字體了,因此不會搜索宋體字庫。

  4. 中文字體名稱的3種表示方式

    1). 中文表示方式

font-family: "微軟雅黑", "黑體", "宋體";

    2). 英文表示方式

font-family: "Microsoft YaHei", SimHei, SimSun;

    3). unicode碼表示方式

font-family:"\5FAE\8F6F\96C5\9ED1", "\9ED1\4F53", "\5B8B\4F53";

     或

font-family: "微软雅黑", "黑体", "宋体";

    

     注意：由於采用中文表示方式會導致IE9下通過行距實現垂直居中的失效(還有其他兼容性問題),因此建議使用英文或unicode表示方式。

  5. 到底如何設置font-family才能實現恰當地兼容呢？

     在處理兼容性問題之前我們先要了解各平台應該以哪個字體為最佳設置，並了解回退方案（就是所謂的fallback）

     Windows

     Windows XP SP2 開始引入新字體——微軟雅黑（由正常的微軟雅黑和加粗的微軟雅黑組成，字體庫文件分別為msyh.ttf和msyhbd.ttf）。

       微軟雅黑屬於無襯線字體，具有以下優點：

         1. 作為矢量字體庫，而不像中易宋體那樣是非黑即白的點陣字體庫。矢量字體可以無限地平滑縮放，因此大字號的效果比中易宋體好很多；

         2. 數字、西文的顯示效果比中易宋體好很多；

         3. 支持Windows XP SP2引入的ClearType技術，當開啟ClearType技術后應用微軟雅黑的字體會變得更清晰、犀利；

         4. 由於微軟雅黑包含粗體版本，因此字重為bold時效果比中易宋體的偽粗效果要好。

        缺點：

         1. 由於是矢量字體庫，在顯示小字號（小於12px）的中文時無法通過字體引擎自動完美地處理，設計師要通過Hinting（字形微調）為每個字號的字體嵌入提示信息，這些提示信息包括不影響字體識別的前提下去掉部分筆畫，而字體引擎會根據提示信息解析渲染字體。但最終效果也是不理想；

         2. 在ClearType關閉的情況下，應用微軟雅黑的字體會發虛。

         下圖為IE11下的測試結果：

         

     Mac OS X

       Mac OS X 10.6引入冬青黑體簡體中文（Hiragino Sans GB），效果要比原來的華文黑體（重組后稱為“黑體-簡”。由正常版的華文細黑STXihei和加粗版的華文黑體STHeiti組成）要好。

     GNU/Linux

       Linux下目前較好的中文字體為文泉驛微米黑。

    現在我們已經了解各平台目前較理想的字體，那么下面介紹3種font-family的思路吧！

  6. 3種設置font-family的思路！

      a). 無為而治

           就是設置好西文字體后，讓瀏覽器/用戶自行決定中文字體。

font-family: ..., "Hiragino Sans GB", sans-serif;

           注意：

              1. 建議盡量讓Mac OS X使用冬青黑體；

              2. 正文使用中易宋體或微軟黑體實際效果則是見仁見智，但大字號的文字（如標題）則建議固定為微軟雅黑。

      b). 嚴格管控

            盡量兼容各平台，並讓各平台使用最適合的字體。

font-family: ..., "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;

　　　　 注意：

　　　　　1. 微軟雅黑必須位於冬青黑體之前，這是因為冬青黑體在Windows下的效果很差，而微軟雅黑在Mac OS X下還可以接受。（Mac OS X下安裝了Office則會包含微軟雅黑字體的！）

      c). 因地制宜

            由於無法控制客戶端到底安裝了哪些字體，若想以最簡並最精准的方式設置font-family則需要結合UA來判斷當前的瀏覽器和OS平台，進而動態設置font-family屬性值。

            對於IOS、Android和WP的獨立設置如下：

IOS
  默認中文字體是 Heiti SC
  默認英文字體是 Helvetica
  默認數字字體是 HelveticaNeue
  無微軟雅黑字體
Android
  默認中文字體是 Droidsansfallback
  默認英文和數字字體是Droid Sans
  無微軟雅黑字體
WinPhone
  默認中文字體是 Dengxian(方正等線體)
  默認英文和數字字體是 Segoe
  無微軟雅黑字體

    三個手機操作系統英文和數字字體可使用Helvetica。而中文則采用系統默認就好了。

 

四、字體樣式　　　　　　　　　　　　　　　　　　　　　　　　　　

  常見的字體樣式分為

     正常（Normal）

     粗體（Bold）：會讓字體顏色更深、更粗。

     斜體（Italic）：用於在當前段落中強調某段文字。

  不同的字體樣式意味着不同版本的字體庫。如微軟雅黑包含正常和粗體兩個版本的字體庫，分別是msyh.ttf和msyhbd.ttf。而中易宋體則只有正常版本，因此就只有一個版本的字體庫了。

  雖然中易宋體僅含一個正常版本的字體庫，但毫不影響以粗體和斜體的樣式來顯示，這時則稱為偽粗和偽斜。

  偽粗（poor man's bold）：是通過對字體glyph路徑做一定的變換而成。

  偽斜（pool man's italic）：是通過對字體進行矩陣做一定的變還而成。

  CSS設置斜體

    CSS中通過font-style來設置斜體

font-style: normal; /* 默認樣式 */
font-style: italic; /* 斜體 */
font-style: oblique; /* 傾斜的字體 */

    對於沒有斜體版本的字體而言，屬性值為 italic 和 oblique 均為偽斜；對於存在斜體版本的字體而言， italic 則會使用斜體版本的字體，而 oblique 則為偽斜。

  CSS設置粗體

　  CSS中通過font-weight來設置粗體

font-weight: normal; /* 默認樣式 */
font-weight: bold; /* 粗體 */
font-weight: bolder; /* 粗體 */
font-weight: lighter; /* 細體 */
font-weight: 100; /* 字重代號 */
font-weight: 200; /* 字重代號 */
font-weight: 300; /* 字重代號 */
font-weight: 400; /* 字重代號，相當於normal */
font-weight: 500; /* 字重代號 */
font-weight: 600; /* 字重代號 */
font-weight: 700; /* 字重代號，相當於bold */
font-weight: 800; /* 字重代號 */
font-weight: 900; /* 字重代號 */

     100~900為字重代號，字體庫會針對不同的字重代號提供不同等級的粗細程度的設計。如Zurich字體所包含的Zurich Light對應100~300三個代號，Zurich Regular對應400，Zurich Medium對應500，Zurich Bold對應600~700，Zurich Black對應800，Zurich UltraBlack對應900。

     對於沒有粗體版本的字體而言，則采用偽粗；對於存在粗體版本的字體而言，則使用粗體版本的字體。

 

五、垂直排版的基礎——baseline　　　　　　　　　　　　　　　　　　　

  對於inline-level box元素的垂直方向排版、對齊等操作時，必定離不開baseline。那么到底什么是baseline呢？還記得小時候學習拼音或英語時的4線格嗎？

  ascent，上行線

  mean line，等分線（又稱為median中位線），注意mean line並不會位於inline-level box的正中間。

  baseline，基線

  descent，下行線

 

  ascender height，mean line至ascender間的高度

  cap height，大寫字母高度

  descender height，baseline至descender間的高度

  x-height，baseline至mean line間的高度

  注意ascent、mean line、baseline和descent四根線並不像我們用的4線格那樣一成不變，它們的位置是根據采用的字體類型和字體大小來決定的。可變性如此之大那我們到底應該如何掌握和利用它們呢？

  其實與我們密切相關的就兩條線baseline和mean line，而它們的位置則由當前字體的小寫字母x決定。x腳踩在baseline上，頭頂着mean line，因此baseline與mean line間的高度很語義化的稱為x-height。

  對上述內容有所了解后，我們就可以開始着手理解垂直排版的vertical-align屬性，但由於vertical-align涉及內容很多，日后另外一篇進行敘述。

 

六、字號單位　　　　　　　　　　　　　　　　　　　　　　　　　　 

  網頁中一般使用11pt/12px的字號，正文則采用11.5pt/14px的字號。

  

  1. 點（point/pt）

 72 pt = 1 inch // 1英寸是72個點
 1 pica = 12 pt // 1皮卡是12個點

  2. 像素（pixel/px）

      像素是屏幕上最小的圖像單元，通俗上說就是屏幕上的一個點。不會根據父元素的字號自動縮放。

  3. 相對於小寫字母x的高度（x-height/ex）

　　 1ex = 小寫字母x的高度。也是基線(baseline)與中位線(median)的垂直距離。

       這個單位是在很少用到，@張鑫旭在《字母’x’在CSS世界中的角色和故事》中提到用它實現圖標與文字垂直居中。

       限制條件：

　　　　1. 圖標內容高度小於等於1ex；

　　　　2. IE8+才適用。

       HTML Markup

<span class="ddl">垂直對齊by ex<i class="icon-arrow"></i></span>

       CSS

.ddl{font-size:30px;border:solid 2px #333;padding:5px;}
.icon-arrow{
      background: url(./arrow.png) no-repeat center; 
      display: inline-block;
      *display: inline;
      zoom: 1;
      width: 20px;
      height: 1ex;
　　   border: solid 1px red;} 

     HTML Markup

<span class="ddl">垂直對齊by <span style="border:solid 1px blue;">ex</span><i class="icon-arrow"></i></span>

可以看到文字ex的baseline和圖標的baseline對齊了（對於display:inline-block的inline-level box，並且內部沒有文字或空白字符時，則以margin-bottom作為baseline）

  4. 相對於父元素字體大小（em）

　　 1em = 字體的大小的100%。會根據父元素的字號自動縮放。

      瀏覽器默認的字號為16px，若沒有父元素沒有設置字號則使用瀏覽器默認字號，則1em = 16px, 0.75em = 12px, 0.625em = 10px。

      通過將body的字號這是為 font-size: 62.5% ，那么此時子元素1em = 10px, 1.2em = 12px了。

      注意：采用em作單位，要小心重復運算的陷阱！

p{
  font-size: 1.2em;
}
.test{
  font-size: 1.2em;
}
<p class="test">Test的字號為1.44em * 16px = 23px</p>

  5. 相對於根元素html的字體大小（rem）

　　CSS3新增的相對單位，IE9開始支持。設置rem的元素字號是相對於`<html>根元素`的字號而定，而不是父元素的字號而定。

p {
  font-size: 14px; /* 對於lteIE8則設置固定的字號 */
  font-size: .875rem; /* 對於lgeIE9則設置相對於html元素的字號 */
}

      單位轉換工具：http://pxtoem.com/

 

七、間距　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  1. 行（間）距（Leading/Line-height）

　　行距就是相鄰行之間基線的距離。一般以em作為單位，也就是根據字體大小來設置行距。W3C建議瀏覽器的默認行距為1.0em~1.2em。若行距過小則會造成閱讀時容易“串行”。經驗值行距為1.5em最為適合。

　　基線(baseline)是大部分字母所“坐”的，字體的下降部(descender)之上的直線。大部分字體（全部大寫字母和部分小寫字母）總是緊貼基線，並且位於基線之上。中文與英文的大寫字母情況一樣。

　　

     通過CSS的 line-height 樣式屬性設置。

  2. 字間距（Tracking/Letter-spacing）

　　字母之間的距離。通過CSS的 letter-spacing 樣式屬性來設置。

 

八、分辨率與解析度　　　　　　　　　　　　　　　　　　　　　　　

  我們常說的分辨率其實是分辨率的一種，全稱應該叫做顯示分辨率（或屏幕分辨率）。其實還有其他分辨率的分類，如圖像分辨率（就是解析度）、位分辨率（就是顏色位深）和設備分辨率（或輸出分辨率，就是DPI）等等。

  1. 顯示分辨率(屏幕分辨率)

　　表示屏幕圖像的精密度，可視區域尺寸相同的前提下，分辨率越高圖像越清晰。由於同一尺寸的液晶顯示器的點距固定，也就是說物理發光點數目固定，因此分辨率調整至於最佳屏幕分辨率（最大分辨率）相同時，顯示效果最佳。

     液晶顯示器的最大分辨率就是 水平發光點數目*垂直發光點數目。

  2. 圖像分辨率(解析度)

　　表示單位英寸中包含的像素點數量（Pixel Per Inch）。指圖像中存儲的信息量，除了PPI還有PPC(每厘米的像素數量)來衡量。圖像分辨率決定圖像輸出的質量，圖像分辨率、位分辨率和圖像尺寸一起決定文件大小。若位分辨率為32位，圖像尺寸不變，而圖像分辨率增加1倍，則文件大小將增加3倍。

　　數值越大表示顆粒越細，圖像越細膩、清晰。不同的介質解析度不盡相同。

介質           解析度    
照片           240dpi~300dpi
雜志           133dpi~150dpi
精美的書    　　175dpi~200dpi
高質量的書      350dpi~400dpi
屏幕        　 72pp

     由於屏幕的解析度比書籍、圖片的低，因此物理大小相同的字體書上的會比屏幕上的清晰很多，也是因為這樣物理大小相同的字體，書籍上可以使用襯底字體，而屏幕上則需要無襯底字代替。

  3. 設備分辨率/輸出分辨率

     表示單位英寸中包含的點數量（Dots Per Inch）。作用與圖像分辨率是一樣的。只不過是屏幕使用PPI作單位，而打印機、掃描儀等則采用DPI作單位而已。

  4. 位分辨率

　　又稱為位深，用於衡量每個像素存儲信息的位數，決定像素可標記的色彩等級上限。常見的有8、16、24和32位。若一幅8bit位深的圖像，那么每個像素能夠表現的色彩等級是256級。

 

九、重溫font-variant、text-transform和font　　　　　　　　　

   font-variant

font-variant: normal; /* 正常字體 */
font-variant: small-caps; /* 小型的大寫字母字體 */

  text-transform

text-transform: none; /* 無轉換發生 */
text-transform: capitalize; /* 將每個單詞的首字母換成大寫 */
text-transform: uppercase; /* 換成大寫 */
text-transform: lowercase; /* 換成小 */

  font

// 格式
font: font-style font-variant font-weight font-size/line-height font-family;

// 示例
font: italic small-caps bold 12px/1.5em Arial,"Microsoft YaHei",sans-serif;

 

十、了解ClearType　　　　　　　　　　　　　　　　　　　　　　  

  Windows/Mac OS提供的針對LCD液晶熒幕的字體平滑工具。利用LCD色條排列的特性。
  WindowsXP開始引入ClearType，但默認是關閉的。Windows Vista則默認開啟。

  原理

　　將R、G、B各個次像素發光並進行色調微調，從而達到實際分辨率以上(水平方向分辨率的3倍)的纖細文字的顯示效果。
　　LCD規定屏幕分辨率與物理發光點(最大分辨率)相同時，顯示效果最佳。
　　而LCD的每個物理發光點實際上是由RGB三個柵條水平排列而成。在ClearType前，發光點與RGB柵條的關系是固定的，也就是發光點是獨立的；是ClearType則是任意連續的RGB柵條則可組成一個發光點，也就是發光點是相交的並且是動態的。

 

十一、總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　  

  若有紕漏請大家指正，謝謝！

  尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/4310533.html  ^_^肥仔John

 

十二、參考　　　　　　　　　　　　　　　　　　　　　　　　　　　　

http://design.yesky.com/273/8841773.shtml
http://baike.baidu.com/link?url=OcfVwoAY66-PChDZmbBqEsUuC-h3lEa817IaSOPaVrOEB5c0e5uZlTKizdY8PrbP-JGQbKbwA-mYHj4cf4qHyq
http://www.cnblogs.com/leejersey/p/3662612.html
http://www.divcss5.com/rumen/r295.shtml
http://www.divcss5.com/css-hack/c344.shtml
http://www.zhangxinxu.com/wordpress/2010/06/%E5%8F%AF%E7%94%A8%E6%80%A7%E4%B9%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E9%BB%98%E8%AE%A4%E5%AD%97%E4%BD%93%E4%B8%8Ecss%E5%AD%97%E4%BD%93/
http://www.divcss5.com/rumen/r75.shtml
http://www.zhihu.com/question/19911793

http://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css/