解决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绘制图形
});
相关推荐
栈帧之外25 分钟前
【C++】STL之set
开发语言·c++
catchadmin1 小时前
免费可商用 PHP 管理后台 CatchAdmin V5.4.1 发布,新增 MCP 支持
开发语言·php
jimy12 小时前
c++的 Type Traits (二、更详细版本)
开发语言·c++
狗凯之家源码网3 小时前
纯 PHP+MySQL 应用市场系统源码实测!
开发语言·mysql·php
dishugj3 小时前
系统架构风险点、敏感点和权衡点的概念和区分
java·开发语言
geovindu3 小时前
rust:Memento Pattern(续)
开发语言·后端·设计模式·rust·行为模式·备忘录模
马优晨3 小时前
JAVA 中 VO 实体类是什么意思,为什么要做这个
java·开发语言·状态模式·java vo·java vo是什么
Aurorar0rua3 小时前
CS50 x 2024 Notes Python - 01
开发语言·python·学习方法
SensorFlow4 小时前
曝光埋点别放在组件渲染里:连续可见与去重范围怎么验收
javascript
harris14815435297584 小时前
能解码不等于能信任:JWT 的签名到底验的是什么
javascript