获取网站的自定义字体并下载

获取网站的自定义字体并下载

有时候我们模仿别人的网站的时候,发现有些图标根本不是图片资源,而是如下图所示
15412137920678.jpg

如果对方没使用Source Map的话,我们点进font.css可以看到是使用了fontface

15412139934398.jpg

如果使用了Source Map的话,代码全成了这样,根本无法阅读
15412140864118.jpg


既然知道是使用的fontface,那我们把他的文件下载下来就行了,这里我使用到了字蛛
首先使用npm install font-spider -g安装

15412143265423.jpg

然后使用font-spider --info http://xxxxx.com查看该网站使用了哪些Font
15412144285217.jpg

可以看到,该网站有2个woff,我们将其下载到本地
15412146665716.jpg

然后打开百度字体编辑器
15412147453576.jpg

选择打开上传我们下载的woff文件

15412147831554.jpg

成功看到了我们需要的图标
因为还需要考虑到兼容性的问题,所以还需要svg eot ttf等格式的文件,点击顶部的zip下载按钮
15412149886691.jpg

解压出来就能看到我们需要是所有格式了,然后导入自己的项目开始使用吧!

15412150261616.jpg

不知道还有没有其他方便的方法,如果有,希望能在评论区告知.

推荐阅读更多精彩内容