CSS3 Web嵌入字體

CSS3嵌入Web字體
一直以來Web設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁時(shí)都想為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)是不錯(cuò)的應(yīng)急措施， 允許包含自己的字體，但是它們擁有很嚴(yán)重的缺陷。有時(shí)候它們很難實(shí)現(xiàn)，因?yàn)樗鼈円笥脩粼诒镜貑⒂?JavaScript或者 Flash插件。值得慶幸的一件事情是， 可以使用@font-face模塊來解決Web頁面中使用優(yōu)雅字體的方式。 @font-face模塊介紹：
br/>@font-face模塊介紹：
服務(wù)器上，瀏覽器會(huì)根據(jù)指定的命令將對應(yīng)的字體下載到本地緩存， 使用它來修飾文本。也常常把這種方式 稱為Web字體嵌入（實(shí)際上并沒有什么字體被嵌入）。@font-face語法：
br/>@font-face語法：
有了@font-face模塊， 只要將字體傳入到服務(wù)器端，不管用戶端是否安裝了對應(yīng)的字體， 設(shè)計(jì)的網(wǎng)頁都能夠正確顯示，用較為專業(yè)的話來講，@font-face能夠加載服務(wù)器端的字體， 讓客戶端瀏覽器 顯示客戶端沒有安裝的字體。 如果沒有@font-face， 客戶端瀏覽器只能在客戶系統(tǒng)中尋找指定的字體， 這樣一來給設(shè)計(jì)師帶來極大的限制。@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： 前者用來指定字體是否為粗體，后者主要定義字體樣式，如斜體。除了這兩個(gè)屬性之外， 類似的屬性還有 font-variant、 font- size、 font-stretch 等。
   使用字體圖標(biāo)的優(yōu)勢：
   使用字體圖標(biāo)和位圖， 它自身更具有哪些優(yōu)勢呢？
5. 適用性： 一個(gè)圖標(biāo)字體比一系列的圖像（特別是在Retina屏中使用雙倍大小的圖像）要小。一旦圖標(biāo)字體加載了，圖標(biāo)就會(huì)馬上渲染出來， 不需要下載任何圖像。
6. 可擴(kuò)展性： 圖標(biāo)字體可以用過font-size屬性設(shè)置大小。 能夠隨時(shí)輸出不同大小的圖標(biāo)，然而，使用位圖必須為每個(gè)不同大小的圖像輸出一個(gè)不同文件。
7. 靈活性： 文字效果可以很容易地應(yīng)用到圖標(biāo)上，包括顏色、陰影和翻轉(zhuǎn)等效果。它們還可以在任何背景下顯示。
8. 兼容性： 網(wǎng)頁字體支持所有現(xiàn)代瀏覽器，包括低版本IE。實(shí)現(xiàn)@font-face：
   br/>實(shí)現(xiàn)@font-face：
   使用@font-face自定義字體
   正常使用@font-face自定義字體， 必須滿足以下幾個(gè)關(guān)鍵點(diǎn)：
9. 將各種格式字體上傳到服務(wù)器上， 以支持各種瀏覽器；
10. 在@font-face中顯式指定自定義字體名稱以及引用自定義字體的字體來源。
    font-family和src都是必需的，通過font-family來自定義字體，而src是引用自定義字體的來源。當(dāng)然，除了這兩個(gè)屬性之外，還可以在@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來自定義字體名稱，而這個(gè)自體名稱可以是任意的名稱或形式，它僅用于元素樣式中的font-family屬性引用。 當(dāng)然，使用的字體名稱最好與引用的字體文件名相同，用于保持CSS的可讀性，可維護(hù)性。上面通過@font-face聲明了字體名“NeuesBauenDemo”，但并不會(huì)有任何實(shí)際效果，如果想讓W(xué)eb中的文本字體是NeuesBauenDemo，需要在樣式代碼塊中的對應(yīng)元素中引用@font-face定義好的字體，@font-face和@keyframes一樣，一個(gè)@font-face規(guī)則僅自定義一個(gè)字體， 如果需要自定義多個(gè) 字體就需要對應(yīng)啟用多個(gè)@font-face規(guī)則，
    聲明字體來源：
    @font-face規(guī)則中有一個(gè)非常重要的參數(shù)，就是src，這個(gè)屬性類似于img標(biāo)簽中的src屬性，其值主要是用于鏈接到實(shí)際的字體文件。此外，可以聲明多個(gè)來源，如果客戶端的瀏覽器未能找到第一個(gè) 來源，它會(huì)依次嘗試尋找后面字體來源，直到找到一個(gè)可用的字體來源為止，每種字體都有其具體作用和格式，
