抓取網頁中的圖標或字體


假設你看中了一個網頁中的某個字體圖標,想要挪為己用,關鍵在於獲取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中再導出使用

 

 

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM