本文將帶你解析各種形式自定義字型，繪製點陣圖，並透過影象識別提取出關係列表，最終校對後構建正確的對應關係，最終獲取到正確的資料。

看到本文，相信以後你對任何形式額字型反爬都能見招拆招。

深度剖析自定義字型解析

自定義字型的介紹

首先，我們必須要清楚自定義字型與普通字型的區別，自定義字型定義了一些特殊的Unicode編碼對應的點陣圖資料，而普通字型只是定義標準編碼的顯示形式，所以普通字型渲染的資料可以直接複製出正確的文字，而自定義字型只能複製到對應的Unicode編碼。

那麼遊覽器如何顯示出對應的字元呢？那是因為遊覽器會根據自定義字型的對應關係，渲染對應的點陣圖進行顯示。

下面我們以某團購網站為例進行演示。

這次我分析的頁面是深圳休閒娛樂：

可以看到自定義字型都存在於svgmtsi標籤中，不同的class屬性也對應了不同自定義字型檔案。

如果我們取消所有的自定義字型的載入，可以看到網頁上對應的位置都會出現亂碼：

從上圖也可以看到，產生自定義字型的位置完全是隨機的。

對於這種情況，我們最好使用可以修改HTML DOM樹的庫來維持節點的相對順序，我選擇了BeautifulSoup這個庫，可惜只支援css選擇器。

不過也好，早期我學程式設計用Java玩小爬蟲的時候就更喜歡css選擇器，正好可以找回久違的感覺。

接下來我們一步步分析頁面，首先用python讀取頁面資料：

Python載入頁面

下面我們使用BeautifulSoup解析下載的頁面，構建DOM樹：

關於BeautifulSoup可以檢視官方文件：

（上面兩個連結內容一樣，目錄形式有區別）

解析頂部導航欄分類和地點列表由於現在該團購網站翻第二頁就要求登入，咱們也沒有打算真的要爬它。所以我透過多下載幾個分類連結，來模擬批次下載的效果。

下面準備解析出下面這些對應的標題：

透過xpath查詢工具獲取到xpath後，就可以轉換為css選擇器。

分類列表：

地點列表：

解析字型對應css的下載URL

經觀察可以發現，定義自定義字型的css檔案在連結帶有svgtextcss關鍵字的url中：

我們可以從所有的定義css樣式的連結中找到含有svgtextcss關鍵字的連結：

解析css獲取自定義字型的URL

格式化定義字型的css檔案：

可以看到，class定義了使用的字型名稱，font-face定義了每個字型名稱對應的字型檔案。

下面是完整程式碼：

下載字型

我們可以將上述四個字型都下載下來看看：

下載後得到4個字型檔案：