前端代码里边 iconfont 字体免费下载

lxf2023-03-18 08:27:01

近期恰好清查前端代码里边 iconfont 字体免费下载成功时是不是会有有分歧的错码难题,恰好之前看小孩子的甲骨文图案设计,感觉非常有意思,那样,能否将甲骨文字体画上来形成字体显示出来呢?

前端代码里边 iconfont 字体免费下载

建立一套自定义字体

这是一个比较更专业的难题,通常情况下我们一般找设计小哥小亲姐姐立即要一套,但是我这也是自己的要求,显而易见无法使用公司资源。

如今网络上啥并没有,都能够学?

AdminJS上边找了一个一篇高赞的帖子《IconFont 的制作和在 Android 端的使用》,里边提及了《怒赞干货!Icon-font图标字体的四类制作方法》,从技术的到完全免费都可以的详细介绍,一顿读下来,差点就中途放弃了。

字体制作必须比较专业的专业软件,比如 PS(PhotoShop) 和 AI(Adobe Illustrator),这一明显是付费,并且价格昂贵。完全免费也有,但问题仿佛大量,短期内难以跑通。

掏钱是没有办法花钱,我是一直做玩下,原本也不赚钱,就图个乐。

我印象里应该是有个实习期,可是在网上下载安装软件基本上就是支付页面...

犹豫再三,接着再 Google 一下 PhotoShop 官方网站试一下是否有使用版?

前端代码里边 iconfont 字体免费下载

有 7 天实习期,并且 PS 和 AI 都是有 7 天实习期,我机遇来了!

赶快安装好 PS 和 AI 吧!

前端代码里边 iconfont 字体免费下载

建立标志确实帮我忙活了一些时间,我将上边甲骨文字逐一截屏并且在 PS 里边用魔棒工具选定地区,拷贝到 AI 里边形成 SVG 照片,但是不好使,上传至 icomoon.io/app/ 和 www.iconfont.cn/ 均识别不了...

算了吧,没有在这 PS 和 AI 的专业能力上浪费时间了,有时间找设计小哥小亲姐姐请教一下。

前端代码里边 iconfont 字体免费下载

下载图标制作模板.ai,立即 AI 打开用画笔简易画一个甲骨文字图案设计,另存 shang.svg 。常见问题参照阿里巴巴 iconfont 标志制作。

前端代码里边 iconfont 字体免费下载

依此类推,制做完成图片上别的 18 个标志,不赶时间的话也可以再加上自己的签名编号“SSU”与自己的“盛”,自嗨一下!

前端代码里边 iconfont 字体免费下载

提交字体图标

在 www.iconfont.cn/ 建立个账户,然后进入“提交标志”网页页面,提交当地 svg 标志,会待审根据,大约 10 min。

前端代码里边 iconfont 字体免费下载

在“资源优化配置”Tab寻找“我上传标志”,点击图标购物车。

前端代码里边 iconfont 字体免费下载

点一下“加入购物车”标志,能够看见已购物车的小图标,点击添加至新项目

前端代码里边 iconfont 字体免费下载

开启“我的项目”能够看见自身使用的字体图标,点一下“更新代码”后再点击“拷贝”,你将看到了解的前面应用图标字体编码。

前端代码里边 iconfont 字体免费下载

在生成代码以前,我们能修改一下图标字体 Unicode 编号为相匹配汉字编码,只要我们建立的“书强身健体”便是取代文字的,而非新创建一些其他有意义的标志。

前端代码里边 iconfont 字体免费下载

到此,我们制作通过了可以直接在前面所使用的“书强身健体”,并获得了已公布到云服务器字体图标连接。

前端代码里边 iconfont 字体免费下载

网页页面应用

直接用编码:

前端代码里边 iconfont 字体免费下载

根据 @font-face 申明自定义字体,在其中 font-family 定义了字体样式名字,如“jiaguwen”。

然后应用在网上比较成熟的兼容模式书写界定 CSS jiaguwen 类,在原素中以 class=“jiaguwen”即可进行,该原素中的全部节点均会起效,相匹配上例中,相对应的文本可能应用“书强身健体”。

有老同学聚会充满好奇如何有一个 “”,其实这也是 h5 中相匹配 Unicode 码 “e615” 的转译书写,相匹配我自定的标志 “SSU”。

打开网站“书强身健体”甲骨文字「 js.jirengu.com/jugikujuxu 」 ,实际效果如下所示:

前端代码里边 iconfont 字体免费下载

到此,做好了!

Mac 添加字体

直接把字体免费下载到当地,点一下 “iconfont.ttf” 文件安装。

前端代码里边 iconfont 字体免费下载

开启“字体样式册”运用能够看见安装好了的“iconfont”字体样式。

前端代码里边 iconfont 字体免费下载

下面在文本处理手机软件里边运用字体样式就可以,比如说我用的“Sublime Text” 和 “Keynote”。

前端代码里边 iconfont 字体免费下载

最终一起来看看字体安装前后左右实际效果,立即拷贝来随后设置字体。

前端代码里边 iconfont 字体免费下载

科谱知识要点

Unicode 编号一共有 3 字节数,即0x000000 - 0xFFFFFF,能够表明 2 的 24 三次方字符,已上传约 100 万只标识符,为全世界的每一个标记给与一个独一无二的编号,能通过 unicode-table.com/cn/blocks/ 查看标识符相匹配编号。

按编号范畴,你能彻底自身写一个编码把所有 unicode 标识符直接打印。

直接用编码:

前端代码里边 iconfont 字体免费下载

也能打开“所有 Unicode 标识符网页页面” 「 js.jirengu.com/suxowujija 」 ,由于标识符过多,会有一点卡。

Emoji 标识符(