关于前端:可能是东半球最好的-Web-Font-优化方式中文网字计划

中文网字打算是收录泛滥中文字体并通过 Web Font 的模式为 网站开发者 提供漂亮字体的我的项目。

中文网字打算致力于在互联网中提供更加便捷实用的全字符集中文渲染计划。中文网字打算通过精美设计的字体分包形式，将宏大的字体文件切割为多个小型动态分包部署于云端，在全网畛域内都可快捷、稳固地进行加载。为进步中文字体在网络中的流通体验而致力！

为什么要应用独特的中文字体

• 进步艺术风格的表现力

前端畛域是信息出现最为丰盛、格调最为灵便的一个技术畛域。它不仅包含了各种以文本为主的新闻、博客、论坛网站，还涵盖了各类活泼灵便的数据可视化网站，以及格调别致的网页小游戏。在许多重视体现细节网站中，中文字体的作用不容小觑。例如在像素游戏应用像素字体来合乎整个游戏世界观，数据可视化网站中使用非凡装璜字体来出现主题所表白的情感，在集体博客中也有使用飘逸轻捷的字体来展示集体的艺术谋求的例子。能够说，抉择适宜的字体是使得网页出现独特格调的要害因素之一。

• 进步产品的格调辨识度和国内对立度

中文字体可能无效地出现品牌形象，进步产品的辨识度，帮忙产品更好地传递本人的理念和价值观。中文字体在不同的设计元素中也有着其独特的利用。

举例来说，米哈游开发的原神中采纳 汉仪文黑字体，它在中、日、韩、英四种语言环境下体现出统一的艺术风格和文字表现力。即便在同一图片中出现也没有违和感，这对于不同语言玩家在游戏中的视觉效果和用户体验来说具备十分强烈的晋升。

在以后的互联网环境中，英文字体的利用曾经十分广泛。因为英文字符数量较少，因而加载整个字体包并不会对网页造成影响。然而，中文字符与英文字符相比，其数量和轮廓复杂度都更高。因而中文字体体积较英文字体大十分多，而且加载中文字体往往会占用大量的网络带宽。对于原生应用程序来说，能够通过内置字体包等形式解决这个问题，但这个弱点对于 Web 网页加载则是致命的。

如何实现 Web 场景下的网络字体减速

手动、主动切割字体文件

目前一种在网页中应用中文字体的办法是剖析网页所蕴含的中文字符，将 字体切割 进去，独自分包存储在服务器中。这种切割形式能够极大地减小字体大小对带宽的影响，实用于集体博客等类型的网站。然而，随着一个我的项目越来越大，所须要进行的切割文本越来越多，采纳这种非全量级的加载形式，可能会导致不同的文章波及的文字不同，从而造成打包字符区间不同，影响服务器的缓存和资源利用率。常见的工具有：字蛛、fontmin、fonttools 等

毛病：须要手动执行、只实用于动态场景、影响缓存效率

Google fonts 计划

在 Google Fonts 网站中，Google 采纳最新的 CSS 个性 unicode-range 来实现按需加载 CJK（中日韩）字体，并胜利地实现了中文字体在网页端的全量级按需加载。同时提供了如站酷系列、Noto 系列等字体的成果展现。从技术上看，所有加载文件为动态文件，能够通过 CDN 一次公布，随处加载，且具备牢靠的速度和稳定性。即便如博客论坛等专一长文本类型的网站，也可应用。但受限于版权问题，Google Fonts 中仅有开源字体，如果须要非凡字体须要进行自托管

https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@900&family=Roboto:wght@100&display=swap

毛病：分包较大、国内拜访不佳或须要代理、须要自托管

中文网字打算计划

中文网字打算在 Google Fonts 的切割计划的根底之上，对字体的应用程序进行了排序分类，优化了各类字符的分包区间，并可应用更加疾速的寰球 CDN 服务，实现了近乎完满的中文字符落地计划。同时，打算中所开源的的开发工具流曾经能够无缝融入前端开发，为中文字体在网络中的应用提供实践和技术上的反对。

建设本人的字体服务

上方介绍了三种不同的字体优化形式，现联合「中文网字打算」中的开源模块对字体进行优化

临时无奈在飞书文档外展现此内容

剖析

这里取「阿里巴巴普惠体 3.0」进行测试，首先能够应用字体剖析工具对字体进行剖析

在线剖析工具：https://chinese-font.netlify.app/analyze/

离线剖析工具：https://www.npmjs.com/package/font-analyze

能够看出，在 AlibabaPuHuiTi-3-55-Regular 文件的版权信息，同时中文文字覆盖率信息很好，CJK 覆盖率个别

切割

@konghayao/cn-font-split 是一个基于 Node.js 的字体分包器，可能将起源字体文件分成多个包，并且提供附带成绩预览和数据分析性能。中文网字体打算应用 @konghayao/cn-font-split 作为外围，构建了一系列字体的分包成品。如果您须要对公有字体进行简略分包和动态部署，抉择它再适宜不过了。

在线切割工具

https://chinese-font.netlify.app/online-split/

在线工具可通过提交字体进行分包解决，借助 WebAssembly、多线程等技术优化，使得其能够运行在任何规范的 Nodejs 或者是 Web 环境中执行，这意味着所有古代浏览器都能够进行分包。