11. TureType(. ttf) 格式 TureType(. ttf) 格式字體是 Windows 和 iOS 的最常見的字體， 是 一種RAW格式。
12. OpenType(. otf) 格式 OpenType(. otf) 格式字體被認(rèn)為是一種原始的字體格式， 其內(nèi)置在TureType的基礎(chǔ)上， 所以也提供更多的功能，
13. Web Open Font Format(. woff) 格式 Web Open Font Format(. woff) 格式字體是Web字體中最佳格式， 它是一個(gè)開放的 TrueType/ OpenType 的壓縮版本， 同時(shí)也支持元數(shù)據(jù)包的分離
14. Embedded Open Type(. eot) 格式 Embedded Open Type(. eot) 格式字體是 IE專用字體， 可以從 TrueType 中創(chuàng)建此格式字體
15. SVG(. svg) 格式SVG(. svg) 格式字體是基于SVG字體渲染的一種格式，
    這就意味著在@font-face中至少需要“. woff”和“. eot”兩種格式字體， 甚至還需要“. svg” 等字體以得到更多種瀏覽版本的支持。 為了使@font-face 得到更多的瀏覽器支持， Paul Irish 寫了 一個(gè)獨(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)建一個(gè)圖標(biāo)字體：
    Symbol(符號)字體可以使用一個(gè)專用的字體創(chuàng)建應(yīng)用程序， 比如說 Glyphs(雕文)，但是一個(gè)專業(yè)的排版工具之外的需求或要求構(gòu)建一個(gè)簡單的圖標(biāo)字體，比如說 間中攻粗細(xì)這樣的物理關(guān)系并不是非常重要。目前為止，最簡單的方法是使用Keyamoon制作的一個(gè)Web應(yīng)用程序IcoMoon，可以解決字符轉(zhuǎn)換成Web字體的所有麻煩。IcoMoon附帶了大量的圖標(biāo)， 可以通過圖標(biāo)庫添加更多的圖標(biāo)，其中 大部分都可以免費(fèi)使用（使用時(shí)請先查看它們的許可證）。如果你正在尋找如“ 文件下載”和“ 購物車” 一樣的圖標(biāo)，那么你會(huì)發(fā)現(xiàn)， 使用標(biāo)準(zhǔn)的圖標(biāo)比你自己創(chuàng)建要方便得多。
    準(zhǔn)備插圖：
    首先，需要能創(chuàng)建矢量圖標(biāo)的程序，并且能夠找到輸出SVG格式，比如Illustrator或者iNkscape。 設(shè)計(jì)的時(shí)候，可以使用任何你喜歡的顏色，但是圖標(biāo)必須是一個(gè)純色。確保每個(gè)圖標(biāo)的尺寸大小是相同的。若某一個(gè)圖標(biāo)相較其他的更高或者更寬，會(huì)導(dǎo)致很難創(chuàng)建一個(gè)一致的字體。在這里，我們不得不減少飛艇圖標(biāo)的寬度，以使它能匹配其他圖標(biāo)
