抓取网页中的图标或字体


假设你看中了一个网页中的某个字体图标,想要挪为己用,关键在于获取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