很多人只要一提到 @font face 規(guī)則,心中就會(huì)不由自主“哦~~”的一聲:“這個(gè)我知道,可以用來生成自定義字符小圖標(biāo)!”話是沒錯(cuò),問題在于很多人就以為生成字符小圖標(biāo)就是 @font face 規(guī)則的全部,實(shí)際上只是功能之一,如果真正了解 @font face 規(guī)則,你會(huì)發(fā)現(xiàn), @font face 規(guī)則可以做的事情其實(shí)非常多,尤其我們不考慮IE7,IE8瀏覽器的情況下。
一、 @font face的本質(zhì)是變量
雖然說CSS3新世界才出現(xiàn)真正意義上的變量 var (參見此文:“ 了解CSS/CSS3原生變量var ”),但實(shí)際上,CSS世界中,就已經(jīng)出現(xiàn)了本質(zhì)上就是變量的東西, @font face 規(guī)則就是其中之一,@font face的本質(zhì)上就是一個(gè)定義字體或字體集的變量,這個(gè)變量不僅僅是簡單的自定義字體,還包括字體重命名,默認(rèn)字體樣式設(shè)置等等。
這個(gè)“變量”的意識很重要,有助于我們發(fā)揮 @font face 的潛力,可以讓我們的CSS代碼更加的精簡,更方便的維護(hù)等。
在進(jìn)入正題之前,我們先要對 @font face 規(guī)則有個(gè)大致的面面觀。
@font face 規(guī)則支持的CSS屬性有: font-family , src , font-weight , font-style , unicode-range , font-variant , font-stretch , font-feature-settings 。例如:
| @font-face { font-family: 'example'; src: url(example.ttf); font-style: normal; font-weight: normal; unicode-range: U+0025-00FF; font-variant: small-caps; font-stretch: expanded; font-feature-settings:"liga1" on;} | 
屬性還是挺多的,而且有些屬性,估計(jì)是他認(rèn)識你,你不認(rèn)識他。但是從實(shí)用角度來講,有些屬性其實(shí)可以不用去深究,例如 font-variant , font-stretch , font-feature-settings 這 3 個(gè)屬性。為什么呢?因?yàn)榘凑瘴业慕?jīng)驗(yàn)理解,這 3 個(gè)屬性給我感覺更像是專為英文設(shè)計(jì)的,所以如果不是有業(yè)務(wù)需要,可以先放一放。
好,現(xiàn)在,是不是感覺壓力一下子小了很多,我們需要在意的可以自定義的屬性就只剩下下面這些:
| @font-face { font-family: 'example'; src: url(example.ttf); font-style: normal; font-weight: normal; unicode-range: U+0025-00FF;} | 
估計(jì)會(huì)有小伙伴疑惑 @font-face 規(guī)則中的 font-style , font-weight 以及 unicode-range 這些屬性有什么用,尤其 font-style , font-weight ,好像就是專門過來打醬油的。實(shí)際上,這里的每個(gè)屬性都不是泛泛之輩,都是有故事的人。
在介紹每個(gè)屬性之前,有必要鄭重聲明一下,接下來有大量的案例,全是基于 local 本地字體做示意的,而IE7,IE8瀏覽器是不支持 local 本地字體的,所以,本文的標(biāo)題是“CSS3背景下的……”,就是這么個(gè)原因,大家注意明辨,如果你的項(xiàng)目還需要兼容IE8,本文介紹,這些好東西可能就需要斟酌斟酌了。
新聞熱點(diǎn)
疑難解答
圖片精選