解决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绘制图形
});
相关推荐
无责任此方_修行中几秒前
插件+1:MiaoMint —— 类 RayCast 的标签管理工具
前端·javascript·vibecoding
kyriewen8 分钟前
我手写了一版 React Compiler:AI 最常漏的 3 个 memo 场景
前端·javascript·ai编程
默_笙8 分钟前
🚨 从 LIKE 到倒排索引:MySQL 搜不动的内容,ES 是怎么接住的
前端·javascript
呃呃呃呃ex10 分钟前
3. JavaScript 异步编程:Promise、async/await、Generator 与异步调度
前端·javascript
kyriewen11 分钟前
5 次优化让首屏快 3.6 秒,只有 1 次是改代码
前端·javascript·程序员
禁止摆烂_才浅11 分钟前
Axios 完整封装合集(鉴权 + 重复拦截 + Loading + 缓存 + 统一错误 + 请求重试|全代码逐行注释)
前端·javascript·axios
OpsEye13 分钟前
怎么判断企业采购的大模型,实际投入产出值不值得?
javascript·ai编程
一条溺水的鱼15 分钟前
一次讲透 JS Promise —— 状态、用法和 4 个静态方法
javascript
asinnn16 分钟前
8GB 视频只读取 66KB?聊聊浏览器端大文件低内存元数据修改的实现原理
javascript
沙蒿同学17 分钟前
Wails v2 实战:用 Go + Vue3 做一个真正能用的 AI 桌面应用
前端·javascript·后端