解决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绘制图形
});
相关推荐
king王一帅34 分钟前
Incremark Solid 版本上线:Vue/React/Svelte/Solid 四大框架,统一体验
前端·javascript·人工智能
SmartRadio5 小时前
CH585M+MK8000、DW1000 (UWB)+W25Q16的低功耗室内定位设计
c语言·开发语言·uwb
rfidunion5 小时前
QT5.7.0编译移植
开发语言·qt
rit84324995 小时前
MATLAB对组合巴克码抗干扰仿真的实现方案
开发语言·matlab
大、男人5 小时前
python之asynccontextmanager学习
开发语言·python·学习
hqwest5 小时前
码上通QT实战08--导航按钮切换界面
开发语言·qt·slot·信号与槽·connect·signals·emit
AC赳赳老秦6 小时前
DeepSeek 私有化部署避坑指南:敏感数据本地化处理与合规性检测详解
大数据·开发语言·数据库·人工智能·自动化·php·deepseek
不知道累,只知道类6 小时前
深入理解 Java 虚拟线程 (Project Loom)
java·开发语言
Nan_Shu_6147 小时前
学习: Threejs (1)
javascript·学习
国强_dev7 小时前
Python 的“非直接原因”报错
开发语言·python