解决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绘制图形
});
相关推荐
c++之路16 分钟前
CMake 系列教程(二):基础命令详解
开发语言·c++
南境十里·墨染春水4 小时前
C++ 工厂模式:从入门到进阶,彻底掌握对象创建的艺术
开发语言·c++·算法
yuanyxh4 小时前
Mac 软件推荐
前端·javascript·程序员
万少4 小时前
AtomCode开发微信小程序《谁去呀》 全流程
前端·javascript·后端
JosieBook6 小时前
【数据库】时序预测能力的分级进化:TimechoAI如何让每一类用户都能精准预见未来
java·开发语言·数据库
加号36 小时前
【C#】 文件与目录管理:创建、删除操作的技术解析
开发语言·c#
diving deep6 小时前
脚本速览-python
开发语言·python
一生了无挂7 小时前
Java处理JSON技巧教学(从基础到高阶实战全覆盖)
java·开发语言·json
swordbob7 小时前
Spring 单例 Bean 是线程安全的吗?
java·开发语言
学Linux的语莫7 小时前
Vue 3 入门教程
前端·javascript·vue.js