解决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绘制图形
});
相关推荐
AZaLEan__18 分钟前
事件循环讲解
javascript
变与不变80619 分钟前
引用类型、内存原理与对象
开发语言·前端·javascript
wuyk55519 分钟前
从零吃透 MQTT 通信|第 5 章 MQTT 心跳保活机制深度优化,断线检测与智能自动重连
c语言·开发语言·stm32·学习
Highcharts21 分钟前
Highcharts实战讲解|散点图+多项式回归曲线复杂图表示列Demo
javascript·数据可视化
梨想橙汁27 分钟前
Git 常用命令大全:提交、查看日志、版本回退、文件撤销
前端·javascript
weixin_4407305027 分钟前
socket解决多次输入问题-大数据接收问题-模块动态导入
java·开发语言·servlet
mONESY36 分钟前
对话一长上下文就爆?LangChain.js Memory 三种淘汰策略(截断 / 总结 / 检索)实战
javascript
励志不掉头发的内向程序员1 小时前
【LibreCAD 2D架构】从鼠标点击到图形创建:RS_ActionDrawLine交互流程与状态机解析
开发语言·c++·qt·学习·系统架构·计算机外设·交互
雪芽蓝域zzs1 小时前
第三十二节:部门组织管理(el‑tree 组织树
前端·javascript·vue.js
www_aiyuanma_vip1 小时前
Java个人博客系统
java·开发语言