解决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绘制图形
});
相关推荐
柳杉8 分钟前
从动漫水面到赛博飞船:这位开发者的Three.js作品太惊艳了
前端·javascript·数据可视化
khddvbe9 分钟前
C++并发编程中的死锁避免
开发语言·c++·算法
wWYy.1 小时前
STL:list
开发语言·c++
TON_G-T1 小时前
day.js和 Moment.js
开发语言·javascript·ecmascript
飞Link1 小时前
具身智能核心架构之 Python 行为树 (py_trees) 深度剖析与实战
开发语言·人工智能·python·架构
Irene19911 小时前
JavaScript 中 this 指向总结和箭头函数的作用域说明(附:call / apply / bind 对比总结)
javascript·this·箭头函数
2501_921930832 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-appearance(更推荐自带的Appearance)
javascript·react native·react.js
还是大剑师兰特2 小时前
Vue3 中 computed(计算属性)完整使用指南
前端·javascript·vue.js
码云数智-园园2 小时前
2026 年前端开发趋势:AI 赋能、组件化与跨端一体化的深度融合
开发语言
weixin_423533992 小时前
windows11安装飞桨paddlepaddle,python3.13
开发语言