文本度量

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本中运行。它自 2015 年 7 月.

报告反馈

注意：此功能在 Web 工作线程 中可用。

实例属性

TextMetrics 接口表示画布中一段文本的尺寸；可以使用 CanvasRenderingContext2D.measureText() 方法获取 TextMetrics 实例。

TextMetrics.width 只读

以 CSS 像素返回一段内联文本的宽度。它会考虑上下文的当前字体。

TextMetrics.actualBoundingBoxLeft 只读

以 CSS 像素返回从 CanvasRenderingContext2D.textAlign 属性给出的对齐点到给定文本的边界矩形左侧的平行于基线的距离；正数表示从给定对齐点向左的距离。

TextMetrics.actualBoundingBoxRight 只读

以 CSS 像素返回从 CanvasRenderingContext2D.textAlign 属性给出的对齐点到给定文本的边界矩形右侧的距离。该距离平行于基线测量。

TextMetrics.fontBoundingBoxAscent 只读

以 CSS 像素返回从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到用于渲染文本的所有字体的最高边界矩形顶部的距离。

TextMetrics.fontBoundingBoxDescent 只读

以 CSS 像素返回从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到用于渲染文本的所有字体的边界矩形底部的距离。

TextMetrics.actualBoundingBoxAscent 只读

以 CSS 像素返回从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到用于渲染文本的边界矩形顶部的距离。

TextMetrics.actualBoundingBoxDescent 只读

以 CSS 像素返回从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到用于渲染文本的边界矩形底部的距离。

TextMetrics.emHeightAscent 只读

以 CSS 像素返回从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到行框中 em 方块顶部的距离。

TextMetrics.emHeightDescent 只读

以 CSS 像素返回从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到行框中 em 方块底部的距离。

TextMetrics.hangingBaseline 只读

以 CSS 像素返回从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到行框的悬挂基线的距离。

TextMetrics.alphabeticBaseline 只读

以 CSS 像素返回从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到行框的字母基线的距离。

TextMetrics.ideographicBaseline 只读

示例

以 CSS 像素返回从 CanvasRenderingContext2D.textBaseline 属性指示的水平线到行框的表意基线的距离。

基线说明

HTML

此示例演示了 TextMetrics 对象持有的基线。默认基线是 alphabeticBaseline。另请参阅 CanvasRenderingContext2D.textBaseline 属性。
<canvas id="canvas" width="550" height="500"></canvas>

JavaScript

html
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const baselinesAboveAlphabetic = [
  "fontBoundingBoxAscent",
  "actualBoundingBoxAscent",
  "emHeightAscent",
  "hangingBaseline",
];
const baselinesBelowAlphabetic = [
  "ideographicBaseline",
  "emHeightDescent",
  "actualBoundingBoxDescent",
  "fontBoundingBoxDescent",
];
const baselines = [...baselinesAboveAlphabetic, ...baselinesBelowAlphabetic];
ctx.font = "25px serif";
ctx.strokeStyle = "red";

baselines.forEach((baseline, index) => {
  const text = `Abcdefghijklmnop (${baseline})`;
  const textMetrics = ctx.measureText(text);
  const y = 50 + index * 50;
  ctx.beginPath();
  ctx.fillText(text, 0, y);

  const baselineMetricValue = textMetrics[baseline];
  if (baselineMetricValue === undefined) {
    return;
  }

  const lineY = baselinesBelowAlphabetic.includes(baseline)
    ? y + Math.abs(baselineMetricValue)
    : y - Math.abs(baselineMetricValue);
  ctx.moveTo(0, lineY);
  ctx.lineTo(550, lineY);
  ctx.stroke();
});

js

结果

测量文本宽度

当测量一段文本的 x 方向时，actualBoundingBoxLeft 和 actualBoundingBoxRight 的总和可能会比内联框的宽度 (width) 更宽，因为斜体/倾斜字体中的字符会超出它们的字距宽度。

html
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const text = "Abcdefghijklmnop";
ctx.font = "italic 50px serif";
const textMetrics = ctx.measureText(text);

console.log(textMetrics.width);
// 459.8833312988281

console.log(
  textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,
);
// 462.8833333333333

规范

因此，使用 actualBoundingBoxLeft 和 actualBoundingBoxRight 的总和作为获取绝对文本宽度的一种更准确的方法可能很有用。
规范
# HTML 标准

浏览器兼容性

textmetrics

另请参阅