16. 清理圖標(biāo)
    仔細(xì)檢查每一個(gè)圖標(biāo)，以確保它們沒有缺陷—圖標(biāo)在小尺寸的時(shí)候可能看著是完美的，當(dāng)放大后會(huì)發(fā)現(xiàn)一些小的缺陷。在(AI)Illustrator中，使用Pathfinder工具統(tǒng)一層疊元素， 減去前面元素， 比如圖標(biāo) 中的星星圖標(biāo)。 原則是確保圖標(biāo)是可讀的小尺寸。
17. 導(dǎo)成SVG文件
    現(xiàn)在，選擇一個(gè)圖標(biāo)并將它復(fù)制粘貼到一個(gè)新的文檔場景中（如200px*200px）。會(huì)發(fā)現(xiàn)它有一個(gè)基線尺寸的設(shè)置。使用彩色的圖標(biāo)，比如說在白色的背景中使用黑色的圖標(biāo)?，F(xiàn)在，選擇菜單“文件”中“保存”，將選擇將文件保存成SVG文件格式。使用默認(rèn)的SVG設(shè)置。一旦這樣做，所有的圖標(biāo)可以創(chuàng)建為一個(gè)Web字體。
18. 導(dǎo)入到 IcoMoon
    打開 IcoMoon Web App 。導(dǎo)入一個(gè)圖標(biāo)，點(diǎn)擊“ Import icons”按鈕，然后選擇想要添加的SVG文件— 可以一次添加多個(gè)文件。 這些圖標(biāo)將會(huì)出現(xiàn)在“ Your Custom Icons” 區(qū)域中。 如果它們 是高亮的×××顯示，表示這些圖標(biāo)是將要?jiǎng)?chuàng)建的圖標(biāo)字體。
19. 從IcoMoon中導(dǎo)出字體
    想調(diào)整圖標(biāo)的位置、大小或旋轉(zhuǎn)，可以點(diǎn)擊“ Edit” 按鈕， 使用“ Save Copy” 保存圖片（ 如鏡像圖標(biāo)）。 然后添加一個(gè)有意義的圖標(biāo)標(biāo)記， 將用來生成類 名。 都準(zhǔn)備好了， 點(diǎn)擊屏幕底部的“ Font” 按鈕開始生成字體。 這樣就可以指定圖標(biāo)映射到字符上，例如， 設(shè)置一套六個(gè)旋轉(zhuǎn)的球， 可以給這六個(gè)球分別指定字符 q、 w、 e、 r、 t 和 y。 也可以根據(jù)自己的愛好選擇一個(gè)字體的名字。
    5.下載字體文件
    單擊“ Download”下載字體包到電腦上。它有一個(gè)文件夾包含了字體本身（ woff、 eot、 ttf 格式），以及一個(gè)HTML示例頁面和相應(yīng)的CSS。甚至還有一個(gè) JavaScript 文件和 一個(gè)解決方法，如果 需要支持IE或 IE7， 將font文件 復(fù)制到網(wǎng) 站， 為項(xiàng)目添加字體。 需要從 style. css 文件中復(fù)制 CSS 樣式， 并粘貼到自己網(wǎng)站的CSS文件中， 但是可以要將它重命名為 fonts. css， 并保持它作為一個(gè) 單獨(dú) 的 CSS 文件。 需要 的 時(shí)候 再把 這個(gè) CSS 文件 引入 到 HTML 中。<linkrel="stylesheet"href="fonts.css"/>在CSS文件中可以找到@font-face需要將URL路徑修改成本地的相對路徑，或者可以簡單地把字體文件和樣式放在同一個(gè)文件夾。
    調(diào)用字體樣式：
    文件 index. html，有兩種方法可以調(diào)用，
    一種是通過字符（unicod 或 名稱），
    另一種是通過類名。首先，使用HTML5的自定義屬性data- icon。
    第二種方法
    使用 一個(gè)span元素。 <span aria-hidden="true"></span> 如果想讓圖標(biāo)具有鏈接功能， 可以將其放在一個(gè)鏈接中。< a href=" http:// www. w3cplus. com" data-icon="&# x73;"></ a> 這里，添加一個(gè) iconlink類名， 并設(shè)置一個(gè)懸浮效果。