怎么使用CSS3嵌入Web字體

本篇內(nèi)容主要講解“怎么使用CSS3嵌入Web字體”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么使用CSS3嵌入Web字體”吧!

CSS3嵌入Web字體

一直以來Web設(shè)計師在設(shè)計網(wǎng)頁時都想為Web頁面添加一些優(yōu)雅的字體，但瀏覽器僅限于使用用戶在其系統(tǒng)上安裝的字體呈現(xiàn)文本，這樣一來讓大部分網(wǎng)站受限于字體數(shù)量的不足。多年來一直都是使用圖片替換文本的方式來解決頁面上使用優(yōu)雅字體，但這種對于頻繁更換文本的網(wǎng)站來說是一件不切實(shí)際的事，以致于我們堅(jiān)持使用這些少量的Web字體。隨著技術(shù)的不斷發(fā)展，出現(xiàn)在Web頁面中 使用Flash和JavaScript技術(shù)來彌補(bǔ)這一不足。雖然這些方法已經(jīng)是不錯的應(yīng)急措施， 允許包含自己的字體，但是它們擁有很嚴(yán)重的缺陷。有時候它們很難實(shí)現(xiàn)，因?yàn)樗鼈円笥脩粼诒镜貑⒂?JavaScript或者 Flash插件。值得慶幸的一件事情是， 可以使用@font-face模塊來解決Web頁面中使用優(yōu)雅字體的方式。 

@font-face模塊介紹：

@font-face主要是把自己定義的Web字體嵌入到Web頁面中，這些自定義的字體被放置在服務(wù)器上，瀏覽器會根據(jù)指定的命令將對應(yīng)的字體下載到本地緩存， 使用它來修飾文本。也常常把這種方式 稱為Web字體嵌入（實(shí)際上并沒有什么字體被嵌入）。

@font-face語法：

有了@font-face模塊， 只要將字體傳入到服務(wù)器端，不管用戶端是否安裝了對應(yīng)的字體， 設(shè)計的網(wǎng)頁都能夠正確顯示，用較為專業(yè)的話來講，@font-face能夠加載服務(wù)器端的字體， 讓客戶端瀏覽器 顯示客戶端沒有安裝的字體。 如果沒有@font-face， 客戶端瀏覽器只能在客戶系統(tǒng)中尋找指定的字體， 這樣一來給設(shè)計師帶來極大的限制。@font-face能加載服務(wù)器端的字體，讓客戶端瀏覽器尋找 到對應(yīng)的字體，使用中具有一套成熟的語法規(guī)則。

@font- face { font- family:< YourWebFontName>; 

src: < source>[< format>][< source>[< format>]]*; 

[font- weight:< weight>]; 

[font- style:< style>]; } 

取值說明如下： 

1. YourWebFontName：指定的是自定義的字體名稱，最好是使用下載的默認(rèn)字體文件名，它將被引用到Web元素中的font-family。如“ font- family:' YourWebFont-Name'”。 

2. Soure： 指定的是自定義的字體存放路徑，可以是相對路徑也可以是絕對路徑。 

3. Format： 指定的是自定義的字體格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型，如 truetype、opentype、truetype- aat、embedded- opentype、avg 等。 

4. font-weight和font-style： 前者用來指定字體是否為粗體，后者主要定義字體樣式，如斜體。除了這兩個屬性之外， 類似的屬性還有 font-variant、 font- size、 font-stretch 等。

使用字體圖標(biāo)的優(yōu)勢：

http:/ /www.iis7.com/b/wzjk/

使用字體圖標(biāo)和位圖， 它自身更具有哪些優(yōu)勢呢？ 

1. 適用性： 一個圖標(biāo)字體比一系列的圖像（特別是在Retina屏中使用雙倍大小的圖像）要小。一旦圖標(biāo)字體加載了，圖標(biāo)就會馬上渲染出來， 不需要下載任何圖像。 

2. 可擴(kuò)展性： 圖標(biāo)字體可以用過font-size屬性設(shè)置大小。 能夠隨時輸出不同大小的圖標(biāo)，然而，使用位圖必須為每個不同大小的圖像輸出一個不同文件。 

3. 靈活性： 文字效果可以很容易地應(yīng)用到圖標(biāo)上，包括顏色、陰影和翻轉(zhuǎn)等效果。它們還可以在任何背景下顯示。

4. 兼容性： 網(wǎng)頁字體支持所有現(xiàn)代瀏覽器，包括低版本IE。

實(shí)現(xiàn)@font-face：

@font-face屬性和CSS3中的@media，@import、@keyframes等屬性一樣， 都是用關(guān)鍵字符“@” 封裝多項(xiàng)規(guī)則。@font- face的"@"規(guī)則主要用于指定自定義字體， 然后在其他樣式塊中調(diào)用@ font-face中自定義的字體。

