【CSS】iconfont的使用

說到瀏覽器對@font-face的兼容問題，這里涉及到一個字體format的問題，因為不同的瀏覽器對字體格式支持是不一致的，這樣大家有必要了解一下，各種版本的瀏覽器支持什么樣的字體，前面也簡單帶到了有關字體的幾種格式，下面我就分別說一下這個問題，讓大家心里有一個概念：

一、TureTpe(.ttf)格式：

.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，因此他不為網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字體是IE專用字體，可以從TrueType創建此格式字體,支持這種字體的瀏覽器有【IE4+】；

五、SVG(.svg)格式：

.svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

這就意味着在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達到更多種瀏覽版本的支持。

為了使@font-face達到更多的瀏覽器支持，Paul Irish寫了一個獨特的@font-face語法叫Bulletproof @font-face，實現的步驟如下：

第一步：使用font-face聲明字體，要使用css3的@font-face引入字體，包括字體的eot  ttf  woff  svg格式，以及相應的format樣式，分別對應embedded-opentype、truetype、woff、svg。

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

第二步：定義使用iconfont的樣式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;/*字體清除鋸齒效果*/
    -webkit-text-stroke-width: 0.2px;/*文本外邊框大小*/
    -moz-osx-font-smoothing: grayscale;}

第三步：挑選相應圖標並獲取字體編碼，應用於頁面

<i class="iconfont">&#x33;</i>

阿里矢量圖標庫:http://www.iconfont.cn/

圖標的下載和使用：

1.首先在 Iconfont-阿里巴巴矢量圖標庫上面將你需要的圖標點擊購物車按鈕加入“暫存架”
2.選擇完所有要用的圖標后“存儲為項目”，給它命名。然后在“圖標管理”-“圖標應用項目”中找到這個項目。

3. 獲取在線鏈接，把里面的代碼復制到CSS中

 

 

3.在HTML中需要使用到圖標時，使用iconfont類名。

<i class="iconfont">&#xe604;</i>     <!--里面寫上你想用的圖標下面的Unicode-->

4.然后可以通過控制iconfont類的屬性改變圖標的樣式

.iconfont{
    font-family:"iconfont";
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale; 
        padding-left:20px
}

就可以在頁面中引用和修改了。

 

補充：這些圖標也可以 下載到本地使用。

圖標都加入暫存架后選擇“下載到本地”，會得到以下幾個文件：

瀏覽器打開三個demo_xxx.html可以使用步驟，選擇一種方法使用即可；

下載使用的一個缺點是添加圖標的話要重新把所有圖標再下載一遍覆蓋原來的文件，如果是在線鏈接只要重新生成一次鏈接就好了。

參考鏈接： https://www.zhihu.com/question/25952487/answer/71917554