html中根据font-size精确计算文本宽度

rongyi2233

于 2022-09-08 22:42:37 发布

阅读量2.1k

点赞数

分类专栏：实用小技能文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/rongyi2233/article/details/126773647

版权

实用小技能专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何利用HTML5的Canvas API来精确获取文本在特定字体大小下的真实宽度。通过创建canvas元素，设置字体样式，并调用`context.measureText()`方法，可以获取到不同字符在指定字体下的实际占用宽度，例如12px的字母w为8.67px，字母j为2.67px。这种方法对于需要精确布局的前端开发非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用canvas的方法去获取

function measureText(val,fontSize){
	const font = `${fontSize}px arial`;
	const canvas = document.createElement("canvas");
	const context = canvas.getContext("2d");
	context.font = font;
	// const { width } = context.measureText(state);
	const { width } = context.measureText(val);
	return width
}