解决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绘制图形
});
相关推荐
自由随风飘6 分钟前
JAVA中的面向对象-3
java·开发语言
小羊先生car30 分钟前
RTOS-F429-HAL-(动/静态)任务的创建(2026/7/27)
开发语言·算法·c#
LONGZETECH1 小时前
新能源汽车动力系统仿真硬核拆解:五系统分层架构的设计逻辑与技术权衡
c语言·开发语言·架构·汽车·汽车仿真教学软件·汽车教学软件
醉城夜风~1 小时前
C++模板详解:从基础到高级全面解析
java·开发语言·c++
张元清1 小时前
React useDropZone Hook:搭建一个文件拖放区(2026)
javascript·react.js
地球驾驶员1 小时前
NX二次开发C#-获取体的外表面
开发语言·c#
誰能久伴不乏2 小时前
深入理解 C++ 多态:对象模型与底层机制解析
开发语言·c++·架构
思码梁田2 小时前
CSS 定位详解:从相对到固定,掌握网页布局的核心
前端·javascript·css
Wang's Blog2 小时前
Go-Zero项目开发30: 微服务配置中心的设计与实现
开发语言·微服务·golang·go-zero
HH‘HH2 小时前
前端应用的离线暂停更新策略:原理、实现与最佳实践
开发语言·前端·php