解决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绘制图形
});
相关推荐
w_zero_one10 分钟前
递归算法(一)
java·开发语言·算法
OpsEye28 分钟前
大模型 Token 计量不准,是什么原因,怎么解决??
javascript·ai编程
Julien20041 小时前
管理机密(一)
运维·服务器·开发语言·学习方法
Chen_harmony1 小时前
七、STL与string类
开发语言·c++
沐晓时光1 小时前
C语言入门,字符串和字符串函数知识讲解
c语言·开发语言
xxxiugou1232 小时前
C++命名空间与引用全解析
开发语言·c++
独隅2 小时前
WebStorm Windows 版 React / Next.js 实战替换指南
javascript·windows·webstorm
冷眸_2 小时前
同名食材不能直接相减:一个 JavaScript 用量模型的边界
javascript
apollo_qwe2 小时前
接口超时了,前端为什么不能直接重试?
javascript·http
yangmu32033 小时前
编程语言发展简史:从机器指令到智能协作
开发语言