對(duì)于企業網站内容展示型的(de)網頁，要讓用(yòng)戶浏覽時(shí)體驗效果好、印象深刻，除了(le)設計師發揮創造力之外，也(yě)需要程序員(yuán)高(gāo)效率的(de)代碼支持。在大(dà)多(duō)數情況我們看到網站中字體都是是宋體、微軟雅黑(hēi)、蘋方字體等，隻要操作系統裏有的(de)字體，網頁上都可(kě)以呈現其效果。但總有些标新立異的(de)設計，字體風格異類，需全網站自定義字體。在操作系統還(hái)不存在該字體的(de)情況，其實也(yě)有辦法實現。
首先我們網頁中字體的(de)格式一般爲：TTF、OTF、WOFF、EOT、SVG。
TTF
TrueType的(de)主要強項在于它能給開發者提供關于字體顯示、不同字體大(dà)小的(de)像素級顯示等的(de)高(gāo)級控制。TrueType是由美(měi)國蘋果公司和(hé)微軟公司共同開發的(de)一種電腦(nǎo)輪廓字體（曲線描邊字）類型标準。這(zhè)種類型字體文件的(de)擴展名是.ttf，類型代碼是tfil。
OTF
OpenType，是一種可(kě)縮放字體（scalable font）電腦(nǎo)字體類型，采用(yòng)PostScript格式，是美(měi)國微軟公司與Adobe公司聯合開發，用(yòng)來(lái)替代TrueType字體的(de)新字體。這(zhè)類字體的(de)文件擴展名有.otf、.ttf、.ttc，類型代碼是OTTO，現行标準爲OpenType 1.8.2。
WOFF
WOFF （網頁開放字體格式） 是由 Mozilla 與 Type Supply, LettError 及其他(tā)組織協同開發的(de)一種新的(de)網頁字體格式。它使用(yòng)了(le)一種壓縮版本，類似于 TrueType, OpenType, Open Font 所采用(yòng)的(de) SFNT 結構，不過還(hái)添加了(le)共用(yòng)數據及用(yòng)戶私有數據結構，其中包括了(le)自定義空間，其允許廠家和(hé)經銷商提供許可(kě)證。
EOT
嵌入式OpenType字體（英語：Embedded OpenType，簡稱EOT）是被微軟設計用(yòng)來(lái)在網頁使用(yòng)的(de)字體格式。該字體格式是OpenType字體的(de)壓縮格式。文件的(de)擴展名通(tōng)常是".eot"。
通(tōng)過使用(yòng)微軟的(de)網頁字體工具（WETF）、其他(tā)版權軟件或者開源軟件，并且基于的(de)存在的(de)TrueType字體文件，這(zhè)種字體文件也(yě)能夠被制作。
SVG
SVG (Scalable Vector Graphics font) 字體格式使用(yòng) SVG 的(de)字體元素定義。這(zhè)些字體包含作爲标準 SVG 元素和(hé)屬性的(de)字形輪廓，就像它們是 SVG 映像中的(de)單個(gè)矢量對(duì)象一樣。SVG 字體最大(dà)的(de)缺點是缺少字體提示（font-hinting）。字體提示是渲染小字體時(shí)爲了(le)質量和(hé)清晰度額外嵌入的(de)信息。同時(shí)，SVG 對(duì)文本（body text）支持并不是特别好。因爲 SVG 的(de)文本選擇（text selection）目前在 Safari、Safari Mobile 和(hé) Chrome 的(de)一些版本上完全崩壞，所以你不能選擇單個(gè)字符、單詞或任何自定義選項，你隻能選擇整行或段落文本。
目前主流的(de)浏覽器幾乎都支持 WOFF。我們可(kě)以通(tōng)過以下(xià)三步，輕松實現
網站建設中網頁字體的(de)自定義。
1.創建項目自定義字體目錄，導入字體。
2.CSS中定義字體。采用(yòng)一個(gè)叫做(zuò)@font-face 的(de)CSS @規則 ，它允許網頁開發者爲其網頁指定在線字體。 通(tōng)過這(zhè)種@font-face自定義字體的(de)方式， 可(kě)以消除網頁對(duì)用(yòng)戶電腦(nǎo)本地字體的(de)依賴。
3.CSS引用(yòng)自定義字體。根據開發者自身場(chǎng)景需求，可(kě)以全局引用(yòng)，也(yě)可(kě)以局部标簽樣式引用(yòng)。
最後，如果對(duì)于一些字體沒有WOFF格式，我們可(kě)以采用(yòng)字體轉換的(de)辦法，有很多(duō)開放的(de)在線轉換工具供選擇，這(zhè)個(gè)自己搜索一下(xià) OTF到WOFF轉換器 或 在線字體轉換工具 即可(kě)。
✖