使用@font-face自定義字體 

正常使用@font-face自定義字體， 必須滿足以下幾個關(guān)鍵點(diǎn)： 

1. 將各種格式字體上傳到服務(wù)器上， 以支持各種瀏覽器； 

2. 在@font-face中顯式指定自定義字體名稱以及引用自定義字體的字體來源。

font-family和src都是必需的，通過font-family來自定義字體，而src是引用自定義字體的來源。當(dāng)然，除了這兩個屬性之外，還可以在@font-face顯式地通過字體相關(guān)屬性設(shè)置文本樣式，如font- weight、font-style 等。

@font-face規(guī)則中的font-family與其他樣式中的font-fmaily略有不同。在@font-face中的font-family只是聲明了字體的名稱（也就是自定義了字體的名稱），而沒有向元素中分配這種字體。而樣式中的font-family卻是顯式地為元素指定字體名稱。在@font-face規(guī)則中，通過font-family來自定義字體名稱，而這個自體名稱可以是任意的名稱或形式，它僅用于元素樣式中的font-family屬性引用。 當(dāng)然，使用的字體名稱最好與引用的字體文件名相同，用于保持CSS的可讀性，可維護(hù)性。上面通過@font-face聲明了字體名“NeuesBauenDemo”，但并不會有任何實(shí)際效果，如果想讓W(xué)eb中的文本字體是NeuesBauenDemo，需要在樣式代碼塊中的對應(yīng)元素中引用@font-face定義好的字體，@font-face和@keyframes一樣，一個@font-face規(guī)則僅自定義一個字體， 如果需要自定義多個 字體就需要對應(yīng)啟用多個@font-face規(guī)則，

聲明字體來源：

@font-face規(guī)則中有一個非常重要的參數(shù)，就是src，這個屬性類似于img標(biāo)簽中的src屬性，其值主要是用于鏈接到實(shí)際的字體文件。此外，可以聲明多個來源，如果客戶端的瀏覽器未能找到第一個 來源，它會依次嘗試尋找后面字體來源，直到找到一個可用的字體來源為止，每種字體都有其具體作用和格式，

1. TureType(. ttf) 格式 TureType(. ttf) 格式字體是 Windows 和 iOS 的最常見的字體， 是 一種RAW格式。  

2. OpenType(. otf) 格式 OpenType(. otf) 格式字體被認(rèn)為是一種原始的字體格式， 其內(nèi)置在TureType的基礎(chǔ)上， 所以也提供更多的功能，  

3. Web Open Font Format(. woff) 格式 Web Open Font Format(. woff) 格式字體是Web字體中最佳格式， 它是一個開放的 TrueType/ OpenType 的壓縮版本， 同時也支持元數(shù)據(jù)包的分離

4. Embedded Open Type(. eot) 格式 Embedded Open Type(. eot) 格式字體是 IE專用字體， 可以從 TrueType 中創(chuàng)建此格式字體

5. SVG(. svg) 格式SVG(. svg) 格式字體是基于SVG字體渲染的一種格式， 

這就意味著在@font-face中至少需要“. woff”和“. eot”兩種格式字體， 甚至還需要“. svg” 等字體以得到更多種瀏覽版本的支持。 為了使@font-face 得到更多的瀏覽器支持， Paul Irish 寫了 一個獨(dú)特的@font-face語法叫做“ Bulletproof@ font- face”(防彈字體)

創(chuàng)建各種字體：

手上僅有一種格式的字體，而為了兼容瀏覽器各版本，需要從一種格式字體轉(zhuǎn)換成所需的各種字體格式。那么如何將字體轉(zhuǎn)換為所有格式的字體呢？ 

這將成為@font-face定義字體之前首要解決的問題之一。目前為止，在互聯(lián)網(wǎng)上有很多在線轉(zhuǎn)換字體的生成工具。 

-Fontsquirrel 字體轉(zhuǎn)換生成器 

-Codeandmore 字體轉(zhuǎn)換生成器 

創(chuàng)建一個圖標(biāo)字體：

Symbol(符號)字體可以使用一個專用的字體創(chuàng)建應(yīng)用程序， 比如說 Glyphs(雕文)，但是一個專業(yè)的排版工具之外的需求或要求構(gòu)建一個簡單的圖標(biāo)字體，比如說 間中攻粗細(xì)這樣的物理關(guān)系并不是非常重要。目前為止，最簡單的方法是使用Keyamoon制作的一個Web應(yīng)用程序IcoMoon，可以解決字符轉(zhuǎn)換成Web字體的所有麻煩。IcoMoon附帶了大量的圖標(biāo)， 可以通過圖標(biāo)庫添加更多的圖標(biāo)，其中 大部分都可以免費(fèi)使用（使用時請先查看它們的許可證）。如果你正在尋找如“ 文件下載”和“ 購物車” 一樣的圖標(biāo)，那么你會發(fā)現(xiàn)， 使用標(biāo)準(zhǔn)的圖標(biāo)比你自己創(chuàng)建要方便得多。

