多字体文件合并处理

基于https://icomoon.io/app/#/select 工具生成的字体文件合并处理方法
一、准备:
1、FontEditor在线工具:http://fontstore.baidu.com/static/editor/index.html 网站打不开了。
2、两个字体文件,本文以.ttf字体文件为例。
二、开始
首先,打开FontEditor工具

这里写图片描述

然后打开第一个icomoon.ttf字体文件:

这里写图片描述

这里写图片描述

接着新开一个FontEditor工具页面并打开第二个icomoon.ttf字体文件:

这里写图片描述

然后复制第二个文件中的字体内容并粘贴到第一个字体文件中:

这里写图片描述

可能你已经注意到,图标字体下方的"$"符号+数字的文本内容,它表示每一个图标字体的unicode代码点,在同一字体文件中不能重复。现在直接点击导出.ttf文件按钮会出现以下提示框:

这里写图片描述

因为可以看到复制过来的字体内容,图标字体下方的"$"符号+数字文本与前面的部分是重复的,所以我们需要修改这个值。

选中要修改的图标,点击设置代码点:

这里写图片描述

接下来,依次修改代码点如下图:

这里写图片描述

然后,导出.ttf文件:

这里写图片描述

然后,替换合并前的字体文件。

最后,使用合并后新增的图标,这里以下载图标为例:

这里写图片描述

1.修改style.css文件,在其中增加如下内容:

这里写图片描述

2.在页面中使用:

<span class="icon-download"></span>

这里写图片描述

关于此工具的详细用法请见:http://fontstore.baidu.com/static/editor/doc/index.html

  • 7
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wl_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值