解决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绘制图形
});
相关推荐
王的宝库2 分钟前
GO常用标准库包
开发语言·后端·golang
geovindu18 分钟前
python: Face Recognition
开发语言·后端·python·人脸识别
三十而立洋24 分钟前
JavaScript 原型链:一张图讲透「对象继承」的底层真相
前端·javascript
平头哥技术团队29 分钟前
Day 13 | 调 line-height 和 margin:三处间距让名片页脱离模板感
开发语言·前端·javascript·学习·html5
黑马程序员毕设1 小时前
基于Java的仪器管理系统设计与实现
java·开发语言·spring boot·后端·微信小程序
平头哥AI1 小时前
Day 13 | 一个函数回两个值:Go 的 error 是从哪冒出来的
开发语言·后端·golang
asdzx671 小时前
Python 实现 PDF 文本查找与高亮标注
开发语言·python·pdf
zander2581 小时前
LeetCode 1143. 最长公共子序列
开发语言·python·算法
Sumerking1 小时前
llc_control.c 专项评审(v3 更新版)
c语言·开发语言·算法·obc
老三_Micheal1 小时前
一文搞懂 Axios 请求参数详解:headers、params 与 body 的区别和使用场景
javascript