如何理解CSS中Font的一些基本知識點

本篇內(nèi)容主要講解“如何理解CSS中Font的一些基本知識點”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何理解CSS中Font的一些基本知識點”吧!

1、什么是字體

　　字體是文字的外在形式，就是文字的風格，是文字的外衣。比如行書、楷書、草書，都是一種字體。同樣一個字每個人寫起來都會有差異，可以說每個人都有一套潛在的字體庫。對于web頁面來說，字體就是計算機上存儲的一套文字顯示方式。通過對文字進行一些特殊處理（比如末端加強）來提高不同環(huán)境中文字的可讀性。

　　比如同樣大小的文字，在不同字體下的可讀性是不同的。

一般來講，一款字庫的誕生，要經(jīng)過字體設計師的創(chuàng)意設計、字體制作人員一筆一劃的制作、修改，技術開發(fā)人員對字符進行編碼、添加程序指令、裝庫、開發(fā)安裝程序，測試人員對字庫進行校對、軟件測試、兼容性測試，生產(chǎn)部門對字庫進行最終產(chǎn)品化和包裝上市等幾個環(huán)節(jié)。通常情況下文字跟字體庫是一對多的關系，所以對于多語言支持的web頁面，要求設計師在選用字體時不能光考慮一種語言的情況。

2、font-family

　　關于font-family的介紹大多數(shù)只是說明他可以設置文本中的字體名稱序列。其實font-family真正的作用是將一系列近似的字體按照優(yōu)先級順序組成一個列表，瀏覽器從第一項開始依次查找，找到第一種可用的字體來顯示文字。

font-family: Times New Roman,"open-sans","幼圓",sans-serif

　　當瀏覽器顯示一個字符時，會首先從Times New Roman中尋找這個字符，如果找到就用Times New Roman字體來顯示這個字符。如果沒找到就去open-sans中尋找，如果找到就用該字體顯示字符，沒找到就會依次尋找下去，如果在通用字體庫sans-serif中也沒有找到就會用一個缺字符代替（通常是小方框）。

<p style='font-family: Times New Roman,"open-sans","幼圓",sans-serif'>
    <span>時間就是金錢</span><span>Time is money.</span>
</p>

　　比如上面這段代碼，對于漢字部分瀏覽器會先去Times New Roman中查找，沒有找到，接著再去open-sans中查找，仍然沒有找到，繼續(xù)到“幼圓”中尋找，幼圓中可以找到對應字符則用該字體來顯示。對于英文部分可以在Times New Roman中尋找則會用該字體來顯示。

font-family中有時候字體加引號有時候不加引號。區(qū)別在于對字體名稱中空格的處理不同。不加引號時，忽略字體左右兩端的空白字符，單詞之間的空白字符被解釋為一個空白字符。比如font-family:   Times   New   Roman   , sans-serif。被解釋為font-family:Times New Roman,sans-serif。加引號時，需要保留引號內(nèi)的所有空格。比如font-family:"Times    New Roman",sans-serif。瀏覽器會去尋找“Times   New Roman”這個字體。

3、通用字體族

　　w3c建議在定義字體是最后以一個類別結尾，例如sans-serif，來保證不同操作系統(tǒng)下網(wǎng)頁都能夠正確顯示。常見的字體族為serif（襯線字體）、sans-serif（非襯線字體），可以簡單理解為在所有字體都是失效的情況下，瀏覽器從字體族中選擇一種字體來顯示。

　　一種字體族代表了擁有某類特性的多種字體，字體族中字體的選擇完全有瀏覽器決定。設計者給出的字體應該盡可能覆蓋所有系統(tǒng)，而不應該依賴字體族。字體族一定要放到font-family的最后一位。

　　serif 襯線字體，通常是指使用末端加強原則的字體，通過在文字末端加入細小變化來改變小號文字的可讀性。

