整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
CSS的字體樣式中，通常會受到客戶端是否安裝了所設置的字體的限制。如果客戶沒有安裝我們在CSS中所設置的字體，則在最終的客戶頁面中是無法顯示出來的。這樣我們在頁面開發(fā)過程中就無法使用一些較為生僻的字體，一些具有藝術感的文字效果只能使用圖片來代替。今天小海前端（頭條號）來帶領大家一同學習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()的方法，只需在該方法的括號中指定字體的名稱，就可以從本地調用這個字體了。
假設根據(jù)頁面設計需要，我們要使用一款名為“漢儀綜藝體簡”的字體，這款字體的文件名為hyzytj.ttf，同樣存儲在站點根目錄下的font文件夾中。那么我們將服務武器端字體設置為如下CSS代碼：
@font-face{
font-family:myfont;
src:local(“漢儀綜藝體簡”),url(../font/hyzytj.ttf) format(“truetype”);
}
這樣一來，真正安裝了“漢儀綜藝體簡”這個字體的用戶就無需從服務器端下載字體文件了。
四、實例：利用服務器端字體展示一首古詩。
本實例利用一個名為“葉根友毛筆行書”的字體來為大家展示毛澤東詩詞《沁園春 雪》的開頭片段。本實例的最終效果如下圖所示。
實例的最終效果
HTML代碼如下所示：
實例的HTML代碼
CSS代碼如下所示：
實例的CSS代碼
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海前端（頭條號）很久的時間。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統(tǒng)的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
關注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學者跟著學下去，我們共同將前端開發(fā)的路努力堅持的走下去。
在下一篇文章中，小海前端（頭條號）將為大家介紹CSS3提供的顏色設置方式。并為大家講解顏色三要素和顏色代碼的相關知識。希望正在學習CSS技術或前端開發(fā)的小伙伴們一定不要錯過。
題：HTML中表示文字粗體的標記除了使用外，還可以使用（???）
A、
B、
C、
D、
參考答案如圖所示
言
頁面總少不了字體吧，字體還有家族font-family，那好吧
字體格式
TTF (TrueType Font) 字體格式是由蘋果和微軟為 PostScript 而開發(fā)的字體格式。在 Mac 和 Windows 操作系統(tǒng)上，TTF 一直是最常見的格式，所有主流瀏覽器都支持它。然而，IE8 不支持 TTF；且 IE9 上只有被設置成 "installable" 才能支持（譯注：別想了，轉別的格式吧）。
TTF 允許嵌入最基本的數(shù)字版權管理標志————內置標志可以告訴我們字體作者是否允許改字體在 PDF 或者網站等處使用，所以可能會有版權問題。另一個缺點是，TTF 和 OTF 字體是沒壓縮的，因此他們文件更大。
OTF (OpenType Font) 由 TTF 演化而來，是 Adobe 和微軟共同努力的結果。OTF 字體包含一部分屏幕和打印機字體數(shù)據(jù)。OTF 有幾個獨家功能，包括支持多平臺和擴展字符集。OTF 字體可以在 Macintosh 和 Windows 系統(tǒng)上使用。
OTF 也允許多達 65000 個字符的存儲。這個額外的空間讓設計師可以自由地添加附加元素，比如小帽子、老式數(shù)字體、代替的字符和其他一些以前必須作為獨立字體分發(fā)的附加材料。
實踐
1、CSS引入TTF或OTF文件
@font-face {
font-family: HansKendrick-Regular;
src:url('../fonts/HansKendrick-Regular.otf');
}
備注：
otf文件由設計同學提供或自行下載。
url使用的是相對路徑。絕對路徑測不管是放在public還是src下均沒有測試成功。2、CSS樣式的使用
font-family: 'HansKendrick-Regular';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
text-align: center;
color: rgba(255, 255, 255, 0.8);
備注：以上是樣例，根據(jù)實際情況配置即可。資料來源：
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
