自定义字体服务 - 基于Node的Web字体解决方案

• 自定义字体服务 - 基于Node的Web字体解决方案
  • 背景
  • 技术选型
  • @font-face介绍
  • 实现方案（介绍字体设计、转换、兼容性处理等技术实现细节。）
  • 接口实现方式（实现中遇到的问题和解决方案）
  • 总结
  • 开源地址
  • 参考

背景

在前端开发中，字体是非常重要的组成部分，因为字体可以为页面提供良好的可读性和设计感。在设计中，经常需要使用一些特殊的字体，以突出设计效果或满足特殊的审美需求。但是，在使用一些奇怪字体的需求下，使用图片来替代字体可能会影响页面性能，特别是图片大小和加载时间的问题。

一般来说，为了解决这个问题，我们会使用CSS3中的@font-face提供的自定义字体功能。通过使用@font-face，我们可以自定义一个字体文件，将字体文件嵌入到网页中，从而避免使用图片来替代字体。这种方法可以解决一些特殊字体的问题，但是可能会面临一些挑战。英文字体文件通常比中文字体文件小得多。一个常见的英文字体文件大小通常不超过100KB，而一个中文字体文件可能会超过10MB。这是因为中文字体通常包含大量的字符，包括不同的汉字、符号和字体效果等。这种情况下，为了一两个字或者一行字，就需要加载几MB大小的整个字体文件，显然是不划算的。此外，在网络差的环境下，即使用户浏览完页面，字体文件也可能还没有加载完成，这时候已经没有意义了。
换个角度想想，虽然一个中文字体包含了几千个常用字，但一个网页去掉重复字的情况下，往往只包含数十个到数百个字。因此，是否有必要加载一个完整包含数千个字的字体文件，可以考虑只加载网页需要的字体，这样能够减小加载字体文件的大小，同时也能保证字体加载的速度。

技术选型

针对上面的两个问题，常见的解决方案有：

1. font-spider ：字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。https://github.com/aui/font-spider

   * 优点:提供大量可商用字体,便捷获取。
   * 缺点:需要付费,版权复杂,可用性有限。
   

2. font-carrier：font-carrier是一个功能强大的字体操作库，使用它你可以随心所欲地操作字体。https://github.com/purplebamboo/font-carrier

   * 优点:可以收集和备份已经购买的商用字体。
   * 缺点:需要确保拥有商用字体的正版授权。
   

3. 有字库：有字库是全球第一中文web font（网络字体）服务平台，致力于美化网页界面，降低网页设计和维护的难度，同时提升效率。http://www.webfont.com/

   * 优点:提供大量可商用字体,便捷获取。
   * 缺点:需要付费,版权复杂,可用性有限。
   

4. fontmin: fontmin是一个纯 JavaScript 字体子集化方案，提供了 API和 CLI的使用方式。是一个非常成熟实用的字体优化工具。http://ecomfe.github.io/fontmin/#feature

   * 优点:可以进行字体压缩和子集化优化。
   * 缺点:需要安装依赖,优化效果取决于字体本身。
   

@font-face介绍

@font-face 是 CSS 的一个规则，用于定义自定义字体。它允许网页设计者使用自定义字体，而不必依赖用户的计算机上已安装的字体。
使用 @font-face 规则，可以将字体文件（通常是 TrueType 字体文件或 OpenType 字体文件）嵌入到网页中，并通过 CSS 指定字体的名称和样式
。
以下是一个示例，演示如何使用 @font-face 定义并应用自定义字体：

@font-face {
   
  font-family: 'MyCustomFont';
  src: url('myfont.ttf');
}

body {
   
  font-family: 'MyCustomFont', sans-serif;
}

在上面的示例中，myfont.ttf 是字体文件的路径。通过 @font-face 规则定义了一个名为 ‘MyCustomFont’ 的自定义字体，然后在 body 元素中应用了这个字体。

实现方案（介绍字体设计、转换、兼容性处理等技术实现细节。）

综合考虑之后，我们采用的是fontmin。

这是官网的一个例子，从一个大小为4.2M,包含7500+的字体包中，提取了7个字，输出的子集字体大小在4.5K左右。

结合我们的业务场景，为了方便管理，我们结合Node.js,开发了字体服务管理系统，实现了字体文件的上传和管理，目前支持TTF和OTF两种字体格式，可以根据字体文件和需要的文字，动态压缩并输出子集字体同时上传到cdn，同时提供了一键复制css的功能，复制完成后直接放在自己的css文件中，就可以直接使用。

使用步骤

第一步：在字体库管理列表维护所使用的字体文件，得到字体库名称以及将字体库同步传到cdn,获得url地址；

第二步：在字体配置管理页面根据需要的字体和使用的文字得到压缩后的使用地址；

第三步：拿到“复制地址”里的链接，通过@font-face设置自定义字体，就能实现我们想要的效果啦；

// 定义字体名称，src里就是复制的地址
@font-face {
   
  font-family: yezi; //自己起个字体名字
  src: url(