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

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

有时候我们模仿别人的网站的时候,发现有些图标根本不是图片资源,而是如下图所示
获取网站的自定义字体并下载_第1张图片
15412137920678.jpg

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

获取网站的自定义字体并下载_第2张图片
15412139934398.jpg

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


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

15412143265423.jpg

然后使用 font-spider --info http://xxxxx.com查看该网站使用了哪些 Font
获取网站的自定义字体并下载_第3张图片
15412144285217.jpg

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

然后打开 百度字体编辑器
获取网站的自定义字体并下载_第4张图片
15412147453576.jpg

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

获取网站的自定义字体并下载_第5张图片
15412147831554.jpg

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

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

获取网站的自定义字体并下载_第6张图片
15412150261616.jpg

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

你可能感兴趣的:(获取网站的自定义字体并下载)