抓取网页中的图标或字体

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