準(zhǔn)備插圖：

首先，需要能創(chuàng)建矢量圖標(biāo)的程序，并且能夠找到輸出SVG格式，比如Illustrator或者iNkscape。 設(shè)計的時候，可以使用任何你喜歡的顏色，但是圖標(biāo)必須是一個純色。確保每個圖標(biāo)的尺寸大小是相同的。若某一個圖標(biāo)相較其他的更高或者更寬，會導(dǎo)致很難創(chuàng)建一個一致的字體。在這里，我們不得不減少飛艇圖標(biāo)的寬度，以使它能匹配其他圖標(biāo)

1. 清理圖標(biāo)

仔細(xì)檢查每一個圖標(biāo)，以確保它們沒有缺陷—圖標(biāo)在小尺寸的時候可能看著是完美的，當(dāng)放大后會發(fā)現(xiàn)一些小的缺陷。在(AI)Illustrator中，使用Pathfinder工具統(tǒng)一層疊元素， 減去前面元素， 比如圖標(biāo) 中的星星圖標(biāo)。 原則是確保圖標(biāo)是可讀的小尺寸。

2. 導(dǎo)成SVG文件

現(xiàn)在，選擇一個圖標(biāo)并將它復(fù)制粘貼到一個新的文檔場景中（如200px*200px）。會發(fā)現(xiàn)它有一個基線尺寸的設(shè)置。使用彩色的圖標(biāo)，比如說在白色的背景中使用黑色的圖標(biāo)。現(xiàn)在，選擇菜單“文件”中“保存”，將選擇將文件保存成SVG文件格式。使用默認(rèn)的SVG設(shè)置。一旦這樣做，所有的圖標(biāo)可以創(chuàng)建為一個Web字體。

3. 導(dǎo)入到 IcoMoon

打開 IcoMoon Web App 。導(dǎo)入一個圖標(biāo)，點(diǎn)擊“ Import icons”按鈕，然后選擇想要添加的SVG文件— 可以一次添加多個文件。 這些圖標(biāo)將會出現(xiàn)在“ Your Custom Icons” 區(qū)域中。 如果它們 是高亮的黃色顯示，表示這些圖標(biāo)是將要創(chuàng)建的圖標(biāo)字體。

4. 從IcoMoon中導(dǎo)出字體

想調(diào)整圖標(biāo)的位置、大小或旋轉(zhuǎn)，可以點(diǎn)擊“ Edit” 按鈕， 使用“ Save Copy” 保存圖片（ 如鏡像圖標(biāo)）。 然后添加一個有意義的圖標(biāo)標(biāo)記， 將用來生成類 名。 都準(zhǔn)備好了， 點(diǎn)擊屏幕底部的“ Font” 按鈕開始生成字體。 這樣就可以指定圖標(biāo)映射到字符上，例如， 設(shè)置一套六個旋轉(zhuǎn)的球， 可以給這六個球分別指定字符 q、 w、 e、 r、 t 和 y。 也可以根據(jù)自己的愛好選擇一個字體的名字。

5.下載字體文件

單擊“ Download”下載字體包到電腦上。它有一個文件夾包含了字體本身（ woff、 eot、 ttf 格式），以及一個HTML示例頁面和相應(yīng)的CSS。甚至還有一個 JavaScript 文件和 一個解決方法，如果 需要支持IE或 IE7， 將font文件 復(fù)制到網(wǎng) 站， 為項(xiàng)目添加字體。 需要從 style. css 文件中復(fù)制 CSS 樣式， 并粘貼到自己網(wǎng)站的CSS文件中， 但是可以要將它重命名為 fonts. css， 并保持它作為一個 單獨(dú) 的 CSS 文件。 需要 的 時候 再把 這個 CSS 文件 引入 到 HTML 中。<linkrel="stylesheet"href="fonts.css"/>在CSS文件中可以找到@font-face需要將URL路徑修改成本地的相對路徑，或者可以簡單地把字體文件和樣式放在同一個文件夾。

調(diào)用字體樣式：

文件 index. html，有兩種方法可以調(diào)用， 

一種是通過字符（unicod 或 名稱），

另一種是通過類名。首先，使用HTML5的自定義屬性data- icon。

第二種方法

使用 一個span元素。 <span aria-hidden="true"></span> 如果想讓圖標(biāo)具有鏈接功能， 可以將其放在一個鏈接中。< a href=" http:// www. w3cplus. com" data-icon="&# x73;"></ a> 這里，添加一個 iconlink類名， 并設(shè)置一個懸浮效果。

到此，相信大家對“怎么使用CSS3嵌入Web字體”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！