从 0 到 1 设计一套“书强”体甲骨文字体实践

从 0 到 1 设计一套“书强”体甲骨文字体实践自荐一篇刚写的比较有意思的前端文章,从 0 到 1 打造一套“自己的字体”,原本设计和研发两人的活你可以一个人搞定。

最近刚好排查前端代码里面 iconfont 字体下载失败时是否会出现有歧义的乱码问题,刚好之前看过小朋友的甲骨文图案,觉得非常有趣,那么,能不能将甲骨文字体画上去生成字体显示出来呢?

图片

创建一套自定义字体

这是一个比较专业的问题,正常情况下我们一般找设计小哥小姐姐直接要一套,不过我这是自己的需求,显然没法动用公司资源。

现在互联网上啥没有,都可以学?

掘金上面找了一篇高赞的文章《IconFont 的制作和在 Android 端的使用》,里面提到了《怒赞干货!Icon-font图标字体的四类制作方法》,从专业的到免费的都有介绍,一顿看下来,我差点从入门到放弃了。

字体制作需要比较专业的工具软件,比方 PS(PhotoShop) 和 AI(Adobe Illustrator),这个显然是付费的,而且价格不菲。免费的也有,但问题好像更多,短时间很难跑通。

花钱是不可能花钱的,我就是做着玩玩,本来也不挣钱,就图个乐。

我印象中应该是有个试用期,但是网上下载安装软件直接就是付款界面…

犹豫再三,最后再 Google 一下 PhotoShop 官网试试有没有试用版?

Pasted image 20221218184748.png

有 7 天试用期,而且 PS 和 AI 都有 7 天试用期,我机会来啦!

赶紧安装上 PS 和 AI 吧!

Pasted image 20221218190524.png

创建图标的确给我折腾了一些时间,我把上面甲骨文逐个截图并在 PS 里面用魔棒工具选中区域,复制到 AI 里面生成 SVG 图片,然而不好使,上传到 icomoon.io/app/www.iconfont.cn/ 均识别不了…

算了,不在这 PS 和 AI 的专业性上浪费时间了,有空找设计小哥小姐姐请教一下。

Pasted image 20221218200748.png

下载图标制作模板.ai,直接 AI 打开后用画笔工具简单画一个甲骨文图案,另存为 shang.svg 。注意事项参考阿里妈妈 iconfont 图标绘制

图片

以此类推,制作完成图片上其他 18 个图标,不赶时间的话可以加上自己的签名代号“SSU”和自己的“盛”,自嗨一下!

图片

上传字体图标

www.iconfont.cn/ 创建个账号,然后进入“上传图标” 页面,上传本地 svg 图标,会等待审核通过,大概 10 分钟。

Pasted image 20221218214125.png

“资源管理”Tab找到“我上传的图标”,点击图标加入购物车。

Pasted image 20221218214307.png

点击“购物车”图标,可以看到已加入购物车的图标,点击添加至项目。

Pasted image 20221218214648.png

打开“我的项目”可以看到自己添加的字体图标,点击“更新代码”后再点击“复制”,你将看到熟悉的前端使用图标字体代码。

Pasted image 20221218220227.png

在生成代码之前,我们可以修改一下图标字体 Unicode 编码为对应汉字编码,因为我们创建的“书强体”就是替代汉字的,而不是新建一些其他有意思的图标。

Pasted image 20221218212808.png

至此,我们制作成功了可以直接在前端使用的“书强体”,并获得了已发布到服务器的字体图标链接。

图片

网页使用

直接上代码:

图片

通过 @font-face 声明自定义字体,其中 font-family 定义了字体名称,如“jiaguwen”。

接着使用网上比较成熟的兼容性写法定义 CSS jiaguwen 类,在元素中通过 class=“jiaguwen”即可使用,该元素下的所有节点均会生效,对应上例中,对应的文字将会使用“书强体”。

有同学会很好奇怎么有个 “”,这其实是 h5 中对应 Unicode 码 “e615” 的转义写法,对应我自定义的图标 “SSU”。

打开网页“书强体”甲骨文js.jirengu.com/jugikujuxu 」 ,效果如下:

QQ20221219-074100@2x.png

至此,大功告成!

Mac 安装字体

直接将字体下载到本地,点击 “iconfont.ttf” 文件安装。

Pasted image 20221219071755.png

打开“字体册”应用可以看到安装成功的“iconfont”字体。

Pasted image 20221219072216.png

接下来在文本编辑软件里面应用字体即可,比方说我用的是“Sublime Text” 和 “Keynote”。

Pasted image 20221219072810.png

最后来看看字体安装前后效果,直接复制过来然后设置字体。

Pasted image 20221219071610.png

科普知识点

Unicode 编码共有 3 字节,即0x000000 – 0xFFFFFF,可以表示 2 的 24 次方个字符,已录入约 100 万个字符,为世界上的每一个符号都给予一个独一无二的编码,可以通过 unicode-table.com/cn/blocks/ 查询字符对应编码。

按编码范围,你可以完全自己写个代码将所有 unicode 字符打印出来。

直接上代码:

allUnicodeDemo.png

也可以打开“全部 Unicode 字符网页”js.jirengu.com/suxowujija 」 ,因为字符太多,会有点卡。

Emoji 字符(🤣🤗🤭🤩🤣🤗🤭🤩😀🫡🏀⚽🔯✡🆘🔞🚱🚳🚯🚷📵💯🆙🆒🃏🗯💭🏹⛳️🏈⚽️🏀🦅🦉☯🔯✡☸☪☣⚛☢🆎)也在 Unicode 编码中,还有一些看着像乱码的特殊字符( ૮₍ ˊ ᵔ ˋ₎ა⁰̷̴͈꒨⁰̷̴͈꧁]ۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖʕ̡̢̡ʘ̅͟͜͡ʘ̲̅ʔ̢̡̢ ]ۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖۖ꧂ʕ̡̢̡ʘ̅͟͜͡ʘ̲̅ʔ̢̡̢‱🂡૮₍ 。•.•。₎ა)。

Unicode是变长编码,如果 2 字节能表示,则直接用2 字节,当 2 字节表示不下时才用 3 字节。

感兴趣可以看看阮一峰的《字符编码笔记:ASCII,Unicode 和 UTF-8》和梁月的《你需要知道的字体编码知识》

字体编码还会涉及一些 base64 编码知识,感兴趣可以看看《一文读懂base64编码》

字体兼容优先级,以及推进兼容次序,WOFF2 > WOFF > OFT/TTF(兼容性好但体积大),更多详见《不同的字体文件类型(OTF、TTF、WOFF、WOFF2)》《网页中用什么格式的字体 eof/svg/ttf/woff/woff2 ?》各自定义字体文件介绍。

全文完,如果觉得写得不错,那就点个“关注”或者“在看”。

如果转载本文,文末务必注明:“转自微信公众号:书强号”。

我是美团买菜前端盛书强,专注于大前端开发,欢迎和各位大前端大牛做朋友,教学相长。

文中相关代码已上传至 github.com/shengshuqia…

今天的文章从 0 到 1 设计一套“书强”体甲骨文字体实践分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/17479.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注