解决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绘制图形
});
相关推荐
鬼手点金27 分钟前
nanoGPT/nanochat 能做出 DeepSeek/Qwen 这样的大模型吗?
服务器·前端·javascript·bug·openclaw
软件技术NINI1 小时前
美妆商城html+Css+js 4页
javascript·css·html
蛋蛋的就会顺顺的1 小时前
hot100 p0——栈,贪心算法,动态规划
java·前端·javascript·算法·leetcode·力扣
码艺-Alimjan2 小时前
Tauri 源码备份 · 打包 & 解压 总结,源码收集之路
前端·javascript·vue.js
死磕音视频2 小时前
让小模型做选择题:限定候选项并读取 logits 概率的入门实践(附 Python 代码)
开发语言·python·大模型·文本分类·transformers
顽疲5 小时前
Java vue 养老系统源码详解:月账单 care_month_bill 与 Quartz 扣费 Job 实践
java·开发语言·vue.js·vue养老·springboot养老·java养老
DevUp5 小时前
标着 JavaScript 的 Wiki 与知识库:既不是 CMS 也不是 SSG(番外三)
javascript·node.js·cms
Wang's Blog5 小时前
Java 项目实战: 交友项目 - 安装开发工具与环境准备
java·开发语言·交友
kyriewen5 小时前
我上手了 Vite+ 1.0:Node 不用自己装,lint 却翻车了
前端·javascript·程序员
鹏多多6 小时前
前端是如何死去的?| 完整时间线
前端·javascript·程序员