不同瀏覽器對字體文件的支持不一樣 這里只給出支持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中引入多個文路徑時, 瀏覽器可能會只識別最后一個路徑