解决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绘制图形
});
相关推荐
动词ing15 分钟前
【C语言】自定义函数+指针入门
c语言·开发语言·算法
重生之后端学习29 分钟前
283. 移动零[简单]✅
开发语言·数据结构·算法·leetcode·职场和发展
动词ing1 小时前
【C语言】结构体+文件基础
c语言·开发语言·数据结构
caimouse2 小时前
ReactOS 窗口系统分析(7):分层窗口与绘制辅助 — layered.c + draw.c
c语言·开发语言
丰锋ff2 小时前
基于 Qt 的智慧社区物业管理系统
开发语言·qt
夜不会漫长2 小时前
C++入门(1)
开发语言·c++·算法
大鹏说大话2 小时前
从爬虫到决策引擎:大数据下自媒体如何用Python挖掘用户痛点
开发语言·爬虫·python
Niuguangshuo2 小时前
silero-vad:超轻量级开源 VAD 实践指南
开发语言·python
哭哭啼3 小时前
JAVA服务问题诊断
java·开发语言·jvm
NeilCarmack4 小时前
Deepseek-harness增加桌面版端序列:第 2 讲 · spawn Electron:当前进程如何“交棒“
前端·javascript·electron