解决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绘制图形
});
相关推荐
谢亮_vipxieliang8 小时前
Go GMP调度模型——从原理到实战的完整指南
开发语言·网络·golang
OpsEye8 小时前
兼顾数据安全与成本,私有化 AI 网关正在成为企业标配
javascript·ai编程
铁皮饭盒8 小时前
还是网页端, 46mb模型, 抠图功能升级了, 抠任意主体, 还是不要显卡, 不要python, 满意吗?
前端·javascript·后端
聪明蛋子哟8 小时前
Python与Java双栈实战:手撸一个支持RAG与Tool Calling的高性能Agent框架
java·开发语言·python
谢亮_vipxieliang8 小时前
Go Context 控制协程生命周期
开发语言·golang
xuxigifxfh8 小时前
HJ4 字符串分隔
java·开发语言·华为机考
福兮说9 小时前
IP 地址转整数的七个坑:192.168.1.1 算出负数、127.1 也是合法地址、存进 INT 直接溢出
javascript·网络·网络协议·tcp/ip·mysql·golang
MayZork9 小时前
Qt 开发集成CMake + vcpkg
开发语言·c++·qt
YQteamdyq9 小时前
为什么 { ...state } 会悄悄杀掉响应式?yq-sanyi v0.4.2 的三处修复
前端·javascript
零基础1239 小时前
PDF 处理工具全攻略:pdf24、PDFgear、Adobe Acrobat DC 与 Stirling-PDF 深度对比
java·开发语言·pdf