@font-face使用

1.下載下傳需要的圖示檔案，一般需要4個字型檔案，提供一個網址：https://icomoon.io/#icons（網上還有很多）。

下載下傳到字型檔案後會得到一個壓縮包，裡面有需要的東西,可以檢視裡面的style.css獲得詳細用法。下面是我的方法：

1.html實體+font

首先得定義

@font-face{
    font-family:myfont;//這個可以自定義
    src:url("font/icomoon.eot");//url為字型位址，這行代碼相容ie9
    src: url(fonts/icomoon.eot?#iefix) format("embedded-opentype")
        ,url(fonts/icomoon.woff) format("woff")
        ,url(fonts/icomoon.tff) format("truetype")
        ,url(fonts/icomoon.svg) format("svg");
    font-weight: normal;
    font-style: normal;
}
           

聲明之後就可以使用字型了，但還的獲得字型圖示對應的實體。



類似于這樣的字元串，下載下傳字型時會告訴。

2.使用css樣式設定。使用:before或after僞類實作

設定字型圖示容器，例如：

<i class="icon"><i/>
<style>
    .icon{
        font-family:"myfont";
    }
    .icon:before{
        content:"/e950";
    }
</style>
           

這樣就可以是用了。

3.利用字型庫提供的css類，已我上面提到的網站

<link rel="stylesheet "href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" target="_blank" rel="external nofollow" >

首先導入提供的css檔案，其托管cdn上,如下使用其提供的類設定圖示，具體類名網站上有，其做法類似于第二種。

w3Schools 提供的浏覽器支援表