点赞 + 关注 + 收藏 = 学会了
如果你使用 Fabric.js
做编辑类的产品,有可能需要给用户配置字体。
这次就讲讲在 Fabric.js
中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推荐一个精简字体库的工具。
学习本文前,你必须有一点 Fabric.js
的基础,如果没了解过 Fabric.js
可以阅读一下 《Fabric.js 从入门到膨胀》
在 Fabric.js
中使用自定义字体库时,需要用到 fontfaceobserver.js
这个工具,至于为什么稍后会说到。
在创建文本时就设置字体,需要做以下几步:
CSS
里引入字体。Fabric.js
创建画布。在本例中,我使用 IText
创建文本,在创建时通过它的 fontFamily
属性就可以设置自定义字体。
先看看本例效果
我使用斗鱼的字体,听说是可以免费使用,希望没骗我~
按照前面说到的步骤去实现:
因为字体是一种资源文件,引用资源文件就需要时间去加载。
创建画布渲染文本的速度可能会比加载字体资源快很多,所以需要用到 fontfaceobserver.js
去监听字体加载结果。
fontfaceobserver.js
官网fontfaceobserver.js
github地址fontfaceobserver.js
的详细用法可以点击上面的官网查阅。
简单的用法如下:
load()
方法的作用是监听字体加载结果,加载成功就执行 then
的代码,加载失败就执行 catch
代码。
如果需要在项目运行时动态修改字体,需要做以下几步:
set
方法设置文本的 fontFamily
属性。本例用到斗鱼和阿里的字体,我查过了,说是免费使用。
根据上面提到的几步动手编码
关于 Fabric.js
如何使用自定义字体库的内容说完了,但日常工作中我还遇到一个问题:某些特定地方会使用一些特殊字体,比如数字、项目名等地方。
通常字体库会包含大量字体,但实际项目中可能只有几个字会用到特殊字体。
经过我长时间的审问,一位不愿透露姓名的网友终于透露出他用到精简字体库的工具
Fontmin 有客户端,也可以直接使用终端操作。
客户端也提供了mac和windows两个版本,操作起来非常简单。有需要的工友可以打开链接获取。
本文完整代码可通过下方链接获取。
⭐ Fabric.js 使用自定义字体
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 样式不更新怎么办?》
《Fabric.js 自定义控件》
《Fabric.js 讲解官方demo:Stickman》
《Fabric.js 拖拽顶点修改多边形形状》
《Fabric.js 复制粘贴元素》
点赞 + 关注 + 收藏 = 学会了 代码仓库