利用自定义web-font实现数据防采集

web-font介绍

web-font是CSS3中的一种标记 @font-face，在@font-face声明里，你可以声明一种字体，指定这种字体字体库文件从网络某个地址下载。

使用自定义web-font实现数据防采集
防采集原理：
使用web-font可以从网络加载字体，因此我们可以自己创建一套字体，设置自定义的字符映射关系表。
例如设置0xaaa是映射字符1，0xbbb是映射字符2，以此类推。
当需要显示字符1时，网页的源码只会是0xaaa，被采集的也只会是0xaaa，并不是1，使采集者采集不到正确的数据。而对于正常访问的用户则没有影响。对于中文的防采集不适合使用web-font这种方法，因为中文的字体库太大。而对于数字，英文则适合使用此方法实现防采集。

实例：使用自定义web-font实现数字数据防采集

1.创建指定字符的自定义字体
首先选择一款字体（免费且不受版权影响的字体建议去站长字体下载），上传ttf文件，将字体文件转为svg格式。下载好字体可以去这个网站快捷转格式https://www.fontke.com/tool/fontface/

2.选择需要使用的字符及设置字体映射关系
打开网址：https://icomoon.io/app/#/select

1.选择左上角“import icons”上传刚刚生成的svg字体。
2.选择0-9之后，点击右下角“gener ate font”创建对应映射关系

3.把名字也按映射关系修改，设置映射关系后，点击右下角download下载字体。

3.在网页中使用web-font显示数据
首先需要设置 @font-face，这里以”my_webfont”为例子

然后需要定义一个css的class，font-family使用这个web-font

在需要显示这种数据的地方，填入数据，且容器的class定义为my_webfont
<p class="my_webfont">&#xfa778;</p>
这样就会在界面上输入7（对应上图映射）

4.完整的实例代码


运行浏览器以后可以看到

采集者只能获取到类似򬿰的数据，并不能知道򬿰映射的字符是什么，实现了数据防采集。当然采集者可以通过分析，知道每一个映射代表的意思，从而进行采集后转换处理。 我们可以创建多个不同的字体文件和映射表。每次访问都随机使用一种，并定期更新一批字体文件和映射表，加大采集的难度。 这样采集者需要把所有的字体文件和映射表都分析并做转换处理，才可能采集到数据，这样采集的成本将会大大增加。