[聊一聊系列]聊一聊iconfont那些事兒

時間 2019-11-06

標籤系列 iconfont 那些事兒简体版

原文原文鏈接

歡迎你們收看聊一聊系列，這一套系列文章，能夠幫助前端工程師們瞭解前端的方方面面（不只僅是代碼）：
https://segmentfault.com/blog/frontenddrivercss

1. 從FONT-FACE提及

要想了解iconfont，得從一個新的css3規則提及。css3中，新增了一種樣式規則，@font-face，這個規則能夠用來引入自定義的字體，到客戶端。之前，咱們的字體只能放任客戶端的。由於用戶沒有安裝的話，咱們強制要求顯示也沒有辦法。
如今使用@font-face則能夠引入在web服務器上存放的字體文件，從而達到，可使用一些客戶端瀏覽器上不存在的字體，等到瀏覽器去訪問並渲染時，去下載font-face指定的字體。並命名爲咱們想要的字體。如圖1.1：html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            @font-face {
                font-family: myfont;
                src: url('./myfont.otf');
            }   
            .usefont {
                font-family: myfont;
            }   
        </style>
    </head>
    <body>
        <h1 class="usefont">
            測試1
        </h1>
        <h1>
            測試2
        </h1>
    </body>
</html>

圖1.1前端

上面的自已個h1中使用的，正是咱們存在服務端的字體。因爲各個瀏覽器的兼容性問題，css3

1.IE瀏覽器：EOT
2.Mozilla瀏覽器：OTF，TTF
3.Safari瀏覽器：OTF，TTF，SVG
4.歌劇：OTF，TTF，SVG
5.Chrome瀏覽器：TTF，SVGgit

因此，咱們須要準備多個格式的不一樣的字體文件。指代同一份字體。github

@font-face {
    font-family: 'icons';
    src: url(../font/curiconfont.eot#iefix) format('embedded-opentype'),
         url(../font/curiconfont.woff) format('woff'),
         url(../font/curiconfont.ttf) format('truetype'),
         url(../font/curiconfont.svg?#iconfont) format('svg');
    font-weight: normal;
    font-style: normal;
}

後面的format指代的是牆面的資源是那種格式的。如想更詳細瞭解，能夠百度一下font-face。上面提到的例子能夠在github上的hellofontface.html中找到。web

2 什麼是iconfont

既然font-face能夠指定字體文件，那麼字體長成什麼樣，不就是開發者說的算了麼。咱們能夠描述一個字體，它長成這樣：。其實，話說回來，文字不就是圖像麼。人類最先發明文字的時候就是按照圖像來發明的。因此，咱們能夠把一些字符，描述成圖像。在咱們的網頁上，當成圖像來使用。這就是iconfont了。把一些零散的icon作成字體。咱們調用文字的時候，渲染出來的就是icon圖像了。segmentfault

3 iconfont怎麼用

咱們來拿手機百度首頁的字體作個小例子試試(如圖3.1)，咱們新加入一個font-face，起名爲myFont，在須要使用這份iconfont的部分，font-family設置爲myFont，則這部分區域可使用上該font文件:瀏覽器

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            @font-face {
                font-family: myfont;
                src: url('http://m.baidu.com/static/index/iconfont/iconfont_c0634602.woff');
            }   
            .usefont {
                font-family: myfont;
            }   
        </style>
    </head>
    <body>
        <h1 class="usefont">
            &#xe609;
        </h1>
        <h1>
            &#xe609;
        </h1>
    </body>
</html>

圖3.1
咱們看到咱們在網頁上寫了一個字符，原本這個字符對應的文字應該是什麼都沒有：
可是，咱們的iconfont中賦予了這個字符的圖像：，因而，咱們將這個字符所在的區域的字體，設置爲咱們的iconfont文件。因而瀏覽器就渲染出了這個字符在咱們的font文件中，對應的圖像。這裏要注意一下---- ，是一個字符的html編碼。這個字符在瀏覽器中沒有定義，可是在iconfont中有定義。咱們可使用unicode碼來惟一標識一個字符，將這個字符在咱們的文件中畫出來。這樣就能夠利用上iconfont了。服務器