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

一、字距調(diào)整屬性font-kerning

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

語法如下：

font-kerning: auto | normal | none

其中：

auto

默認(rèn)值。瀏覽器自己決定是否要字距調(diào)整。例如字號，也就是font-size屬性值比較小的時候，如果進行字距調(diào)整就會顯得很奇怪，因此，瀏覽器會禁止。

normal

應(yīng)用字距調(diào)整。

none

不根據(jù)字體文件中的字距信息進行字距調(diào)整。

但是，font-kerning并不是什么時候都有作用的。

1. 一般中文是無效的，中文漢字本身就是方方正正，一般沒有必要用到字距調(diào)整，除非是行書或者草書或者一些手寫體字體。
2. 必須是具有字距調(diào)整信息的OpenType字體^①才有用，如果字體文件沒有字距調(diào)整信息或者不是OpenType字體，都是沒效果的。
3. IE瀏覽器，包括edge版本都是沒效果的，iOS目前需要私有前綴。

   

① OpenType也叫Type 2字體，是由Microsoft和Adobe公司開發(fā)的另外一種字體格式。它也是一種輪廓字體，比TrueType更為強大，最明顯的一個好處就是可以在把PostScript字體嵌入到TrueType的軟件中。并且還支持多個平臺，支持很大的字符集，還有版權(quán)保護。可以說它是Type 1和TrueType的超集。OpenType標(biāo)準(zhǔn)還定義了OpenType文件名稱的后綴名。包含TureType字體的OpenType文件后綴名為.ttf，包含PostScript字體的文件后綴名為.OTF。如果是包含一系列TrueType字體的字體包文件，那么后綴名為.TTC。

另外，font-kerning的字距調(diào)整并不是所有字符都有效的，如果希望所有字符間距都有調(diào)整，應(yīng)該使用CSS屬性letter-spacing，這個大家應(yīng)該比較熟。

更多關(guān)于字距調(diào)整調(diào)整的信息，可以參考下面幾篇文章：

• Advanced web typography: Kerning by Elliot Jay Stocks
• Kerning on the Web by Bram Stein
• A Manual Kerning Method for the Web by Nathan Ford

二、文字平滑屬性font-smoothing

font-smoothing決定了瀏覽器如何控制字體不要出現(xiàn)鋸齒，因為瀏覽器中字體呈現(xiàn)的效果可能和設(shè)計軟件中的有出入，MDN文檔上顯示這個屬性應(yīng)該名叫font-smooth，什么鬼？結(jié)果是非標(biāo)準(zhǔn)的，結(jié)果沒有一個瀏覽器用這個名字，給人感覺font-smooth這個屬性名應(yīng)該是YY出來的吧，實際是，是老的W3C的提案曾有關(guān)于font-smooth的內(nèi)容！

實際上，Chrome等webkit瀏覽器使用的是-webkit-font-smoothing，F(xiàn)irefox瀏覽器下是-moz-osx-font-smoothing，

相關(guān)語法和含義如下：
-webkit-font-smoothing

none

關(guān)閉抗鋸齒，字體邊緣犀利。

antialiased

字體像素級平滑，在深色背景上會讓文字看起來更細(xì)了。

subpixel-antialiased

字體亞像素級平滑，主要為了在非視網(wǎng)膜設(shè)備下更好的顯示。

-moz-osx-font-smoothing

auto

覽器只能選擇字體渲染表現(xiàn)。

grayscale

webkit下的"antialiased"，可以讓深色背景下的文字看起來更細(xì)。

按照我個人的使用經(jīng)驗來看，文字平滑屬性font-smoothing在windows設(shè)備下好像都是打醬油的，各個屬性值看不出差別，或許與顯示器的設(shè)備像素比有關(guān)，在OS X設(shè)備下渲染有著明顯的效果。

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

于是，就有了如下的實踐代碼：

body { -webkit-font-smoothing: antialiased; }
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 2dppx){ 
    /* Retina下仍使用默認(rèn)字體渲染 */
    body { -webkit-font-smoothing: subpixel-antialiased; }
}

當(dāng)然，OS X下推薦蘋方或者默認(rèn)系統(tǒng)字體都是可以的，“微軟雅黑”不是好選擇。

三、小體型大寫字母font-variant

font-variant是個IE6時代就過來的CSS屬性，對于我們大中華用戶，其支持的屬性和作用讓我們這些外來人覺得有些蛋疼，實現(xiàn)小體型大寫字母，兩個屬性值，要么normal要么small-caps，font-variant:small-caps就是可以讓英文字符表現(xiàn)為小體型大寫字母。

如下代碼示意：

http://www.zhangxinxu.com/wordpress/?p=5974

結(jié)果下面這樣：

http://www.zhangxinxu.com/wordpress/?p=5974

也就是大小跟小寫字母一樣，但樣式是大寫。但我實在搞不懂這種字符設(shè)置在什么場景下會使用呢？

然后，進入了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);

嚇得我喝水都嗆到了，支持的屬性值多到?jīng)]什么，但是搞這么多不認(rèn)識的單詞是鬧那樣，而且還是函數(shù)體。好在目前就Firefox瀏覽器支持比較high，咱學(xué)習(xí)可以緩一緩。

但是，貌似和font-variant有密切關(guān)系的font-feature-settings屬性的瀏覽器兼容性就完全不一樣了，已經(jīng)綠油油到家門口啦！

我簡單了解了下，發(fā)現(xiàn)這里面的水好深好深，涉及到字體字形設(shè)計和各種字符表現(xiàn)等等，比方說下面這段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已經(jīng)不是當(dāng)年的小白菜就可以了。

四、結(jié)束語

從我整理本文相關(guān)知識的過程中，發(fā)現(xiàn)有個東西出現(xiàn)的頻率很高（雖然文中提及頻率并不高），那就是OpenType fonts，貌似很多新的font相關(guān)的CSS屬性的表現(xiàn)和渲染都和OpenType fonts有密切關(guān)系，之前看相關(guān)文檔草案的時候，也有相當(dāng)相當(dāng)大的篇幅將字體相關(guān)很多深入的細(xì)節(jié)。

讓我覺得在文本字體渲染和呈現(xiàn)這一塊，水非常深，目前所出來的這些東西應(yīng)該才剛剛開始個頭，以后要學(xué)習(xí)和要深入的東西就多了。

但是，也不一定，為什么這么說呢？指定規(guī)范的都是老外，使用的使用英文，很多規(guī)則說不定對于漢字并不適用，就好比font-variant:small-caps，我們也就看看兩眼，實際項目使用的概率跟年會中獎概率是一樣低的。

要不，就說這么多，日后等知識積累足夠，再深入這些或其他font相關(guān)CSS屬性值。

本文地址： http://www.zhangxinxu.com/wordpress/?p=5974