在css中引用特殊字體

在瀏覽器中引用特殊字體時,

要將字體先下載到我們的電腦上,然後將字體文件放置至項目中。

接下來在css中引用字體時,

1、.EOT,適用於Internet Explorer 4.0+

2、.TTF或.OTF,適用於Firefox 3.5、Safari、Opera

3、.woff,適用於Chrome、IPhone

最常見的是.TTF文件,我們需要通過這種文件格式轉換爲其餘兩種文件格式。

轉換字體網址:https://everythingfonts.com/font-face

可以迅速   直接生成    各類其他格式的字體文件;

有很多網站除了文件過大無法轉換,要不就是轉換過慢。

/*首先對字體進行引用*/

@font-face {

    font-family: 'ArialMT';/*這裏填寫字體名*/

    src: url('ArialMT.eot');

    src: local('ArialMT Regular'),

        local('ArialMT'),

        url('../../font/ArialMT.woff') format('woff'),  // 適用於chrome、safri

        url('../../font/ArialMT.ttf') format('truetype'), 

        url('../../font/ArialMT.svg#ArialMT') format('svg');

}

.num{

       font-family: ArialMT;

}

至此,就可以在瀏覽中顯示了。

 

https://everythingfonts.com/font-face

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章