解决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绘制图形
});
相关推荐
Littlehero_1211 小时前
QT自定义控件之电气接线图(源码开源)
开发语言·qt
中科三方2 小时前
DNS拨测到底在拨测什么?
开发语言·github·php·dns·云拨测
软件黑马王子2 小时前
20.Resources资源加载:基本实现
开发语言·前端框架·c#
前端精髓2 小时前
React 更新 state 中的对象
javascript·react.js·ecmascript
李少兄2 小时前
Java 中只有值传递吗?
java·开发语言·python
可乐鸡翅yeah_3 小时前
hls.js 播放质量埋点实战,采集卡顿、起播、错误指标定位线上用户问题
开发语言·前端·javascript·ecmascript·音视频·m3u8·音视频在线播放
szarron3 小时前
RF Demo Kit|NanoVNA 射频演示测试板完整上手教程,滤波器、衰减器、SOLT 校准学习板
开发语言·人工智能·学习·php·射频工程·频谱仪
边境悍匪3 小时前
蜗牛学苑 Java 智能体学习 Day39|SpringAI 会话存储、Function‑Call 工具调用、MCP 思维导图复盘
java·开发语言·spring boot·学习·阿里云
万物智能信息科技3 小时前
RK3568 的多路显示移植—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
linux·开发语言·华为·开源·harmonyos
蓝悦无人机3 小时前
Qt Design Studio(QDS)4.8.2项目文件结构详解
开发语言·qt·qt creator·qds·项目文件结构·qtc