web引入font字体文件太大，字体抽取

喜欢ヅ旅行 2021-09-08 20:48 427阅读 0赞

当只有一个活动页面或者一小段文字需要引入特殊字体，字体文件往往会有十几兆或者几十兆，特别在移动端或者弱网情况下有相当差的体验，一个14M左右的文件就需要加载12秒...

![20210630101210972.png][]

所以针对一些小范围使用字体文件或者页面变化不大的项目可以考虑把常用字体抽取出来再生成一个小的字体文件，再进行引入。

发现 fontmin 这个框架比较符合需求，它是第一个纯 JavaScript 字体子集化方案，可以使用node命令或者可视化窗口的形式进行操作

官网地址：[http://ecomfe.github.io/fontmin/\#banner][http_ecomfe.github.io_fontmin_banner]

github地址：[https://github.com/ecomfe/fontmin][https_github.com_ecomfe_fontmin]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

800多kb生成后的字体文件只有十几kb，最后在项目中引入即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1][]

如果是整个web网站使用不适合，建议使用cdn加速的字体库 或者寻找其他方案

[20210630101210972.png]: /images/20210813/df85df83b861477cbf15976bda98a9d5.png
[http_ecomfe.github.io_fontmin_banner]: http://ecomfe.github.io/fontmin/#banner
[https_github.com_ecomfe_fontmin]: https://github.com/ecomfe/fontmin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210813/ebb34292eaba49759ad6ca60996c60a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20210813/a4e359b94abc48b59eed02bc76936d82.png

发表评论取消回复

表情：

评论列表（有 0 条评论，427人围观）

还没有评论，来说两句吧...

相关阅读

相关字体(FONT)标记(TAGS)

标题字体(Header) <h\> ... </h\> \=1, 2, 3, 4, 5, 6 <h1>今天天气真好！</h1> 今天天气真好！ <h2>今天

绝地灬酷狼/ 2022年09月20日 11:29/ 0 赞/ 215 阅读

相关 css 图标字体 Font Awesome

目前我展示没有成功 .icon-close:before { content: "\e90c"; } ![请添加图片描

曾经终败给现在/ 2022年09月11日 01:26/ 0 赞/ 291 阅读

相关 font字体图标

font 字体图标能够网页添加别致的字体风格样式，而且也能够起到在不同浏览器中统一字体风格的作用。它的扁平化设计，将网页从冗余、厚重和繁杂的装饰效果中解脱出来；它的

落日映苍穹つ/ 2022年07月13日 15:08/ 0 赞/ 277 阅读

相关 @face-font调用服务器字体

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

青旅半醒/ 2022年07月12日 01:22/ 0 赞/ 242 阅读

相关 angular4中引入font-awesome字体图标

引入font-awesome（3种方式实现引入你的项目当中）地址：http://fontawesome.dashgame.com/ 首先安装字体依赖文件 npm

迈不过友情╰/ 2022年05月27日 07:05/ 0 赞/ 227 阅读

相关 css3字体@font-face

字体对[该文章][Link 1]的理解：文章转自[http://www.w3cplus.com/content/css3-font-face][Link 1] 1、@fo

╰+哭是因爲堅強的太久メ/ 2022年05月10日 12:14/ 0 赞/ 193 阅读

相关在nuxt中引入Font Awesome字体图标库

介绍在element-ui框架中提供了一些图标样式，但是种类比较少，所以在这里提供一套更完善的字体图标库Font Awesome（[官方文档][Link 1]），下面就

柔情只为你懂/ 2022年05月09日 09:38/ 0 赞/ 396 阅读

相关【CSS】 fonts （字体）

所有CSS字体属性 font 在一个声明中设置所有的字体属性 font-family 指定文本的字体系列 font

刺骨的言语ヽ痛彻心扉/ 2022年04月11日 04:50/ 0 赞/ 293 阅读

相关 web引入font字体文件太大，字体抽取

当只有一个活动页面或者一小段文字需要引入特殊字体，字体文件往往会有十几兆或者几十兆，特别在移动端或者弱网情况下有相当差的体验，一个14M左右的文件就需要加载12秒... ![

喜欢ヅ旅行/ 2021年09月08日 20:48/ 0 赞/ 428 阅读

相关 css网络字体@font-face

@font-face 首先获取要使用字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体。 .TTF或.OTF，适用于Firefox 3.5、Saf

红太狼/ 2020年06月22日 16:27/ 0 赞/ 858 阅读