解决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绘制图形
});
相关推荐
小白学大数据几秒前
Python 爬虫如何分析并模拟 JS 动态请求
开发语言·javascript·爬虫·python
2301_79651252几秒前
React Native鸿蒙跨平台开发包含输入收入金额、选择收入类别、记录备注和日期等功能,实战react-native-paper组件
javascript·react native·react.js
秦少游在淮海1 分钟前
网络缓冲区 · 通过读写偏移量维护数据区间的高效“零拷贝” Buffer 设计
linux·开发语言·网络·tcp协议·muduo·网络缓冲区
qs70164 分钟前
c直接调用FFmpeg命令无法执行问题
c语言·开发语言·ffmpeg
zoujiahui_20184 分钟前
python中模型加速训练accelerate包的用法
开发语言·python
码界奇点5 分钟前
基于Golang的分布式综合资产管理系统设计与实现
开发语言·分布式·golang·毕业设计·go语言·源代码管理
巴拉巴拉~~6 分钟前
Flutter 通用表单输入组件 CustomInputWidget:校验 + 样式 + 交互一键适配
javascript·flutter·交互
满天星83035777 分钟前
【Linux】信号(下)
android·linux·运维·服务器·开发语言·性能优化
专注于大数据技术栈8 分钟前
java学习--String
java·开发语言·学习
San30.8 分钟前
现代前端工程化实战:从 Vite 到 Vue Router 的构建之旅
前端·javascript·vue.js