由于中文字体体积较大,动辄10M+的大小,很难在移动端直接加载,而系统自带的字体不够丰富,无法满足UI设计中使用特殊字体的要求。经过研究发现解决方案有两种:

  1. 使用图片代替文字
  2. 从字库中提取页面需要的文字,重新组合一个字体的子集

第一种方案是最简单的,缺点就是不能方便的布局和调整颜色,并且无法对文本进行选择和复制。
第二种稍微麻烦一点,不过现在已经有工具来完成了。

首先推荐的是有字库,这里是简介。它提供CSS和JavaScript两种按需嵌入字体的方式,如果是静态内容,使用CSS嵌入的方式足够,动态内容则需使用JS嵌入的方式。

有字库也提供了API方便离线使用。以下是调用API下载字体的代码:

#!/bin/sh

UserKey="4552A162318A6988"
ApiKey="4536a3b47b25f7b39ae422a5de0e077b"
content="中华文化博大精深"
Url="my/a"
FontFamily="TSSunOld"
AccessKey="bade57a0cbfc422c89f9635de6fae481"

curl -X POST 'https://service.youziku.com/batchCustomWebFont/createBatchWoffWebFontAsync' -d "\
ApiKey=${ApiKey}\
&Datas[0][Content]=${content}&Datas[0][Url]=${Url}&Datas[0][AccessKey]=${AccessKey}"

curl "https://cdn.webfont.youziku.com/webfonts/custompath/${UserKey}/${Url}.bmp" -o "${FontFamily}.woff"

Base64Encoded=$(base64 -i "${FontFamily}.woff")

cat > demo.html <<EOF
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Demo</title>
  <style>
    @font-face{
      font-family: "${FontFamily}-SubCN";
      src: url(data:application/font-woff;charset=utf-8;base64,${Base64Encoded}) format("woff");
      font-weight: 300;
      font-style: normal;
    }
    h1, h2, h3, h4, h5 {
      font-family: "${FontFamily}-SubCN", "Microsoft YaHei";
    }
  </style>
</head>
<body>
  <h1>普通字体/${content}</h1>
  <h2>普通字体/${content}</h2>
  <h3>普通字体/${content}</h3>
  <h4>普通字体/${content}</h4>
  <h5>普通字体/${content}</h5>
</body>
</html>
EOF
字体效果

可以看到“中华文化博大精深”和普通字体的区别很明显,虽然他们应用了同一种字体,由于字库中并不包括“普通字体”这四个字,导致浏览器使用后备字体。

如果需要在项目中自动化操作,可以使用字蛛

原文链接:https://marskid.net/2019/03/30/font-face-zh-cn-size-reduce/