Fabric.js 使用自定义字体

这篇具有很好参考价值的文章主要介绍了Fabric.js 使用自定义字体。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文简介

点赞 + 关注 + 收藏 = 学会了


如果你使用 Fabric.js 做编辑类的产品,有可能需要给用户配置字体。

这次就讲讲在 Fabric.js 中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推荐一个精简字体库的工具


学习本文前,你必须有一点 Fabric.js 的基础,如果没了解过 Fabric.js 可以阅读一下 《Fabric.js 从入门到膨胀》



创建文本时设置字体

Fabric.js 中使用自定义字体库时,需要用到 fontfaceobserver.js 这个工具,至于为什么稍后会说到。

在创建文本时就设置字体,需要做以下几步:

  1. CSS 里引入字体。
  2. 使用 Fabric.js 创建画布。
  3. 等字体加载完成后再设置文本字体。
  4. 将文本添加到画布中。

在本例中,我使用 IText 创建文本,在创建时通过它的 fontFamily 属性就可以设置自定义字体。


先看看本例效果

Fabric.js 使用自定义字体

我使用斗鱼的字体,听说是可以免费使用,希望没骗我~

按照前面说到的步骤去实现:

<style>
  /* 引入斗鱼字体 */
  /* 我把字体放到本地了,字体路径你们需要根据自己的项目去修改 */
  @font-face {
    font-family: douyu;
    src: url('../../fonts/douyu.ttf');
  }
</style>

<!-- 画布元素 -->
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<!-- 引入 fontfaceobserver.js 和 fabric.js -->
<script src="../../script/fontfaceobserver.js"></script>
<script src="../../script/fabric.js"></script>

<script>
	// 创建画布
	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 的详细用法可以点击上面的官网查阅。

简单的用法如下:

<style>
  @font-face {
    font-family: 自定义字体名;
    src: url('字体包路径');
  }
</style>

<script>
const font = new FontFaceObserver('自定义字体名')

font.load()
  .then()
  .catch()
</script>

load() 方法的作用是监听字体加载结果,加载成功就执行 then 的代码,加载失败就执行 catch 代码。



动态修改字体

如果需要在项目运行时动态修改字体,需要做以下几步:

  1. 提前加载好要用的字体库。
  2. 创建画布。
  3. 等字体加载完成后再设置文本字体。
  4. 将文本添加到画布中。
  5. 修改字体前,先获取要修改的文本元素。
  6. 使用 set 方法设置文本的 fontFamily 属性。
  7. 刷新画布。

本例用到斗鱼和阿里的字体,我查过了,说是免费使用。

Fabric.js 使用自定义字体

根据上面提到的几步动手编码

<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 onclick="setFont('douyu')">斗鱼</button>
<button onclick="setFont('ali')">阿里</button>

<!-- 画布元素 -->
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<!-- 引入 fontfaceobserver.js 和 fabric.js -->
<script src="../../script/fontfaceobserver.js"></script>
<script src="../../script/fabric.js"></script>

<script>
	// 创建画布
	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 如何使用自定义字体库的内容说完了,但日常工作中我还遇到一个问题:某些特定地方会使用一些特殊字体,比如数字、项目名等地方。

通常字体库会包含大量字体,但实际项目中可能只有几个字会用到特殊字体。

经过我长时间的审问,一位不愿透露姓名的网友终于透露出他用到精简字体库的工具

Fabric.js 使用自定义字体

Fabric.js 使用自定义字体

Fontmin 有客户端,也可以直接使用终端操作。

客户端也提供了mac和windows两个版本,操作起来非常简单。有需要的工友可以打开链接获取。

  • Fontmin官网
  • Fontmin github地址


代码仓库

本文完整代码可通过下方链接获取。

⭐ Fabric.js 使用自定义字体



推荐阅读

👍《Fabric.js 从入门到_ _ _ _ _ _》

👍《Fabric.js 样式不更新怎么办?》

👍《Fabric.js 自定义控件》

👍《Fabric.js 讲解官方demo:Stickman》

👍《Fabric.js 拖拽顶点修改多边形形状》

👍《Fabric.js 复制粘贴元素》


