一、常見web字體
TrueType (.ttf)
Windows和Mac系統最常用的字體格式,其最大的特點就是它是由一種數學模式來進行定義的基於輪廓技術的字體,這使得它們比基於矢量的字體更容易處理,保證了屏幕與打印輸出的一致性。同時,這類字體和矢量字體一樣可以隨意縮放、旋轉而不必擔心會出現鋸齒。
TrueType(.ttc)
TTC是幾個TTF合成的字庫,安裝后字體列表中會看到兩個以上的字體。兩個字體中大部分字都一樣時,可以將兩種字體做成一個TTC文件,現在常見的TTC中的不同字體,漢字一般沒有差別,只是英文符號的寬度不一樣,以便適應不同的版面要求。雖然都是字體文件,但.ttc是microsoft開發的新一代字體格式標准,可以使多種truetype字體共享同一筆划信息,有效地節省了字體文件所占空間,增加了共享性。但是有些軟件缺乏對這種格式字體的識別,使得ttc字體的編輯產生困難。
EOT – Embedded Open Type (.eot)
嵌入字體格式(EOT)是微軟開發的一種技術,允許 OpenType 字體嵌入到網頁並可以下載至瀏覽器渲染,瀏覽器根據 CSS 中 @font-face 的定義,下載,渲染這種 .EOT 后綴的字體文件。這些文件只在當前頁活動的狀態下,臨時安裝在用戶的系統中。
OpenType (.otf)
OpenType是一種可縮放字型(scalable font)電腦字體類型,采用PostScript格式,是美國微軟公司與Adobe公司聯合開發,用來替代TrueType字型的新字型。這類字體的文件擴展名為.otf,類型代碼是OTTO,現行標准為OpenType 1.4。OpenType最初發表於1996年,並在2000年之后出現大量字體。它源於微軟公司的TrueType Open字型,TrueType Open字型又源於TrueType字型。OpenType font包括了Adobe CID-Keyed font技術。Adobe公司已經在2002年末將其字體庫全部改用OpenType格式。
WOFF – Web Open Font Format (.woff)
相對於 TrueType 和 OpenType ,WOFF(Web開發字體格式)是一種專門為了 Web 而設計的字體格式標准,它並不復雜,實際上只是對於 TrueType / OpenType 等字體格式的封裝,並針對網絡使用加以優化:每個字體文件中含有字體以及針對字體的元數據(Metadata),字體文件被壓縮,以便於網絡傳輸,並且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在內的幾乎所有主要的字體供應商都加入到支持 WOFF 的行列中來
SVG (Scalable Vector Graphics) Fonts (.svg)
顧名思義,就是使用SVG技術來呈現字體,還有一種gzip壓縮格式的SVG字體.svgz。SVG可縮放矢量圖形(Scalable Vector Graphics)是基於可擴展標記語言(XML),用於描述二維矢量圖形的一種圖形格式。SVG由W3C制定,是一個開放標准。SVG嚴格遵從XML語法,並用文本格式的描述性語言來描述圖像內容,因此是一種和圖像分辨率無關的矢量圖形格式。SVG可以使你設計的網頁可以更加精彩細致,使用簡單的文本命令,SVG可實現色彩線性變化、路徑、自定義字體、透明效果、濾鏡效果等各式常見的圖形圖像效果。
二、web頁面引入字體方法
CSS實現常見字體的引入
對於常見的字體,即電腦上一般都有的字體,直接在CSS中標明使用的字體即可。
1 body{font-family:"微軟雅黑";}
CSS3實現頁面內嵌字體的引入
對於電腦上沒有的字體,可以使用CSS3提供的自定義字體功能,將字體文件內嵌到網頁中使用。Internet Explorer 9 只支持 .eot 類型的字體, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 與.otf 兩種類型字體. Internet Explorer 8 及更早IE版本不支持@font-face 規則.
1 @font-face {
2 font-style:normal;
3 font-family:'光何體';
4 src:url('./fonts/光何體.ttf') format('truetype');
5 }
6 body {
7 font-family:"光何體","Microsoft YaHei",sans-serif;
8 }