解决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绘制图形
});
相关推荐
benpaodeDD5 小时前
视频10,11,12,13——java程序的加载与执行,安装jdk
java·开发语言
一颗牙牙5 小时前
安装mmcv
开发语言·python·深度学习
大空大地20266 小时前
C#高级语法总结
开发语言·c#
ytttr8736 小时前
DSP 28335 CAN总线通信程序
开发语言·stm32·单片机
XinZong6 小时前
OpenClaw 中最经典的 6 款skill,真正能进工作流的 skills
javascript·后端
XiYang-DING6 小时前
【Java SE】JVM
java·开发语言·jvm
小短腿的代码世界6 小时前
Qt进程间通信全体系深度解析:从QSharedMemory到本地Socket的七层武器
开发语言·qt
小陶来咯6 小时前
小智接入懒人说书MCP
java·开发语言
XinZong6 小时前
2026 AI社交深度评测:InStreet 与 ClawReach 核心差异解析
javascript
Bug-制造者7 小时前
【Vue3 实战】全局错误处理体系搭建:实现业务与错误彻底解耦
前端·javascript·vue.js