时间：2023-05-28 17:54:02 | 来源：网站运营
时间：2023-05-28 17:54:02 来源：网站运营
前端自定义兼容字体快速教程：
在线咨询
<!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"; /*这个名字必须和我们的字体使用名字一致*/ 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>然后再在根目录执行终端操作font-spider index.html你会发现原本的2M字体包瞬间就变成几KB，而且还额外生成了对应的其他格式的字体包！保证了兼容性！关键词：字体,教程,定义
