抓取網頁中的圖標或字體

假設你看中了一個網頁中的某個字體圖標,想要挪爲己用,關鍵在於獲取svg文件,之後你可以將圖標導入到自己在https://www.iconfont.cn/的項目中,下載後得到全新的字體圖標文件包,替換掉現有的,就可以在自己的項目中使用了

1. 該圖標是通過字體文件引入

step1: devtool中,找到@font-face 定義的 url,

  • 發現直接引入了字體文件路徑,直接進行step3
  • 發現引入的是一個base64路徑
data:application/x-font-ttf;charset=utf-8;data:;base64,AAEAAAALAIAAAwAwT1MvMu/2HToAAAC8AAAAYGNtYXAKy/W8AAABHAAAAwBnYXNwAAAAEAAABBwAAAAIZ2x5ZtcfmKIAAAQkAAAxDGhlYWQUZx/7AAA1MAAAADZoaGVhCx8H+QAANWgAAAAkaG10eNuFEHIAADWMAAAA4GxvY2E1RSkCAAA2bAAAAHJtYXhwAFIBiwAANuAAAAAgbmFtZS4CLokAADcAAAABnnBvc3QAAwAAAAA4oAAAACAAAwQRAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEADg4AAAAAQAAAAAAAAAAABAAAD//wPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAAGAAAAAwAAADQAAAAEAAABTAABAAMAAAA0AAEABAAAAUwAAwABAAAANAADAAoAAAFMAAQBGAAAAEIAQAAFAAIAAQAgACsALQA/AEkATQBVAGYhkyHwIsYj8yW2JgYmDyY6JsQm3yb0...
複製代碼

step2: 將base64 轉碼爲ttf文件

進入下方頁面https://www.motobit.com/util/base64-decoder-encoder.asp 將上方base64路徑粘貼進去

 

注意: 刪除data:application/x-font-ttf;charset=utf-8;data:;base64,,包括base64後面的逗號 點擊convert 後 得到 一個二進制文件base64.bin,將其後綴改爲ttf。

 

step3: 讀取ttf,並導出你想要的圖標

將base64.ttf文件導入到 fontstore.baidu.com/static/edit… 選中想要的圖標,導出爲svg或png

 

 

2. 該圖標是一個svg 標籤

 

 

點擊copy element

 

進入一個代碼IDE,例如,我打開的是vscode,新建一個文件,粘貼代碼,保存文件名爲.svg 後綴 然後將文件導入到http://fontstore.baidu.com/static/editor/,就可以啦

 

嘗試直接將該文件上傳到iconfont項目中,結果失敗了,iconfont可能不支持代碼,需要在導入到fontEditor中再導出使用

 

 

 



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章