解决js+canvas使用ttf格式字体,首次加载不生效。

一、如何使用ttf格式字体?

1. 将ttf放到项目文件夹或其他位置

2. 在CSS中定义一个新的字体

css 复制代码
@font-face {
  font-family: 'CXGDT'; // 定义字体名称
  src: url('./assets/CXGDT.ttf'); // 文件路径
}

3.在HTML元素中使用该字体。

html 复制代码
<p style="font-family: 'CXGDT';">这段文字使用了自定义字体。</p>

二、解决首次加载时不生效

1.原因:字体未加载完导致的

2.解决方法:

javascript 复制代码
document.fonts.load('24px CXGDT').then(() => {  
 // 利用canvas绘制图形
});
相关推荐
tangdou36909865522 分钟前
可怕!我的Nodejs系统因为日志打印了Error 对象就崩溃了😱 Node.js System Crashed Because of Logging
前端·javascript·后端
Mintopia28 分钟前
🎨 数据增强技术在 AIGC 训练中的应用:提升 Web 生成的多样性
前端·javascript·aigc
xiaohua0708day31 分钟前
关于解决js中MediaRecorder录制的webm视频没有进度条的问题
javascript·音视频
程序铺子32 分钟前
如何使用 npm 安装 sqlite3 和 canvas 这些包
javascript·npm·node.js
熬了夜的程序员36 分钟前
【LeetCode】69. x 的平方根
开发语言·算法·leetcode·职场和发展·动态规划
通往曙光的路上37 分钟前
day9_elementPlus2
javascript·vue.js·elementui
一只小风华~39 分钟前
Vue Router 的三种历史模式详解
前端·javascript·vue.js·笔记·学习·前端框架·ecmascript
一只小风华~43 分钟前
Vue Router 导航守卫
java·前端·javascript·vue.js·笔记·html
呼叫69451 小时前
理解 JavaScript 中的 this 上下文保存
javascript
草莓熊Lotso1 小时前
C++ 手写 List 容器实战:从双向链表原理到完整功能落地,附源码与测试验证
开发语言·c++·链表·list