解决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绘制图形
});
相关推荐
qq_4061761410 分钟前
深入浅出 Pinia:Vue3 时代的状态管理新选择
javascript·vue.js·ecmascript
m0_5180194831 分钟前
C++与机器学习框架
开发语言·c++·算法
ZTLJQ33 分钟前
深入理解逻辑回归:从数学原理到实战应用
开发语言·python·机器学习
qq_4176950537 分钟前
C++中的代理模式高级应用
开发语言·c++·算法
德育处主任Pro1 小时前
前端元素转图片,dom-to-image-more入门教程
前端·javascript·vue.js
波波0071 小时前
每日一题:.NET 中的“反射”是什么?
开发语言·.net
qq_461489332 小时前
C++与Qt图形开发
开发语言·c++·算法
叫我一声阿雷吧2 小时前
JS 入门通关手册(23):JS 异步编程:回调函数与异步本质
javascript·es6·前端面试·回调函数·回调地狱·js异步编程·异步本质
Evand J2 小时前
【三维飞行器】RRT路径规划与TOA定位仿真系统,MATLAB例程,路径起终点、障碍物、TOA锚点等均可设置。附下载链接
开发语言·matlab·无人机·定位·rrt·toa·三维航迹规划
froginwe112 小时前
Rust 异步编程
开发语言