解决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绘制图形
});
相关推荐
threelab28 分钟前
Three.js 物理模拟着色器 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器
武器大师7230 分钟前
lv_binding_js 代码解读
开发语言·javascript·ecmascript
不知名的老吴31 分钟前
线程的生命周期之线程“插队“
java·开发语言·python
kaikaile19951 小时前
数字全息图处理系统(C# 实现)
开发语言·c#
Patrick_Wilson2 小时前
router.replace 之后紧跟 reload,页面为什么无限刷新?
javascript·react.js·浏览器
秋93 小时前
Go语言(Golang)开发工程师全景解析:岗位职责·语言优势与使用场景·各城市薪资·发展前景·高考志愿填报(2026版)
开发语言·golang·高考
mONESY3 小时前
JavaScript 栈、队列、数组与链表核心知识点总结
javascript·面试
huangdong_3 小时前
1688商品图片采集技术解析:登录态处理与SKU图自动分类
开发语言
ZengLiangYi3 小时前
TypeScript 项目配置:tsconfig、ESM、路径别名
javascript·typescript·aigc
chase_my_dream4 小时前
C++ + SLAM 高频面试问题整理
开发语言·c++·面试