本文很簡單，瞭解幾個可能平時用得不太多，長得不太熟的font相關的幾個CSS屬性，分別是：font-kerning, font-smoothing和font-variant。

字距調整屬性font-kerning

font-kerning應該算是一個CSS3屬性，主要作用是調整字形間距，且基本上是英文字元形狀的間距，因為英文字元形狀都是不規則的，有寬有窄，有的圓乎乎，有的稜角分明，就會導致排列在一起的時候疏密不一致，而font-kerning可以有效利用字元形狀間的間隙，使字形之間的空間更加相似，如下圖所示（圖來自MDN文件）：

語法如下：

font-kerning: auto | normal | none
 

其中：

auto
預設值。瀏覽器自己決定是否要字距調整。例如字號，也就是font-size屬性值比較小的時候，如果進行字距調整就會顯得很奇怪，因此，瀏覽器會禁止。
normal
應用字距調整。
none
不根據字型檔案中的字距資訊進行字距調整。
但是，font-kerning並不是什麼時候都有作用的。

1. 一般中文是無效的，中文漢字本身就是方方正正，一般沒有必要用到字距調整，除非是行書或者草書或者一些手寫體字型。
2. 必須是具有字距調整資訊的OpenType字型才有用，如果字型檔案沒有字距調整資訊或者不是OpenType字型，都是沒效果的。
3. IE瀏覽器，包括edge版本都是沒效果的，iOS目前需要私有字首。

另外，font-kerning的字距調整並不是所有字元都有效的，如果希望所有字元間距都有調整，應該使用CSS屬性letter-spacing，這個大家應該比較熟。

文字平滑屬性font-smoothing

font-smoothing決定了瀏覽器如何控制字型不要出現鋸齒，因為瀏覽器中字型呈現的效果可能和設計軟體中的有出入，MDN文件上顯示這個屬性應該名叫font-smooth，什麼鬼？結果是非標準的，結果沒有一個瀏覽器用這個名字，給人感覺font-smooth這個屬性名應該是YY出來的吧，實際是，是老的W3C的提案曾有關於font-smooth的內容！

實際上，Chrome等webkit瀏覽器使用的是-webkit-font-smoothing，Firefox瀏覽器下是-moz-osx-font-smoothing，

相關語法和含義如下：

-webkit-font-smoothing：none|antialiased|subpixel-antialiased

none
關閉抗鋸齒，字型邊緣犀利。
antialiased
字型畫素級平滑，在深色背景上會讓文字看起來更細了。
subpixel-antialiased
字型亞畫素級平滑，主要為了在非視網膜裝置下更好的顯示。

-moz-osx-font-smoothing：auto|grayscale

auto
覽器只能選擇字型渲染表現。
grayscale
webkit下的”antialiased”，可以讓深色背景下的文字看起來更細。
按照我個人的使用經驗來看，文字平滑屬性font-smoothing在windows裝置下好像都是打醬油的，各個屬性值看不出差別，或許與顯示器的裝置畫素比有關，在OS X裝置下渲染有著明顯的效果。

例如，在非retina螢幕下的iMac顯示器的微軟雅黑字型，粗得像傾國傾城中的“傾國”（下圖左），使用-webkit-font-smoothing:antialiased，立馬變成了“傾城”（下圖右）。

於是，就有了如下的實踐程式碼：

body { -webkit-font-smoothing: antialiased; }
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 2dppx){ 
    /* Retina下仍使用預設字型渲染 */
    body { -webkit-font-smoothing: subpixel-antialiased; }
}

當然，OS X下推薦蘋方或者預設系統字型都是可以的，“微軟雅黑”不是好選擇。

小體型大寫字母font-variant

font-variant是個IE6時代就過來的CSS屬性，對於我們大中華使用者，其支援的屬性和作用讓我們這些外來人覺得有些蛋疼，實現小體型大寫字母，兩個屬性值，要麼normal要麼small-caps，font-variant:small-caps就是可以讓英文字元表現為小體型大寫字母。

如下程式碼示意：

http://www.<span style="font-variant:small-caps">zhangxinxu.com<span>/wordpress/?p=5974

結果下面這樣：

也就是大小跟小寫字母一樣，但樣式是大寫。但我實在搞不懂這種字元設定在什麼場景下會使用呢？

然後，進入了CSS3的時代後，原本單一的font-variant屬性迎來了全面升級，變成了一種縮寫格式，並且是下面這些屬性的縮寫： font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, 以及font-variant-east-asian。

立馬變得很厲害的樣子。

比方說隨便拎一個font-variant-alternates屬性，其語法是這樣的：

font-variant-alternates: normal;
font-variant-alternates: historical-forms;
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

嚇得我喝水都嗆到了，支援的屬性值多到沒什麼，但是搞這麼多不認識的單詞是鬧那樣，而且還是函式體。好在目前就Firefox瀏覽器支援比較high，咱學習可以緩一緩。

但是，貌似和font-variant有密切關係的font-feature-settings屬性的瀏覽器相容性就完全不一樣了，已經綠油油到家門口啦！

我簡單瞭解了下，發現這裡面的水好深好深，涉及到字型字形設計和各種字元表現等等，比方說下面這段CSS語句你知道什麼意思嗎？

/* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
  /* dlig = discretionary ligatures, ss01 = stylistic set 1 */
font-feature-settings: "dlig=1,ss01=1";

多半大眼瞪小眼。

總之，大家知道如今的font-variant已經不是當年的小白菜就可以了。