一路走來的「字體」

在產品的設計過程當中，設計師老是指望最後產品展現的效果能與本身設計稿如出一轍，但最後屏幕呈現出的效果多少會與設計稿有所出入。css

這時設計會向前端抱怨屏幕顯示的效果與本身的設計不符，前端也表示很無辜，這是按照設計要求實現的，怎麼能怪我？前端

可能對大多數用戶來講，無法一眼識別哪裏存在差距，但細微差距的集合，對用戶的總體感官差距徹底是不一樣的。這些細微差距體如今不少方面，其中，字體就是一個糾結的地方，很難說清，但影響又無處不在。算法

字體的分類、歷史

首先，先來介紹一下字體的分類和歷史，在西方國家的字母體系，分紅兩大字族：瀏覽器

serif（襯線字體）
sans serif（無襯線字體）

英文字體

襯線字（如圖中的 Times New Roman）是指在字的筆畫開始及結束的地方有額外的裝飾，並且筆畫的粗細會因直橫的不一樣而有所不一樣。起始和結束裝飾的不一樣，能設計出不一樣風格的字體。bash

無襯線體（如圖中的 Helvetica），沒有這些額外的裝飾，並且筆畫粗細差很少。字形更加趨於理性，用戶很難從字體的外形看出字體要表達的性格，感情。markdown

中文字體

在中文字體中，宋體是比較標準的 serif 字體，襯線的特徵比較明顯。oop

無襯線字（如圖中的思源黑體）就沒有這些額外裝飾，並且筆畫粗細大體上是差很少。字體

字體的特色、如何選擇

介紹了字體的分類和歷史，接下來就是考慮具體使用的場景，如何選擇合適的字體呢？優化

在平面印刷，雜誌，企業 Logo 中，須要考慮：網站

表達的性格和感情
引發他人的關注，吸引眼球

所以，每每會使用 特殊的襯線體或者特殊設計字體。

在電子屏幕的場景下，更多的考慮：

清晰度
長時間下，是否容易視覺疲勞
不一樣字體大小是否會影響字體清晰度

在這些因素的考慮下，無襯線體沒有邊角的修飾，結構簡單清晰，在同等字號下，無襯線的字體看上去比有襯線更大，結構更清晰的特性，更加適合屏幕。也不會由於字體自己結構筆劃，影響文字內容的情感態度表達。無襯線體帶來的性格，立場就是中性的，在須要大量排版閱讀的文字網站中，就像空氣同樣，咱們不會在乎文字自己設計的影響。所以，更應該使用 無襯線體。

不一樣瀏覽器如何實現字體的技術

字體的選擇，這是設計階段須要考慮的事情，但如何作到屏幕顯示和設計同樣呢？咱們須要瞭解不一樣瀏覽器實現顯示的一些原理技術。

先介紹一下點陣字體與矢量字體：

點陣字體

點陣字體也叫位圖字體，其中每一個字形都以一組二維像素信息表示。

因爲位圖的原故，點陣字體很難進行縮放，特定的點陣字體只能清晰地顯示在相應的字號下。但對於 12-16px 這樣小的漢字，點陣字體經常比其它類型的字體在屏幕上更好的顯示效果。

常見的點陣字體有 bdf，pcf，fnt，hbf 等格式。

對於常見的計算機操做系統，字體的顯示算法須要一些字體的信息來優化屏幕顯示效果，英文稱爲 hinting。漢字因爲筆畫複雜，因此 hinting 的方式與西文大相徑庭。使用在漢字字體中嵌入預先製做的點陣位圖既能夠有效地避免 hinting 算法帶來的計算開銷，同時屏幕上顯示的漢字邊緣清晰，易於閱讀。

矢量字體

矢量字體中每個字形是經過數學曲線來描述的，它包含了字形邊界上的關鍵點，連線的導數信息等，字體的渲染引擎經過讀取這些數學矢量，而後進行必定的數學運算來進行渲染。

這類字體的好處是字體能夠無限放大而不產生變形。

矢量字體主要包括 Type1 和 TrueType 等幾類。

系統的偏好

Windows
- 默認是使用很重的 hinting，直到 DirectWrite 開始才禁用 horizontal hinting
- 字體渲染強調文字的銳利和清晰
- 在操做系統介面和網頁正文等小字號的地方比較清晰，但大幅犧牲字體的原貌
Mac OS X
- 徹底不用 hinting 信息，只在 vertical 方向作一些 autohint
- 字體渲染強調忠實字體設計，最大化保留字體的外形
- 邊緣平滑是爲了更好地傳遞字體設計中的曲線等細節，而小字號時顯得模糊也是在此方針下的妥協

最佳實現

考慮到 css 的「優雅降級」原則，默認咱們先把 Mac OS 的字體放在最前面，中文 "PingFang SC-light"，英文 "Helvetica Neue"，降級備用字體 "Hiragino Sans GB" 和 "Helvetica"，最後考慮基礎 Windows 系統自帶的字體 "Microsoft YaHei" 和 "Arial"。

font-family:"PingFangSC-light","Helvetica Neue",「Hiragino Sans GB」,「Helvetica」,「Microsoft YaHei」,「Arial」
複製代碼

字體設計是整個界面設計的一部分，咱們很難意識到它的重要性，就像咱們不會在乎空氣和水，但它的做用不容忽視。

參考連接

hunting引用