css自定義字體----使用外部字體文件


css外部自定義字體

 

給大家分享一個使用的css小技巧!記得收藏呀!

相信大家在瀏覽各種網站會見到各種奇形怪狀花里胡哨的文字,還有就是一些瀏覽器兼容性問題,不會支持一些特殊的字體!

給大家分享一個極其簡單的css引入外部字體的方法:@font-face

我們可以通過這個方法來實現個性化的字體樣式啦!

 

 

 

 

@font-face

1.在css中引入@font-face,然后可以使用通配符通過font-family來實現全局字體樣式設置,
當然也可以通過class來實現單個的文字樣式!
全局使用:
@font-face{
             font-family:myFont;//給單個字體任意起一個名字
             src:url('rajdhani-bold.otf');//文字字體樣式文件路徑
    }


*{ font-family: myFont;//這里使用的和@font-face起的名字要是一樣的 }


單個使用:

我們可以建一個css文件來把所有需要用到的字體樣式通過@font-face全局引入進來,然后在單個css里使用font-family:字體名稱 ,來使用;


單個標簽設置單個字體樣式:

 

 
         

 

 
         

建立的css文件:

 
         

 

 

 

 

注意:我們可以聲明使用多個@font-face,需要注意的是每個@font-face里的font-family要設置不同的名字

 

我們來看一下實現的效果:

 

 

 使用字體和沒有使用的對比:

 

 

 

 

2.下載我們需要的字體

  這里就沒有什么好說的了,
  我們網上拔下來一些裝x的字體或者是找我們可愛的設計給我提供需要的字體就可以了。
  
  不過需要注意的就是字體文件格式,我使用的是.otf,
  有的一些瀏覽器支持的可能會不一樣我們找一些轉換工具轉一下就可以了!


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM