web前端自定義字體實現


不同瀏覽器對字體文件的支持不一樣 這里只給出支持ttf文件格式的瀏覽器如谷歌的實現

1.新建html文件  代碼如下

2.在相同目錄下新建css文件 命名為font.css

3.找到你需要的字體的ttf文件   如SingleMalta.ttf 

4.使用@font-face這個模塊來將自定義字體引用到自己的項目中來

   @font-face寫在css中 如下

這里的url路徑寫的是絕對路徑 

5.可以看出我們的自定義字體名叫firstfont ,而這個自定義字體正好在1中的h1的樣式中有用到

6.效果如圖

補充:如果瀏覽器需要使用此字體的其他格式的文件可以在點擊這個網址上傳你的ttf格式的文件可以轉化成其它格式的工其他瀏覽器使用,在src中引入多個文路徑時, 瀏覽器可能會只識別最后一個路徑

 


免責聲明!

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



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