解决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绘制图形
});
相关推荐
lpfasd1235 分钟前
编程语言榜单变迁分析
开发语言·后端·scala
名字还没想好☜23 分钟前
Go 用 bufio.Scanner 读大文件踩坑:默认 64KB 行上限、Buffer 扩容与按 Token 切分
开发语言·后端·golang·go
天天鸭1 小时前
5 万处中文的老项目实现国际化,如何用架构思维完成改造?
前端·javascript·架构
Byron Loong2 小时前
【C++】重定向是什么
开发语言·c++
techdashen2 小时前
Go设计取舍之六: sync.Mutex正常模式与饥饿模式
开发语言·后端·golang
TunerT_TQ2 小时前
【智能体安全治理|专栏第9期】从“一堆规则”到“数字宪法”:智能体治理的下一个阶段
java·开发语言·安全·开源治理·大模型安全·ai基础设施·智能体安全
Aurorar0rua2 小时前
CS50 x 2024 Notes Algorithms - 07
c语言·开发语言·学习方法
月月大王的3D日记2 小时前
Three.js 入门系列(7):让甜甜圈围着我转 —— 3D文字生成
前端·javascript
程序员-Benothing3 小时前
Java ForkJoinPool 详解:从分治思想到高性能并行计算
java·开发语言·后端·面试·职场和发展
脚踏实地皮皮晨3 小时前
003006001_WrapPanel控件
开发语言·c#·.net·wpf·visual studio