反爬之字体图片反爬

在前端中,字体图标具有 轻量,灵活，兼容性好等优点，但是没想到有公司拿他做反爬手段。例如抖音。
下面看下他怎么做的。

我们直接打开页面，在我划箭头的数字地方，抖音都应用了字体图标反爬。
接下来打开调试控制台，找到相应的css。 点击最右侧的css样式链接。

“@font-face” 是前端中定义字体图标的固定写法。 我们直接找到后缀为.svg的url链接，下载下来
svg文件下载下来，用notepad打开

font-family定义了字体库的名称，下面划红框的才是关键，看不懂？没关系。
打开网站http://fontello.com/. 把我们下载的svg文件拖上去

初始打开 Custom Icons下面是空白，把svg文件拖上去，才会显示字体图标。
接下来，关键的步骤，制作映射关系。
把notepad中的unicode的数字复制出来当作key，在网站上看到的数字当成value， 注意是有顺序的，notepad中的顺序是自上而下，
网页中的字体图标顺序是自左往右。
制作好如下所示:

font_map = {
    "58882": "1",
    "58883": "0",
    "58884": "3",
    "58885": "2",
    "58886": "4",
    "58887": "5",
    "58888": "6",
    "58889": "9",
    "58890": "7",
    "58891": "8",
    "58892": "4",
    "58893": "0",
    "58894": "1",
    "58895": "5",
    "58896": "2",
    "58897": "3",
    "58898": "6",
    "58899": "7",
    "58900": "8",
    "58901": "9",
    "58902": "0",
    "58903": "2",
    "58904": "1",
    "58905": "4",
    "58906": "3",
    "58907": "5",
    "58908": "7",
    "58909": "8",
    "58910": "9",
    "58911": "6",
}

制作完毕，我们就可以做转换啦。
接下来请求网页，拿到响应信息，把要的提取的数字用xpath 叉出来，叉出来的文字显示的是unicode编码，取它的ascii编码的值，然后从font_map中拿出响应的数字即可。到这里就转换成功啦。
下面贴转换函数

def font_convert(temp: list) -> str:
    fonts = []
    for i in temp:
        t = i.strip()
        if not t:
            continue
        elif t in [".", "w"]:
            fonts.append(t)
        else:
            fonts.append(font_map[str(ord(t))])
    return "".join(fonts)

最终效果:

完整代码地址: https://github.com/crazyxw/douyin_font_icon