這裏整理了多個 Web 安全字型,讓您無需任何顧慮的情況下暢快使用。
1 、 Arial
微軟公司的網頁核心字型之一,常用的 sans serif 字型,當字號很小時不容易閲讀。但是,大寫的 “I” 和小寫的 “l” 是無法區別的,您可以考慮用 Tahoma 字型來替代。
CSS 寫法:font-family: Arial, Helvetica, sans-serif;
2 、 Arial Black
CSS 寫法:font-family: ‘Arial Black’, Gadget, sans-serif;
3 、 Arial Narrow
CSS 寫法:font-family: ‘Arial Narrow’, sans-serif;
4 、 erdana
微軟公司的網頁核心字型之一,微軟公司專門為螢幕顯示而開發的。應用廣泛。易於閲讀。是顯示器中清晰的字型,即使字號很小,也很容易閲讀。我比較喜歡採用 10PX 的 Verdana 來做英文正文字型,也推薦您使用,但字號知名介於 10~14 畫素之間,超出這個範圍就不好看了。
CSS 寫法:font-family: Verdana, Geneva, sans-serif;
5 、 Georgia
微軟公司的網頁核心字型之一,可用性好。可讀性比 Times New Roman 強。是網站設計中,瀏覽效果知名的 serif 字型,因為它是專為網上閲讀設計的。)
CSS 寫法:font-family: Georgia, serif;
6 、 Times New Roman
微軟公司的網頁核心字型之一,可能是常用的 serif 字型,是網站瀏覽器預設的字型,12pt 以上的字型容易閲讀,但小字號的字型易讀性差。(蘋果系統沒有這個字型,有一個對應於 Times New Roman 的字型叫 Times)
CSS 寫法:font-family: ‘Times New Roman’, Times, serif;
7 、 Trebuchet MS
微軟公司的網頁核心字型之一,與 Arial 相似,Trebuchet MS 比 Arial 看起來優雅、古典一點。可以用來做標題,但小字號閲讀起來會很困難(低於 13PIX 閲讀起來就很累了,不太推薦用來做正文字型)。在蘋果系統上也可以用 Helvetica 做替代。
CSS 寫法:font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
8 、 Courier New
微軟公司的網頁核心字型之一,老式印表機字型,有一種獨特的機械工整感覺。呈現計算機編碼時,還會用到這種字型。 12 pt 的 Courier New 字型曾是美國國務院的公文標準字型,但於 2004 年 1 月停用,改使用 14 pt 的 Times New Roman,因為其具 “現代性” 和 “易讀性” 。
CSS 寫法:font-family: ‘Courier New’, Courier, monospace;
9 、 Impact
微軟公司的網頁核心字型之一,Impact 是 1965 年發表的一個無襯線字型,其特粗的筆畫、緊縮的間距。字型較為粗獷,適合使用在標題上,而不常用在內文。
CSS 寫法:font-family: Impact, Charcoal, sans-serif;
10 、 Comic Sans MS
微軟公司的網頁核心字型之一,手寫體。這是一種爭議很大的字型,講實話,我也不喜歡這個字型,一點美感都沒有,不過在一大堆規規矩矩的字型裏面,有這麼一個隨意性比較的字型,可以變換一下口味,也算不錯吧,建議不要用在正規的金融、政府、商業機構站點。
CSS 寫法:font-family: ‘Comic Sans MS’, cursive;
11 、 Tahoma
Tahoma 是一個十分常見的無襯線字型,Tahoma 和 Verdana 師出同為名設計師馬修·卡特的作品,由微軟在 1999 年推出,被採用為 Windows 2000 、 Windows XP 、 Windows Server 2003 等系統的預設字型。它的字型結構和 Verdana 很相似,其字元間距較小,用來作為標題,效果好過 Arial(Tahoma 的大寫 I 和小寫 l 比 Arial 容易識別),但如果作為正文,他的字號不能小於 13PIX,否則很多筆畫粘連到一起,不利於閲讀。
CSS 寫法:font-family: Tahoma, Geneva, sans-serif;
12 、 Courier
Courier 是一個等寬字型的粗襯線字型,主要是依據打字機所列印出來的字型來設計。原來 Courier New 的字型是 IBM 公司在 1950 年代設計給印表機使用的字型,後來這個字型成為整個打字機制造業的標準。 Courier New 是 Courier 的變體,比 Courier 更具機械味道。
CSS 寫法:font-family: Courier, monospace;
13 、 Lucida Sans Unicode
是一種 OpenType 型的無襯線字型 。 1993 年製作並隨微軟公司的 Windows NT 3.1 作業系統發佈。有較大的 x 字高,具有很好的可讀性,被廣泛用於顯示、出版等各種用途。
它支持 Unicode2.0 版本的基本字元,包括拉丁字母,希臘字母,西裏爾字母,希伯來字母,以及國際音標字元。
該字型是個 Unicode 代碼的字型, 該字型從 Windows 98 開始一直作為系統預裝字型發行。後來發佈的 Lucida Grande 字型作為蘋果公司 Mac OS X 系統的預設字型發佈。
CSS 寫法:font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
14 、 Lucida Console
同 Lucida Sans Unicode 類似。
CSS 寫法:font-family: ‘Lucida Console’, Monaco, monospace;
15 、 Garamond
Garamond(加拉蒙德)是一類西文襯線字型的總稱,自 16 世紀 40 年代開始至今,有很多家公司和很多設計師參與到 Garamond 字型設計,如: Adobe Garamond, Monotype Garamond, Sioncini Garamond,和 Stempel Garamond 等等。字型給人端莊典雅,有些古典的感覺,在博物館和歷史性悠久的專案中使用,應該可以獲得不錯的效果。
CSS 寫法:font-family: Garamond, serif;
16 、 MS Sans Serif
微軟系統自帶字型。螢幕顯示的畫素字型。非襯線字型。
CSS 寫法:font-family: ‘MS Sans Serif’, Geneva, sans-serif;
17 、 MS Serif
微軟系統自帶字型。螢幕顯示的畫素字型。襯線字型。
CSS 寫法:font-family: ‘MS Serif’, ‘New York’, sans-serif;
18 、 Palatino Linotype
CSS 寫法:font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
19 、 Symbol
CSS 寫法:font-family: Symbol, sans-serif;
20 、 Bookman Old Style
CSS 寫法:font-family: ‘Bookman Old Style’, serif;
希望在 Web 編寫過程中這些核心的 Web 字型能對您有用。
Centaur
具有史詩般正統風格,特別適合用於表現年代悠久。具體排版時注意合字和老式數字的使用。
Garamond
復古傳統,沒有強烈個性,十分易於閲讀,因為太流行所以很多大的公司都做過 Garamond 復刻,蘋果電腦裏有系統字 Garamond 以及 Adobe 所製作的 Adobe Garamond Pro 。 如果是希望 web 上使用,可以考慮 EB Garamond 。
Caslon
美國獨立宣言用字,是活字時代的大熱字型。很多公司也做過 Caslon 復刻,現在的使用也非常廣泛。
Baskerville
過渡期羅馬體 (舊體到現代體) 的代表性字型,非常經典,給人古典、高貴的感覺。
Didot
現代襯線體,髮絲襯線。特點是強烈的筆畫粗細對比和水平襯線,時尚,現代,優美。
Franklin Gothic
這款字型是很早出現的無襯線體,所以帶有古風,筆畫粗狂有力,具有男性化感覺,適合表現強有力。 Web 字型可以考慮 Oswald 。
Futura
Futura 是拉丁語未來的意思,現代且具有幾何特徵,感覺是現在的主流大熱字型,尤其是要突出時尚,設計感的時候可以使用。製作過程中受到包豪斯運動的影響。是 LV 的商標用字,也是現在很多雜誌的選字型。
Gill Sans
英國風格的代表字型,具有古典風格的骨架,但是又有很強的科技感和未來感,字型外形偏幾何,但是 humanist 字型,相對 futura 會柔和一些。
Opima
有古典氣息,筆畫兩端比較粗中間比較細,氣質優雅。時代週刊的字型更換,雅虎 2013 年使用 Optima 作為全新標識的設計基準都證明了這款字型的熱度。
Univers
Grotesque 字型,比 Helvetica 更加簡練。字型家族非常全面,所以搭配使用很方便。
Myriad
Humanist 字型,很早就已經流行,隨着蘋果的廣泛使用更加引人注目,筆畫柔和簡潔。
Avenir
字形簡潔,現代,雖然也有幾何特徵,但是不失人情味。 Avenir 是法語未來的意思,對同樣未來含義的 Futura 是一種挑戰,放大 x-height,降部拉長,使得文字的易讀性明顯提高。字型家族也很完整。