解决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绘制图形
});
相关推荐
兔兔兔兔16 小时前
记录C++ 8
开发语言·c++
名字还没想好☜7 小时前
Go 1.23 range-over-func 迭代器实战:自定义可迭代类型、提前退出与惰性求值
开发语言·后端·golang·go·迭代器
喵同志不止步于码农7 小时前
Java Caffeine 快速入门
java·开发语言·后端·并发·缓存一致性
2kπ7 小时前
QT开发笔记
开发语言·笔记·qt
青 春 记 忆8 小时前
零基础入门Python15|关联、聚合、索引与事务:订单数据库
开发语言·python·后端开发
江屿风8 小时前
【STM32基础篇】【嵌入式生态问题及历史追溯】流食般投喂
大数据·开发语言·人工智能·笔记·stm32·嵌入式硬件
学习星球8 小时前
Astro 全栈实战:拆解 RealWorld 项目
前端·javascript·架构·系统架构·前端框架·c5全栈
charlie1145141918 小时前
深探std::vector:三指针、扩容与迭代器失效
开发语言·c++·开源项目
asyxchenchong8889 小时前
R语言混合效应(多水平/层次/嵌套)模型及贝叶斯实现技术应用
开发语言·r语言