解决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绘制图形
});
相关推荐
用户302822530685 分钟前
别让 Agent 被 Webhook 叫醒就开工:实现一个幂等启动层
javascript
承渊政道11 分钟前
【Python编程—从入门到实践】(Python字典:从基础语义到现代工程实践)
开发语言·python·pycharm·字典·嵌套
luj_176831 分钟前
一线一区一变破解人盯人防守密码
开发语言·网络·c++·经验分享·算法
名字还没想好☜1 小时前
Python 字符编码实战:encode/decode、UnicodeDecodeError 与 open 的 encoding 坑
开发语言·后端·python·编程语言
萧瑟余晖1 小时前
持久层选型与框架对比详解
开发语言·架构
CodeStats1 小时前
【Java 类加载器】Java 类加载器完整体系深度拆解(上):从 JVM 启动到双亲委派模型
java·开发语言·jvm·classloader·双亲委派
万少1 小时前
等不到 Apple 的折叠 iPhone,我用 DeepV4.1Flash + workBuddy 一句话自己造了一台
前端·javascript·后端
软件黑马王子1 小时前
24.Editor 资源加载:主要作用和基本原理
开发语言·前端框架·c#
luj_17681 小时前
中锋卡位与开放线博弈
c语言·开发语言·网络·经验分享·算法
未来之窗软件服务1 小时前
计算机二级[英文]-C 逻辑运算和fopen—东方仙盟
c语言·开发语言·仙盟创梦ide·东方仙盟