工作这么多年了，从来没想过要记录过什么，学习过什么，擅长什么，今天闲来无事儿，来这里摸摸鱼划划水，记录一下今日工作。
说到font-face, 可能大家想到的较多的都是让UI画图标，做个跟SVG一样，可缩放，自定义颜色，且轻量，能解决普通图标文件太大的场景，今天分享的跟这个其实也差不多，只不过我不是用于icon显示，而是真的用于内容处理，其原理都一样，需求是将空格显示为可见。网上探索了很久，很少有这种分享案例，所以今天我来占坑分享一下这个小技巧。
需求
编辑器工具栏增加对内容区的不可见字符的显示控制，类似于各大代码编辑器里显示空格，显示tab字符
在开启该功能后，显示为小圆点
背景
我们是做翻译行业的互联网软件开发，面向的客户群体是翻译公司或者公司的翻译部门，或者是即将踏进翻译行业的学生群体。翻译行业的人员对翻译的原文或译文内容非常关注，译文产出的质量直接关系到下一流程的工作效率和成本。为了对翻译人员的视力保护，也为了翻译内容更精确判别，我们需要将一些不可见字符进行可视化，比如今天我们说的空格字符。
探索方案
VS Code
VS Code中可以设置显示空格，他是将空格直接替换为新的字符，原本的空格是普通的 在鼠标划词后或开启功能后，将内容替换为新的'·'字符，并增加样式，具体的处理逻辑我们不做过多的解释(因为解释不清楚，涉及到他家的编辑器整个渲染模式^ v ^)
Language Tool
languagetool网站的demo网站有类似的案例，但是由于忘了网址没法截图。他们采取的是基于dom节点的分析，额外绘制canvas覆盖到字符中间。此方案的难度是需要实现一套基于字符位置的精确计算方案，该方案还可以实现很多意想不到的效果，比如划词下划线，单词错误提示等效果。
解决方案
由于我们现在的翻译编辑器功能已经很复杂了，对于译文的控制和处理也是超乎想象的繁琐，不能再因为这个小需求而继续采用VS Code中操作字符的方式来实现，因为会涉及到内容的替换，切换渲染，标记，内容再变化，搜索匹配后底色标注，内容样式叠加，delta迭代修复等等问题。
Language Tool方案的缺点是方案本身实现复杂，且在页面滚动时，漂浮在字面上的标记也会有延迟，像托这个筋斗云尾巴。最终都不优雅。
于是就请到了今天的主角 @font-face 自定义字体。
- 用Font Creator Program制作一个字体
- 前端采用@font-face定义采用字体
- 在需要的节点上使用自定义font-family引用即可
画字体，选出一些不可见字符，进行重绘，对于一些不需要的字符集直接删掉，这里我们将空格字符绘成一个小圆点，方法很简单，直接选中打开画布，把左边的素材拉过来放到画布中，你可以用这些原始素材画出各种形状，比如中文文字，也都是这样一笔一笔画出来的(我个人臆测，实际情况应该不是，而是会抽象出各种五笔结构，最后组合，需要画各种横撇竖捺和偏旁部首，也是臆测哈)
由于此次需求只有一个地方需要用这个切换显示，直接在代码里引用导出来的字体文件。由于本次字体制作只绘画了空格字符，可通过unicode-range来限制该字体生效字符范围，剩下的则由系统其他字体渲染，关于unicode-range使用可移步参考此处
其他用处：
一些电商网站的价格展示会用到字体显示来混淆，电商们相互之间最烦的就是来自世界各地的爬虫小伙伴们的光顾，抓取商品信息，价格信息，分析对方产品的价格趋势，而一个曾经可用的防范措施就是数字字体故意定时打乱，比如将1画成8，4画成1，原先页面显示81的价格，实际上数据抓取到的是14，只要用户看到是对的就行，实际上网页的内容的价格总是在变动的，这样可以一定程度上可以干扰一批爬虫选手。
正在准备的下一篇，将为大家介绍如何实现Vue项目快速国际化方案，使基于vue的项目能实时对接翻译，开发者和译员都能实时看到dev环境的页面翻译效果。
以上都是些个人愚见，望大家包容指正。
