CSS的字體樣式中，通常會受到客戶端是否安裝了所設置的字體的限制。如果客戶沒有安裝我們在CSS中所設置的字體，則在最終的客戶頁面中是無法顯示出來的。這樣我們在頁面開發過程中就無法使用一些較為生僻的字體，一些具有藝術感的文字效果只能使用圖片來代替。今天小海前端（頭條號）來帶領大家一同學習CSS3為我們提供的服務器端字體屬性。

承接文章：CSS3提供了類似Photoshop的效果，可以為文本添加陰影，新屬性解決大問題

技術等級：中級 | 適合有一定的CSS基礎人士閱讀。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

本文涉及到的CSS3屬性包括：

• @font-family

一、服務器端字體的語法格式

CSS3技術使用@font-face定義服務器端字體

CSS3提供了如下的語法格式來定義服務器端字體：

@font-face{

字體屬性：取值;

}

在@font-face內部的字體屬性可以包括下列CSS樣式：

• font-family,設置服務器端字體的自定義名稱。

• font-style,設置文本是否為斜體。

• font-weight,設置文本的粗細。

• font-variant,設置文本是否為小型大寫字母。

• font-size,設置文本的字號。

• src,設置自定義字體的字體文件路徑和文件名，以及字體類型。

上述CSS屬性中，前5個都是CSS原本具有的屬性，在小海前端（頭條號）的文章《CSS字體屬性，詳解屬性用法，提升前端小白能力》中詳細介紹過，不太了解小伙伴可以閱讀學習。

這里不太一樣的地方是font-family屬性，這個屬性在@font-face內部的功能是為服務器端字體設置一個自定義名稱。因為@font-face僅僅是在定義服務器端字體，font-family所設置的自定義名稱，將來要在引用這個服務器端字體時進行書寫。

那我們就來說一說src屬性。首先，要想使用服務器端字體，就需要將這個大部分用戶都可能沒有安裝的字體的字體文件復制出來，粘貼到自己的站點目錄中。這里假設站點根目錄下有一個font文件夾，我們在里面放置了一個名為x.ttf的字體文件。

定義服務器端字體的CSS代碼如下所示：

@font-face{

font-family:myfont;

src:url(../font/x.ttf) format(“truetype”);

}

在一個id名為box的容器中，要使用這個新定義的服務器端字體，CSS代碼如下所示：

#box{

font-family:myfont;

}

二、字體的格式：

我們通過上面的代碼可以看到，在@font-face中src屬性除了指明字體文件的路徑和文件名以外，還需要利用format()來指定字體的格式。

這里小海前端（頭條號）為大家總結了幾種常用字體文件的格式：

• TrueType字體：文件擴展名.ttf，設置為 format(“truetype”)

• OpenType字體：文件擴展名.otf，設置為format(“opentype”)

• Embedded OpenType字體：擴展名為.eot，設置為format(“eot”)

三、在src屬性中使用local()方法：

我們所使用的生僻字體，客戶端到底是否安裝了，我們是無從知曉的。并不排除你認為這個字體非常生僻，但是客戶在自己的電腦上確實安裝了它。這樣如果使用服務器端字體，就無形中增加了字體下載的步驟。

為了保證安裝過這個字體的用戶從本地調用，沒安裝過這個字體的用戶從服務器端調用。src屬性提供了一個名為local()的方法，只需在該方法的括號中指定字體的名稱，就可以從本地調用這個字體了。

假設根據頁面設計需要，我們要使用一款名為“漢儀綜藝體簡”的字體，這款字體的文件名為hyzytj.ttf，同樣存儲在站點根目錄下的font文件夾中。那么我們將服務武器端字體設置為如下CSS代碼：

@font-face{

font-family:myfont;

src:local(“漢儀綜藝體簡”),url(../font/hyzytj.ttf) format(“truetype”);

}

這樣一來，真正安裝了“漢儀綜藝體簡”這個字體的用戶就無需從服務器端下載字體文件了。

四、實例：利用服務器端字體展示一首古詩。

本實例利用一個名為“葉根友毛筆行書”的字體來為大家展示毛澤東詩詞《沁園春 雪》的開頭片段。本實例的最終效果如下圖所示。

實例的最終效果

HTML代碼如下所示：

實例的HTML代碼

CSS代碼如下所示：

實例的CSS代碼

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海前端（頭條號）很久的時間。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

文章預告

在下一篇文章中，小海前端（頭條號）將為大家介紹CSS3提供的顏色設置方式。并為大家講解顏色三要素和顏色代碼的相關知識。希望正在學習CSS技術或前端開發的小伙伴們一定不要錯過。