解决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绘制图形
});
相关推荐
勿忘,瞬间11 分钟前
多线程之进阶修炼
java·开发语言
橘子编程40 分钟前
JavaScript与TypeScript终极指南
javascript·ubuntu·typescript
hoiii18741 分钟前
CSTR反应器模型的Simulink-PID仿真(MATLAB实现)
开发语言·matlab
炘爚1 小时前
C++ 右值引用与程序优化
开发语言·c++
叫我一声阿雷吧1 小时前
JS 入门通关手册(45):浏览器渲染原理与重绘重排(性能优化核心,面试必考
javascript·前端面试·前端性能优化·浏览器渲染·浏览器渲染原理,重排重绘·reflow·repaint
大家的林语冰1 小时前
《前端周刊》尤大开源 Vite+ 全家桶,前端工业革命启动;尤大爆料 Void 云服务新产品,Vite 进军全栈开发;ECMA 源码映射规范......
前端·javascript·vue.js
si莉亚1 小时前
ROS2安装EVO工具包
linux·开发语言·c++·开源
清心歌2 小时前
CopyOnWriteArrayList 实现原理
java·开发语言
jiayong232 小时前
第 8 课:开始引入组合式函数
前端·javascript·学习
良木生香2 小时前
【C++初阶】C++入门相关知识(2):输入输出 & 缺省参数 & 函数重载
开发语言·c++