歡迎光臨
每天分享高質量文章

托管你自己的在線字體 | Linux 中國

使用自托管的開源字體來定製你的網頁。

— Seth Kenlon

 

字體對許多計算機用戶來說可能都是很神秘的東西。舉個例子,你在製作好一張很酷的傳單之後,你需要將它送到某個地方去打印,結果發現,你設計的所有字體都變成了 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 [email protected].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

赞(0)

分享創造快樂