自定义字体库

工具：Fontmin（http://ecomfe.github.io/fontmin/#banner）

常用汉字集：https://gitee.com/feng_xingkai/chinese

1、打开Fontmin，将自定义字体库需要的字粘贴到页面中，并拖入字体文件，然后点击生成，获得自定义的字体库。

修改字体映射关系

fontTools安装：pip install fontTools

from fontTools.ttLib import TTFont

# 加载字体文件：
font = TTFont('simsun.ttf')

# 获得字符、字形映射
cmap = font.getBestCmap()

print("--------------原始映射关系-----------------")
print(cmap)

# 修改映射关系
for key in reversed(list(cmap.keys())):
    cmap[key + 0x0001] = cmap.pop(key)

print("--------------修改后的映射关系-------------")
print(cmap)

# 保存新ttf文件：
font.save('simsun_new.ttf')
# 保存woff文件
font.save('yahei_new.woff')

font.close()

后台数据返回修改方法

public static String encryptContent(String content) {
    if (StrUtil.isBlank(content)) {
        return "";
    }

    char[] charArray = content.toCharArray();
    StringBuilder stringBuilder = new StringBuilder();
    for (char c : charArray) {
        if (c == 32) {
            stringBuilder.append(" ");
        } else {
         stringBuilder.append("&#x").append(Integer.toHexString(++c)).append(";");
        }
    }

    return stringBuilder.toString();
}

Vue使用

创建font.css文件

@font-face {
  font-family: 'webfont';
  font-display: swap;
  src: url('../fonts/simsun.eot'); /* IE9 */
  src: url('../fonts/simsun.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/simsun.woff') format('woff'), /* chrome、firefox */
  url('../fonts/simsun.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('../fonts/simsun.svg#webfont') format('svg'); /* iOS 4.1- */
}

页面引入

<style>
    @import "~@assets/css/font.css";

    .webfont {
      font-family: webfont !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
</style>

需要用到加密的地方

<span class="webFont" v-html="content"></span>

附：

字体转换：https://convertio.co/zh/font-converter/

字体图标库：https://icomoon.io/app/#/select