这里看到分包后果是以 woff2 进行输入的，同时分包后文件大小比源字体还小很多。起因如下：

在古代字体中，WOFF2 是最新的，领有最宽泛的浏览器反对，并提供最好的压缩。因为应用 Brotli，WOFF2 的压缩率比 WOFF 进步了 30%，从而缩小了下载数据，从而进步了性能。

离线切割工具

https://www.npmjs.com/package/@konghayao/cn-font-split

装置

npm install @konghayao/cn-font-split

执行脚本

import {fontSplit} from '@konghayao/cn-font-split';
// import {fontSplit} from "@konghayao/cn-font-split/dist/browser/index.js";
// import {fontSplit} from "https://cdn.jsdelivr.net/npm/@konghayao/cn-font-split@4.3.6/dist/browser/index.js";
fontSplit({
    FontPath: './fonts/SourceHanSerifCN-Bold.ttf', // 局部 otf 文件会报错，最好应用 ttf 版本的字体
    destFold: './build',
    targetType: 'woff2', // ttf woff2；留神 eot 文件在浏览器中的反对度非常低，所以不进行反对
    chunkSize: 70 * 1024, // 如果需要的话，本人定制吧
    testHTML: true, // 输入一份 html 报告文件
    reporter: true, // 输入 json 格局报告
    // previewImage: {}, // 只有填入 这个参数，就会进行图片预览文件生成，文件为 SVG 格局
    threads: {}, // 倡议开启多线程
    css: {
        // 笼罩默认的 css 设置，个别不须要进行更改
        // fontFamily: "站酷庆科黄油体",
        // fontWeight: 400,
    },
});

治理

font-server 是一个用于内网的字体存储和治理服务，反对通过 WebHook 对外告诉信息，并容许内部程序通过端口进行外部数据拜访。

次要性能包含：

1. 用户能够上传原始字体文件，零碎会保留这些字体文件。
2. 触发打包字体性能后，切割服务器会主动获取外部存储的字体文件，并对其进行切割，而后将切割后的字体片段存入外部文件系统。
3. 反对 WebHook 订阅性能，触发 hook 事件后，零碎会播送订阅 url，告诉内部程序相干事件信息。
4. 在切割实现后，内部监听程序能够获取外部的切割分片，并将其部署到内部公开的 OSS 零碎上。特地地，内外 OSS 零碎应该应用雷同的门路。
5. 用户能够通过 OSS 零碎提供的 CDN 减速拜访字体文件，同时嵌入字体加载 HTML 片段，浏览器会主动加载相应的 CSS 文件和字体文件。
6. 提供简略的 Admin 界面，不便用户进行可视化操作。

通过部署 font-server 服务能够便捷高效治理业务内字体

优化

当初领有了宰割后的字体，可间接上传到动态资源存储中进行应用了，接下来介绍进步字体加载速度的形式

1. 切割分包大小适当：倡议是设置 50-100KB 左右范畴进行打包，这样单个包的大小不会太大，HTTP/2 的加载速度也够快。cn-font-split 的默认值是 70 KB 可能满足大多数场景。
2. 应用反对并发加载的 CDN：开启 CDN 的 HTTP/2 反对
3. 肯定要配置 HTTP 缓存条件：在有缓存时，用户关上你的网站是能够达到 50ms 内霎时加载完所有字体包的。因为字体文件配置一次就基本上不会进行改变，所以能够长久缓存。
4. 文档站点的 预加载：如果网站有条件，能够在首页或者是所有页面，在浏览器闲暇的时候，应用 js 的 fetch（force-cache）申请所有的字体包。这样浏览器会把字体都退出进缓存中，从而保障其它页面的文字也能迅速加载。至于分包的具体名称，能够应用 reporter.json 文件查看。

请勿应用 Preload 预下载 CSS 文件

Preload 预下载会全量下载对应文件，这样会导致字体按需下载生效。然而你能够预加载几个罕用的字体文件分片，这个须要你手动去判断加载，流程较为简单。

其余问题

• 字体文件下载抢占 JS 申请问题： 字体文件如果在入口 HTML 文件中加载，那么浏览器会查看 HTML 中须要应用的字，并加载字体，然而在 JS 中应用数据申请就会呈现问题。曾经收回的字体下载占用了浏览器的下载并发数，进而推延 JS 下载。倡议是应用 JS 增加 link 标签动静导入 css 的形式提早大略 150ms 即可。
• 强制应用分包时，源字体没有某些 字形 ，导致一个包内没有被分满：应用一个只有大抵 6373 字符的字体，然而采纳 Noto-Serif-SC 分包策略，那么局部包内会有缺失字体的景象，这是失常的。这个个性，插件将不会进行干预。倡议较全的字体包能够应用 Google 字体的中文分包形式，而小字体包应用主动分包策略就好了。

参考资料

• https://chinese-font.netlify.app/post/get_start/
• https://chinese-font.netlify.app/post/performace_turbo/
• cn-font-split – 中文 Web Font 切割工具
• chinese-free-web-font-storage – 字体分包成品仓库
• font-server 中文字体切割服务器
• online-split 在线字体分包器
• analyze 在线字体分析器