解决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绘制图形
});
相关推荐
To_OC1 天前
LC 35 搜索插入位置:二分查找谁都会,边界条件谁写谁懵
javascript·算法·leetcode
码哥DFS1 天前
二叉树的直径
开发语言·javascript·算法
paopaokaka_luck1 天前
基于springboot3+vue3的企业考勤管理系统(部门树递归、Echarts图形化分析)
开发语言·spring boot·学习·echarts·mybatis·需求分析·代码规范
梦雨生生1 天前
java开发工具(学习第一天)
java·开发语言·学习
光影少年1 天前
RN的Fabric 渲染流程
运维·前端·javascript·react native·react.js·fabric
啊啊啊啊啊!!!!1 天前
【c++】stack和queue的接口使用以及底层实现
开发语言·c++
用户938515635071 天前
React Router 进阶:路由守卫、登录鉴权与状态传递
前端·javascript·全栈
kyriewen1 天前
我重写了自己用了两年的防抖节流Hook——发现里面藏着3个隐藏bug
前端·javascript·面试
松仔log1 天前
Java中级——组合和继承
android·java·开发语言
漂流瓶jz1 天前
Webpack开发环境:观察模式/webpack-dev-server/HMR热更新
前端·javascript·webpack