南昌市新农村建设网站,网站收录代做,做网站如何找广告商,旅游 网站建设目标本文简介
点赞 关注 收藏 学会了 如果你使用 Fabric.js 做编辑类的产品#xff0c;有可能需要给用户配置字体。
这次就讲讲在 Fabric.js 中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推荐一个精简字体库的工具。 学习本文前#xff0c;你必须有一点…本文简介
点赞 关注 收藏 学会了 如果你使用 Fabric.js 做编辑类的产品有可能需要给用户配置字体。
这次就讲讲在 Fabric.js 中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推荐一个精简字体库的工具。 学习本文前你必须有一点 Fabric.js 的基础如果没了解过 Fabric.js 可以阅读一下 《Fabric.js 从入门到膨胀》 创建文本时设置字体
在 Fabric.js 中使用自定义字体库时需要用到 fontfaceobserver.js 这个工具至于为什么稍后会说到。
在创建文本时就设置字体需要做以下几步
在 CSS 里引入字体。使用 Fabric.js 创建画布。等字体加载完成后再设置文本字体。将文本添加到画布中。 在本例中我使用 IText 创建文本在创建时通过它的 fontFamily 属性就可以设置自定义字体。 先看看本例效果 我使用斗鱼的字体听说是可以免费使用希望没骗我
按照前面说到的步骤去实现
style/* 引入斗鱼字体 *//* 我把字体放到本地了字体路径你们需要根据自己的项目去修改 */font-face {font-family: douyu;src: url(../../fonts/douyu.ttf);}
/style!-- 画布元素 --
canvas idc width300 height300 styleborder: 1px solid #ccc/canvas!-- 引入 fontfaceobserver.js 和 fabric.js --
script src../../script/fontfaceobserver.js/script
script src../../script/fabric.js/scriptscript// 创建画布const canvas new fabric.Canvas(c)// 监听斗鱼字体加载const douyuFont new FontFaceObserver(douyu)// 等字体加载完成或者失败后再执行设置字体的douyuFont.load()// 加载成功.then(() {// 创建文本const iText new fabric.IText(雷猴, {fontFamily: douyu // 设置字体})// 将文本添加到画布中canvas.add(iText)})// 加载失败.catch(() {console.error(字体加载失败)})
/script
因为字体是一种资源文件引用资源文件就需要时间去加载。
创建画布渲染文本的速度可能会比加载字体资源快很多所以需要用到 fontfaceobserver.js 去监听字体加载结果。
fontfaceobserver.js 官网fontfaceobserver.js github地址 fontfaceobserver.js 的详细用法可以点击上面的官网查阅。
简单的用法如下
stylefont-face {font-family: 自定义字体名;src: url(字体包路径);}
/stylescript
const font new FontFaceObserver(自定义字体名)font.load().then().catch()
/script
load() 方法的作用是监听字体加载结果加载成功就执行 then 的代码加载失败就执行 catch 代码。 动态修改字体
如果需要在项目运行时动态修改字体需要做以下几步
提前加载好要用的字体库。创建画布。等字体加载完成后再设置文本字体。将文本添加到画布中。修改字体前先获取要修改的文本元素。使用 set 方法设置文本的 fontFamily 属性。刷新画布。 本例用到斗鱼和阿里的字体我查过了说是免费使用。 根据上面提到的几步动手编码
style/* 我把字体放到本地了字体路径你们需要根据自己的项目去修改 *//* 引入斗鱼字体 */font-face {font-family: douyu;src: url(../../fonts/douyu.ttf);}/* 引入阿里字体 */font-face {font-family: ali;src: url(../../fonts/AlibabaPuHuiTi-2-35-Thin.ttf);}
/style!-- 设置字体的按钮 --
button οnclicksetFont(douyu)斗鱼/button
button οnclicksetFont(ali)阿里/button!-- 画布元素 --
canvas idc width300 height300 styleborder: 1px solid #ccc/canvas!-- 引入 fontfaceobserver.js 和 fabric.js --
script src../../script/fontfaceobserver.js/script
script src../../script/fabric.js/scriptscript// 创建画布const canvas new fabric.Canvas(c)// 创建文本const iText new fabric.IText(雷猴)// 将文本添加到画布中canvas.add(iText)// 设置字体function setFont(font) {// 监听当前要设置的字体加载情况let fontFamily new FontFaceObserver(font)// 加载完成后执行fontFamily.load()// 加载成功.then(() {let target canvas.getActiveObject()if (target) {target.set(fontFamily, font)canvas.requestRenderAll()}})// 加载失败.catch(() {console.error(字体加载失败)})}
/script 精简字体库
关于 Fabric.js 如何使用自定义字体库的内容说完了但日常工作中我还遇到一个问题某些特定地方会使用一些特殊字体比如数字、项目名等地方。
通常字体库会包含大量字体但实际项目中可能只有几个字会用到特殊字体。
经过我长时间的审问一位不愿透露姓名的网友终于透露出他用到精简字体库的工具 Fontmin 有客户端也可以直接使用终端操作。
客户端也提供了mac和windows两个版本操作起来非常简单。有需要的工友可以打开链接获取。
Fontmin官网Fontmin github地址 代码仓库
本文完整代码可通过下方链接获取。
⭐ Fabric.js 使用自定义字体 推荐阅读
《Fabric.js 从入门到_ _ _ _ _ _》
《Fabric.js 样式不更新怎么办》
《Fabric.js 自定义控件》
《Fabric.js 讲解官方demoStickman》
《Fabric.js 拖拽顶点修改多边形形状》
《Fabric.js 复制粘贴元素》 点赞 关注 收藏 学会了 代码仓库