上述字體都是襯線字體，文字的末端使用了襯線。陳賢字體具有較高的可讀性，通常用于以大段文字作為表現(xiàn)形式的作品如報紙、書籍等。常見的襯線字體有Georgia, Garamond, Times New Roman, 中文的宋體等等。

　　sans-serif非襯線字體，襯線字體以外的所有字體都成為非襯線字體。非襯線字體的線條比較均勻，通常在藝術字、標題中的使用較多。

由于非襯線字體字條比較均勻，所以在小號文字下的可讀性不如襯線字體。常見的非襯線字體有Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圓、隸書等等。

　　綜上所述，襯線字體適合小號文字的顯示，如果使用非襯線字體要保證font-size足夠大，以確保正文內(nèi)容的可讀性。11px下的英文推薦使用襯線字體，對于中文，無論如何都不推薦11px下顯示。

4、@font-face

　　@font-face是鏈接服務器上的字體的一種方式，就像制定圖片鏈接一樣，瀏覽器會根據(jù)這條指令把對應字體下載到本地緩存，用它去修飾文本。

<identifier>：字體名稱

　　<url>：此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑

     <string>：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype, opentype,Web Open Font Format， embedded-opentype, svg等

     <font>：定義字體相關樣式,符合該樣式設定的文本會使用該字體顯示。

　　truetype(.ttf)、opentype(.otf)這兩種格式在絕大多數(shù)瀏覽器上都能正常工作。Web Open Font Format(.woff)是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數(shù)據(jù)包的分離。Embedded Open Type(.eot)為IE的私有字體格式。svg(.svg)字體是基于SVG字體渲染的一種格式。下表中列出了這些格式的瀏覽器兼容性。

CSS Code復制內(nèi)容到剪貼板

1. @font-face{   

2.         font-family: 'open-sans';   

3.         src: url('./open-sans/OpenSans-Regular.eot'); /* IE9+ */  

4.         src: url('./open-sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  

5.          url('./open-sans/OpenSans-Regular.woff') format('woff'), /* chrome、firefox */  

6.          url('./open-sans/OpenSans-Regular.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  

7.          url('./open-sans/OpenSans-Regular.svg#fontname') format('svg'); /* iOS 4.1- */  

8.     }   

9.     @font-face{   

10.         font-family: 'open-sans';   

11.         src: url('./open-sans/OpenSans-Bold.eot'); /* IE9+ */  

12.         src: url('./open-sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  

13.          url('./open-sans/OpenSans-Bold.woff') format('woff'), /* chrome、firefox */  

14.          url('./open-sans/OpenSans-Bold.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  

15.          url('./open-sans/OpenSans-Bold.svg#fontname') format('svg'); /* iOS 4.1- */  

16.         font-weight:bold;   

17.     }   

18.   

CSS Code復制內(nèi)容到剪貼板

1. <p style='font-family: open-sans,sans-serif'>   

2.     <span>時間就是金錢</span><span>Time is money.</span>   

3. </p>   

4. <p style='font-family: open-sans,sans-serif;font-weight:bold;'>   

5.     <span>時間就是金錢</span><span>Time is money.</span>   

6. </p>   

7.   

上述代碼中兩次@font-face命令定義了一個字體族，在普通情況下使用OpenSans-Regular字體，粗體時使用OpenSans-Bold字體。這也印證了我們上文所說，對于字體族中的字體由瀏覽器根據(jù)當前設置自動選擇。

　　如果要使用@font-face通常需要做一些優(yōu)化工作，比如有的字體庫太大就需要只保留網(wǎng)頁中用到的文字，對于中文字體更是如此，這時候字蛛(FontSpider)工具可以來幫助我們；對于進一步優(yōu)化，可以將字體文件以base64編碼方式嵌入到css文件中來減少一次http請求，小米主頁就是采用這種方式（這里和這里）。

對于字體庫的壓縮可以使用這款工具。

到此，相信大家對“如何理解CSS中Font的一些基本知識點”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！