CSS屬性font-kerning怎么用

這篇文章主要為大家展示了“CSS屬性font-kerning怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS屬性font-kerning怎么用”這篇文章吧。

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

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

語法如下：

font-kerning: auto | normal | none

其中：

• auto

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

• normal

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

• none

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

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

1. 一般中文是無效的，中文漢字本身就是方方正正，一般沒有必要用到字距調(diào)整，除非是行書或者草書或者一些手寫體字體。

2. 必須是具有字距調(diào)整信息的OpenType字體^①才有用，如果字體文件沒有字距調(diào)整信息或者不是OpenType字體，都是沒效果的。

3. IE瀏覽器，包括edge版本都是沒效果的，iOS目前需要私有前綴。

   

① OpenType也叫Type 2字體，是由Microsoft和Adobe公司開發(fā)的另外一種字體格式。它也是一種輪廓字體，比TrueType更為強(qiáng)大，最明顯的一個(gè)好處就是可以在把PostScript字體嵌入到TrueType的軟件中。并且還支持多個(gè)平臺(tái)，支持很大的字符集，還有版權(quán)保護(hù)。可以說它是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，這個(gè)大家應(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)鋸齒，因?yàn)闉g覽器中字體呈現(xiàn)的效果可能和設(shè)計(jì)軟件中的有出入，MDN文檔上顯示這個(gè)屬性應(yīng)該名叫font-smooth，什么鬼？結(jié)果是非標(biāo)準(zhǔn)的，結(jié)果沒有一個(gè)瀏覽器用這個(gè)名字，給人感覺font-smooth這個(gè)屬性名應(yīng)該是YY出來的吧，實(shí)際是，是老的W3C的提案曾有關(guān)于font-smooth的內(nèi)容！

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

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

• none

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

• antialiased

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

• subpixel-antialiased

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

-moz-osx-font-smoothing

• auto

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

• grayscale

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

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

于是，就有了如下的實(shí)踐代碼：

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

如下代碼示意：

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

結(jié)果下面這樣：

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

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

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

立馬變得很厲害的樣子。

比方說隨便拎一個(gè)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í)的單詞是鬧那樣，而且還是函數(shù)體。好在目前就Firefox瀏覽器支持比較high，咱學(xué)習(xí)可以緩一緩。

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

我簡(jiǎn)單了解了下，發(fā)現(xiàn)這里面的水好深好深，涉及到字體字形設(shè)計(jì)和各種字符表現(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";

多半大眼瞪小眼，所以，本文就不囫圇介紹了，以后時(shí)機(jī)成熟再專門深入介紹。

總之，大家知道如今的font-variant已經(jīng)不是當(dāng)年的小白菜就可以了。

四、結(jié)束語

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

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

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

以上是“CSS屬性font-kerning怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！