對于企業(yè)網(wǎng)站內(nèi)容展示型的網(wǎng)頁,要讓用戶瀏覽時(shí)體驗(yàn)效果好、印象深刻,除了設(shè)計(jì)師發(fā)揮創(chuàng)造力之外,也需要程序員高效率的代碼支持。在大多數(shù)情況我們看到網(wǎng)站中字體都是是宋體、微軟雅黑、蘋方字體等,只要操作系統(tǒng)里有的字體,網(wǎng)頁上都可以呈現(xiàn)其效果。但總有些標(biāo)新立異的設(shè)計(jì),字體風(fēng)格異類,需全網(wǎng)站自定義字體。在操作系統(tǒng)還不存在該字體的情況,其實(shí)也有辦法實(shí)現(xiàn)。

首先我們網(wǎng)頁中字體的格式一般為:TTF、OTF、WOFF、EOT、SVG。
TTF
TrueType的主要強(qiáng)項(xiàng)在于它能給開發(fā)者提供關(guān)于字體顯示、不同字體大小的像素級顯示等的高級控制。TrueType是由美國蘋果公司和微軟公司共同開發(fā)的一種電腦輪廓字體(曲線描邊字)類型標(biāo)準(zhǔn)。這種類型字體文件的擴(kuò)展名是.ttf,類型代碼是tfil。
OTF
OpenType,是一種可縮放字體(scalable font)電腦字體類型,采用PostScript格式,是美國微軟公司與Adobe公司聯(lián)合開發(fā),用來替代TrueType字體的新字體。這類字體的文件擴(kuò)展名有.otf、.ttf、.ttc,類型代碼是OTTO,現(xiàn)行標(biāo)準(zhǔn)為OpenType 1.8.2。
WOFF
WOFF (網(wǎng)頁開放字體格式) 是由 Mozilla 與 Type Supply, LettError 及其他組織協(xié)同開發(fā)的一種新的網(wǎng)頁字體格式。它使用了一種壓縮版本,類似于 TrueType, OpenType, Open Font 所采用的 SFNT 結(jié)構(gòu),不過還添加了共用數(shù)據(jù)及用戶私有數(shù)據(jù)結(jié)構(gòu),其中包括了自定義空間,其允許廠家和經(jīng)銷商提供許可證。
EOT
嵌入式OpenType字體(英語:Embedded OpenType,簡稱EOT)是被微軟設(shè)計(jì)用來在網(wǎng)頁使用的字體格式。該字體格式是OpenType字體的壓縮格式。文件的擴(kuò)展名通常是".eot"。
通過使用微軟的網(wǎng)頁字體工具(WETF)、其他版權(quán)軟件或者開源軟件,并且基于的存在的TrueType字體文件,這種字體文件也能夠被制作。
SVG
SVG (Scalable Vector Graphics font) 字體格式使用 SVG 的字體元素定義。這些字體包含作為標(biāo)準(zhǔn) SVG 元素和屬性的字形輪廓,就像它們是 SVG 映像中的單個(gè)矢量對象一樣。SVG 字體最大的缺點(diǎn)是缺少字體提示(font-hinting)。字體提示是渲染小字體時(shí)為了質(zhì)量和清晰度額外嵌入的信息。同時(shí),SVG 對文本(body text)支持并不是特別好。因?yàn)?SVG 的文本選擇(text selection)目前在 Safari、Safari Mobile 和 Chrome 的一些版本上完全崩壞,所以你不能選擇單個(gè)字符、單詞或任何自定義選項(xiàng),你只能選擇整行或段落文本。
目前主流的瀏覽器幾乎都支持 WOFF。我們可以通過以下三步,輕松實(shí)現(xiàn)
網(wǎng)站建設(shè)中網(wǎng)頁字體的自定義。
1.創(chuàng)建項(xiàng)目自定義字體目錄,導(dǎo)入字體。
2.CSS中定義字體。采用一個(gè)叫做@font-face 的CSS @規(guī)則 ,它允許網(wǎng)頁開發(fā)者為其網(wǎng)頁指定在線字體。 通過這種@font-face自定義字體的方式, 可以消除網(wǎng)頁對用戶電腦本地字體的依賴。
3.CSS引用自定義字體。根據(jù)開發(fā)者自身場景需求,可以全局引用,也可以局部標(biāo)簽樣式引用。
最后,如果對于一些字體沒有WOFF格式,我們可以采用字體轉(zhuǎn)換的辦法,有很多開放的在線轉(zhuǎn)換工具供選擇,這個(gè)自己搜索一下 OTF到WOFF轉(zhuǎn)換器 或 在線字體轉(zhuǎn)換工具 即可。