CSS3 Web嵌入字體

CSS3嵌入Web字體
一直以來Web設計師在設計網頁時都想為Web頁面添加一些優雅的字體，但瀏覽器僅限于使用用戶在其系統上安裝的字體呈現文本，這樣一來讓大部分網站受限于字體數量的不足。多年來一直都是使用圖片替換文本的方式來解決頁面上使用優雅字體，但這種對于頻繁更換文本的網站來說是一件不切實際的事，以致于我們堅持使用這些少量的Web字體。隨著技術的不斷發展，出現在Web頁面中 使用Flash和JavaScript技術來彌補這一不足。雖然這些方法已經是不錯的應急措施， 允許包含自己的字體，但是它們擁有很嚴重的缺陷。有時候它們很難實現，因為它們要求用戶在本地啟用 JavaScript或者 Flash插件。值得慶幸的一件事情是， 可以使用@font-face模塊來解決Web頁面中使用優雅字體的方式。 @font-face模塊介紹：
br/>@font-face模塊介紹：
服務器上，瀏覽器會根據指定的命令將對應的字體下載到本地緩存， 使用它來修飾文本。也常常把這種方式 稱為Web字體嵌入（實際上并沒有什么字體被嵌入）。@font-face語法：
br/>@font-face語法：
有了@font-face模塊， 只要將字體傳入到服務器端，不管用戶端是否安裝了對應的字體， 設計的網頁都能夠正確顯示，用較為專業的話來講，@font-face能夠加載服務器端的字體， 讓客戶端瀏覽器 顯示客戶端沒有安裝的字體。 如果沒有@font-face， 客戶端瀏覽器只能在客戶系統中尋找指定的字體， 這樣一來給設計師帶來極大的限制。@font-face能加載服務器端的字體，讓客戶端瀏覽器尋找 到對應的字體，使用中具有一套成熟的語法規則。
@font- face { font- family:< YourWebFontName>;
src: < source>[< format>][< source>[< format>]]*;
[font- weight:< weight>];
[font- style:< style>]; }
取值說明如下：

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