字型對許多計算機使用者來說可能都是很神秘的東西。舉個例子，你在製作好一張很酷的傳單之後，你需要將它送到某個地方去列印，結果發現，你設計的所有字型都變成了 Arial，這多半是因為列印店沒用安裝你設計用到的那些字型。不過，我們仍有很多方法來避免這種情況：你可以將這些使用特定字型的單詞轉換為路徑，你也可以將它封裝為 PDF，或是把開源字型封裝到你的設計檔案中，或者至少列出所需字型。不過，我們總會忘記一些事情，所以這仍是一個問題。

Web 上也有類似的問題。如果你對 CSS 有所瞭解，你可能會見過這種宣告：

1. h1 { font-family: "Times New Roman", Times, serif; }

這是設計師正在嘗試定義網站使用要用到的特定字型，如果使用者沒有安裝 Times New Roman 這個字型，便會回落到另一個字型；如果使用者也沒有安裝 Times 這個字型，便再次回落。它比使用圖片而不是文字更好一些，但是在沒有字型託管的情況下，這仍是一種棘手且不雅觀的方法。不過，在早期的網際網路時代，我們不得不這樣做。

線上字型

線上字型的登場，把字型管理從客戶端搬上了服務端。如今網頁上的字型通常由伺服器為客戶端渲染，而不是要求瀏覽器從使用者的系統中查詢字型。谷歌和其它供應商託管了許多開源字型，網站設計師們可以很輕鬆的用 CSS 來取用它們。

不過，問題是，取用這些字型並不是不花費任何代價的。雖然取用它們免費，但是像谷歌這樣的巨頭喜歡跟蹤那些取用它們資源的網站，其中就包括了字型資源。如果你不想你的網站幫谷歌記錄每個人的活動，你可以自己託管線上字型。別覺得這很難，它其實是很簡單的，大概流程就是上傳字型到你的主機，再使用一個簡單的 CSS 便可完成。這樣做還有個好處，你的網站能更快地載入，因為它會在載入每個頁面的時候進行更少的外部呼叫。

自託管線上字型

首先，你需要一個開源字型。如果你沒有瞭解過那些令人費解的軟體協議，你可能會感到很疑惑，特別是很多字型看起來都是免費的。我們中應該很少有人有字型付費意識，但是他們卻在電腦上安裝了一些高價的字型。不過，由於授權協議，它使得你的電腦也許帶著一些 法律上不允許複製和再分發[1] 的字型。像 Arial、Verdana、Calibri、Georgia、Impact、Lucida 和 Lucida Grande、Times 和 Times New Roman、Trebuchet、Geneva 以及其它的很多字型都是被微軟、蘋果和 Adobe 這種大公司所擁有的。如果你購買了一臺預裝了 Windows 或 macOS 的電腦，你就獲得了使用這些字型的權利，但是你並沒有擁有那些字型，也沒有被許可上傳它們至伺服器（除非額外說明）。

幸運的事，開源熱潮在很久以前就席捲了字型界。然後就有了許多優秀的開源字型的合集和專案，比如 The League of Moveable Type[2]、Font Library[3] 以及 Omnibus Type[4]，甚至還有一些來自 Google 和 Adobe 的字型。

常見的字型格式有 TTF、OTF、WOFF、EOT 等。因為 Sorts Mill Goudy 發行過 WOFFWeb Open Font Format（網際網路開放字型格式，Mozilla 參與了部分開發）版本，所以下文中我會用它來做例子。當然，其它字型的方法也是一樣的。

假設你想在你的網站上使用 Sorts Mill Goudy[7] 這個字型：

1、將字型檔案 GoudyStM-webfont.woff 上傳至你的伺服器：

1. scp GoudyStM-webfont.woff seth@example.com:~/www/fonts/

你的主機可能帶有像 cPanel 這樣的圖形化工具，透過它們上傳也是一樣的。

2、在你網站的 CSS 檔案中，新增 @font-face 陳述句，新增後應該和這個差不多：

1. @font-face {
2.   font-family: "titlefont";
3.   src: url("../fonts/GoudyStM-webfont.woff");
4. }

font-family 的值是你來決定的。這是一個易於理解的名字，它用於放在使用字型名的地方。我在這裡使用 “titlefont” 作為例子，是因為我希望它被用來顯示標題字型。你也可以使用 “officialfont” 和 “myfont” 這樣的名字。

src 值是你字型檔案的路徑。這是你伺服器上字型的路徑。在這裡，我用 fonts 目錄來作為示例，它和 css 在一個檔案夾裡。你伺服器的檔案結構可能和我的不一樣，所以你需要調整一下這個路徑。記住一點，一個點意味著工作目錄，兩個點則代表父目錄。

3、現在，你已經定義了字型的名字和目錄，你可以在任何指定的 CSS 類或 ID 來呼叫它了。舉個例子，如果你希望以 Sorts Mill Goudy 字型來渲染 

，只需要在 CSS 規則中加入你自己的字型名稱：

1. h1 { font-family: "titlefont", serif; }

現在，你已經成功地託管並使用你自己的字型了。

線上字型的實際效果

via: https://opensource.com/article/19/3/webfonts

作者：Seth Kenlon (Red Hat, Community Moderator)[9] 選題：lujun9972 譯者：zhs852 校對：wxy