解决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 小时前
uni-app 也能使用 App.vue?解决 uniapp 无法使用公共组件问题
开发语言·前端·javascript
Mem0rin6 小时前
[Rust]模块关键词和哈希表
开发语言·rust
SuperEugene6 小时前
Promise 从入门到实战:同步异步、回调地狱、then/catch/finally 全解
前端·javascript·面试
lars_lhuan6 小时前
Go 方法
开发语言·后端·golang
前端 贾公子6 小时前
uniapp 小程序获取后端的二进制 保存到手机相册
java·前端·javascript
灰色小旋风6 小时前
力扣 12 整数转罗马数字 C++
开发语言·c++·leetcode
智能工业品检测-奇妙智能6 小时前
快速直播:Node.js + FFmpeg + flv.js 全栈实战
javascript·ffmpeg·node.js
LONGZETECH6 小时前
智能网联汽车故障诊断仿真教学软件技术解析——C/S架构落地与全模块实现
c语言·开发语言·架构·汽车·汽车仿真教学软件·汽车教学软件·智能网联汽车软件
JIes__6 小时前
lua语法——基础知识总结
开发语言·lua
_OP_CHEN6 小时前
【MySQL数据库基础】(五)MySQL 数据类型深度解析:选对类型 = 性能拉满!
linux·开发语言·数据库·sql·mysql·数据类型·c/c++