時(shí)間：2023-05-28 17:54:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-05-28 17:54:02 來源：網(wǎng)站運(yùn)營
前端自定義兼容字體快速教程：
在線咨詢
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> @font-face { font-family: "QIJIFALLBACK"; /*重命名了字體包*/ src: url("./mm.ttf"); } body { font-family: "QIJIFALLBACK"; } </style> </head> <body> 本站測試 </body></html>然后我們再去查看下頁面效果就有啦！npm install font-spider -g全局安裝后我們來到index.html,修改代碼如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> @font-face { font-family: "QIJIFALLBACK"; /*這個(gè)名字必須和我們的字體使用名字一致*/ src: url("./mm.woff2") format("woff2"), /*雖然沒有這些文件，但我們依然寫上*/ url("./mm.woff") format("woff"), url("./mm.ttf") format("truetype"), url("./mm.eot") format("embedded-opentype"), url("./mm.svg") format("svg"); font-weight: normal; font-style: normal; } body { font-family: "QIJIFALLBACK"; } </style> </head> <body> 本站測試 </body></html>然后再在根目錄執(zhí)行終端操作font-spider index.html你會(huì)發(fā)現(xiàn)原本的2M字體包瞬間就變成幾KB，而且還額外生成了對(duì)應(yīng)的其他格式的字體包！保證了兼容性！關(guān)鍵詞：字體,教程,定義
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