点赞 + 关注 + 收藏 = 学会了
代码仓库文章来源地址https://www.toymoban.com/news/detail-711423.html

到了这里,关于Fabric.js 使用自定义字体的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css自定义字体@font-face的使用方法

    可以设置多个 src 属性,以指定不同的字体资源路径。这样做的目的是为了增强字体的兼容性,以确保在不同的浏览器和设备上都能正常加载字体。 上面设置了三个不同的字体资源路径,分别是 .eot、.woff、.ttf 格式的字体文件,当浏览器无法识别第一个字体文件时,会自动尝

    2024年02月17日
    浏览(59)
  • 使用 pnpm + Monorepo + rollup 实现Psd、Sketch 转 json开源库, 该json支持作为fabric.js画布模板

    最近使用 pnpm + Monorepo + rollup 开源了一个工具库 tojson.js tojson.js 是一个支持解析 Psd、Sketch 转 json 的类库, 该 json 满足 fabric.js 画布渲染的数据格式. 后期也会增加 ppt、pdf 格式 为什么要使用 pnpm + Monorepo ? 不止开源了一个工具库 tojson.js, 也开源了 sketchtojson, pst-json.js 库, tojson.j

    2024年01月20日
    浏览(41)
  • CKEditor5+vue3使用以及如何添加新工具栏,自定义设置字体fontFamily

    官网地址:https://ckeditor.com/ckeditor-5/online-builder/ 官网提供了以下几种模式,一般使用经典模式居多,具体差别可访问官网自己试一下。 基本的使用方法(经典模式),先别急着操作,看完再决定使用哪种方法。 代码 效果如图 以上基本的工具栏配置比较少,如果基本的满足你的

    2024年02月10日
    浏览(67)
  • Fabric.js 图案笔刷

    带尬猴,我是德育处主任 Fabric.js 有图案画笔功能,这个功能可以简单理解成“刮刮卡”效果。 如果只是看 Fabric.js 文档可能还不太明白 图案画笔 PatternBrush 是如何使用。 本文将讲解如何配置这款画笔的基础属性。 先看看效果 图案画笔(笔刷)的用法其实和普通的画笔差不

    2024年02月08日
    浏览(31)
  • canvas+fabric实现自定义封面

    2024年01月21日
    浏览(31)
  • Fabric.js 复制粘贴元素

    点赞 + 关注 + 收藏 = 学会了 当你要复制一个 fabric 的元素时,你考虑到的是什么?是深拷贝当前选中对象再添加到画布中? 其实, fabric.js 提供了一个克隆方法,在 fabric.js 官网的案例里也有这个demo:Fabric.js demos · Copy and Paste。 这次就讲讲这个 demo。 动手之前,我们先理清思

    2024年02月08日
    浏览(41)
  • Fabric.js 样式不更新怎么办?

    带尬猴,我嗨德育处主任 不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式,但刷新画布却没更新元素样式? 如果你也遇到同样的问题的话,可以尝试使用本文的方法。 我先举个例子。 在这个例子中,页面运行1秒后,我想通过 rect.fill = \\\'red\\\' 的方

    2024年02月07日
    浏览(37)
  • Fabric.js 元素选中状态的事件与样式

    带尬猴! 你是否在使用 Fabric.js 时希望能在选中元素后自定义元素样式或选框(控制角和辅助线)的样式? 如果是的话,可以放心往下读。 本文将手把脚和你一起过一遍 Fabric.js 在对象元素选中后常用的样式设置。 我将对象元素选中后的设置分成3类进行讲解: 控制角 辅助

    2024年02月11日
    浏览(43)
  • HTML5 2d canvas 库 —— Fabric.js 和 Konva.js

    原生 canvas 的操作主要基于上下文,需要使用者自己从0开始去实现一些基本功能,比较复杂。而 canvas 库文件则封装好了许多便利的对象,使得用户可以在比较高级的层面上进行绘制。 Fabric.js 官网:Fabric.js Javascript Canvas Library Konva.js 官网:Konva 中文文档 中文API 优点: 比较老

    2024年02月12日
    浏览(35)
  • 微信小程序自定义字体样式、字体修改、第三方字体设置

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月04日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包