託管你自己的在線字體

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

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

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

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

在線字體

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

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

自託管在線字體

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

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

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

假設你想在你的網站上使用 Sorts Mill Goudy 這個字體：

1、將字體文件 GoudyStM-webfont.woff 上傳至你的伺服器：

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

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

2、在你網站的 CSS 文件中，添加 @font-face 語句，添加後應該和這個差不多：

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

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

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

3、現在，你已經定義了字體的名字和目錄，你可以在任何指定的 CSS 類或 ID 來調用它了。舉個例子，如果你希望以 Sorts Mill Goudy 字體來渲染 <h1>，只需要在 CSS 規則中加入你自己的字體名稱：

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

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


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

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

本文由 LCTT 原創編譯，Linux中國 榮譽推出

本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive