A lightweight library for estimating text width and height in non-browser environments
npm install measury一个轻量级的 JavaScript 库,用于在非浏览器环境中估算文本的宽度和高度。
与 node-canvas 或 opentype 等重量级方案不同,本库提供了一个基于字体度量配置的轻量级替代方案,适用于近似文本测量。
- 📏 精确的文本宽度和高度测量
- 🎨 支持多种文本样式(字体、大小、粗细、间距等)
- 🔤 文本转换支持(大写、小写、首字母大写)
- 📦 轻量级 - 按需加载,核心库仅 3-5KB
- 🌲 Tree-shaking 友好 - 只打包使用的字体
- 🚀 快速 - 基于预计算的字体度量
- 🛠️ 完整的 TypeScript 类型定义
- 🔧 内置字体提取脚本
``bash`
npm install measury
`typescript
import { measureText } from 'measury';
// 测量系统字体,无需额外配置
const metrics = measureText('Hello World', {
fontFamily: 'Arial',
fontSize: 16,
});
console.log(metrics.width); // 文本宽度(像素)
console.log(metrics.height); // 行高(像素)
console.log(metrics.baseline); // 基线位置(像素)
`
`typescript
import { measureText, registerFont } from 'measury';
import AlibabaPuHuiTiRegular from 'measury/fonts/AlibabaPuHuiTi-Regular';
// 注册字体
registerFont(AlibabaPuHuiTiRegular);
// 精确测量
const metrics = measureText('你好世界', {
fontFamily: 'Alibaba PuHuiTi',
fontSize: 16,
fontStyle: 'normal', // 支持 'normal' | 'italic' | 'oblique'
});
`
优势:
- ✅ 核心库体积小(3-5KB),只在需要时加载字体数据
- ✅ Tree-shaking 友好,打包工具自动去除未使用的字体
- ✅ 灵活控制打包体积
- ✅ 支持多种字体样式(normal, italic, oblique)
字体导入方式:
`typescript`
import AlibabaPuHuiTiRegular from 'measury/fonts/AlibabaPuHuiTi-Regular';
测量单行文本的尺寸。
参数:
- text - 要测量的文本style
- - 可选的文本样式配置
返回: TextMetrics 对象width
- - 文本宽度(像素)height
- - 行高(像素)baseline
- - 基线位置(像素)
样式选项:
`typescript`
interface TextStyle {
fontSize?: number; // 默认: 16
fontFamily?: string; // 默认: 'sans-serif'
fontWeight?: 'normal' | 'bold' | number;
fontStyle?: 'normal' | 'italic' | 'oblique';
textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
letterSpacing?: number; // 字符间距(像素)
wordSpacing?: number; // 单词间距(像素)
lineHeight?: number | { type: 'pixel', value: number };
}
注册字体供文本测量使用。
`typescript
import { registerFont } from 'measury';
import MyFont from 'measury/myfont';
registerFont(MyFont);
`
支持在字体数据中声明别名:
`typescript`
registerFont({
...MyFont,
aliases: ['AlibabaPuHuiTi', 'AlibabaPuHuiTi-Regular'],
});
设置默认字体族。
`typescript
import { setDefaultFontFamily } from 'measury';
setDefaultFontFamily('Alibaba PuHuiTi');
`
本库内置了从 TTF 文件提取字体度量数据的脚本。
`bash`
npm run extract <字体文件路径.ttf>
这将:
1. 从 TTF/OFT 文件提取字体数据
2. 在 src/fonts/ 生成 TypeScript 文件src/fonts/index.ts
3. 自动添加到
提取字体:
`bash`
npm run extract fonts/Roboto-Regular.ttf生成: src/fonts/roboto-regular.ts
指定字重:
`bash`
npm run extract fonts/Roboto-Bold.ttf --weight 700或简写
npm run extract fonts/Roboto-Bold.ttf -w 700
指定字体样式:
`bash`
npm run extract fonts/Roboto-Italic.ttf --style italic或简写
npm run extract fonts/Roboto-Italic.ttf -s italic
自定义字体名称:
`bash`
npm run extract fonts/CustomFont.ttf --family "自定义字体"
只提取特定字符(减小文件体积):
`bash只提取数字
npm run extract fonts/Arial.ttf --charset "0123456789"
跳过字偶距数据:
`bash
npm run extract fonts/Font.ttf --no-kerning
`$3
| 选项 | 简写 | 说明 | 示例 |
|------|------|------|------|
|
--weight | -w | 设置字重 | --weight 700 |
| --style