解决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绘制图形
});
相关推荐
竹林81811 小时前
Web3表单签名验证:我用 wagmi 和 ethers 给 DApp 加了一个“免密登录”,踩坑记录全在这了
javascript
用户69903048487511 小时前
try catch使用场景 处理同步代码错误兼容用的
javascript·uni-app
LDR00611 小时前
Type-C 快充全面升级!LDR6601 赋能个人护理便携电机,重塑剃须刀 / 理发器新体验
c语言·开发语言
雪碧聊技术11 小时前
Tree.js是什么?一文讲透
开发语言·javascript·ecmascript
码云数智-园园11 小时前
C++20 Modules 模块详解
java·开发语言·spring
VidDown11 小时前
VidDown 工具站:免费、本地优先的开发者工具箱
javascript·编辑器·音视频·视频编解码·视频
swordbob12 小时前
NIO的channel中什么是 fd(File Descriptor,文件描述符)
java·开发语言·nio
源分享12 小时前
Java线程同步的多种实现方法(非常详细)
java·开发语言·jvm
Luminous.12 小时前
C语言--day30
c语言·开发语言
何以解忧,唯有..13 小时前
Go语言循环语句详解:for、range与循环控制
开发语言·算法·golang