在前端中，字體圖標具有 輕量、靈活、兼容性好等優點，但是沒想到有公司拿他做反爬手段。例如抖音。

下面看下他怎么做的。

我們直接打開頁面，在我畫箭頭的數字地方，抖音都應用了字體圖標反爬。

接下來打開調試控制臺，找到相應的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:continueelif t in [".", "w"]:fonts.append(t)else:fonts.append(font_map[str(ord(t))])return "".join(fonts)

最終效果:

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

總結

以上是生活随笔為你收集整理的反爬之字体图片反爬的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。