TextMetrics

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

注意：此功能在 Web Workers 中可用。

TextMetrics 介面代表畫布中文字的尺寸；可以透過 CanvasRenderingContext2D.measureText() 方法獲取 TextMetrics 例項。

例項屬性

TextMetrics.width 只讀: 返回畫布中文字片段的寬度（以 CSS 畫素為單位）。它會考慮畫布的當前字型。
TextMetrics.actualBoundingBoxLeft 只讀: 文字的實際邊界框左側到由 CanvasRenderingContext2D.textAlign 屬性指定的對齊點之間的距離，測量方向與基線平行（以 CSS 畫素為單位）；正值表示從指定的對齊點向左的距離。
TextMetrics.actualBoundingBoxRight 只讀: 文字的實際邊界框右側到由 CanvasRenderingContext2D.textAlign 屬性指定的對齊點之間的距離，測量方向與基線平行（以 CSS 畫素為單位）。
TextMetrics.fontBoundingBoxAscent 只讀: 從 CanvasRenderingContext2D.textBaseline 屬性指示的水平線到渲染文字所使用的所有字型的最高邊界矩形的頂部之間的距離（以 CSS 畫素為單位）。
TextMetrics.fontBoundingBoxDescent 只讀: 從 CanvasRenderingContext2D.textBaseline 屬性指示的水平線到渲染文字所使用的所有字型的邊界矩形的底部之間的距離（以 CSS 畫素為單位）。
TextMetrics.actualBoundingBoxAscent 只讀: 從 CanvasRenderingContext2D.textBaseline 屬性指示的水平線到渲染文字所使用的邊界矩形的頂部之間的距離（以 CSS 畫素為單位）。
TextMetrics.actualBoundingBoxDescent 只讀: 從 CanvasRenderingContext2D.textBaseline 屬性指示的水平線到渲染文字所使用的邊界矩形的底部之間的距離（以 CSS 畫素為單位）。
TextMetrics.emHeightAscent 只讀: 從 CanvasRenderingContext2D.textBaseline 屬性指示的水平線到行框中 em 方形頂部的距離（以 CSS 畫素為單位）。
TextMetrics.emHeightDescent 只讀: 從 CanvasRenderingContext2D.textBaseline 屬性指示的水平線到行框中 em 方形底部的距離（以 CSS 畫素為單位）。
TextMetrics.hangingBaseline 只讀: 從 CanvasRenderingContext2D.textBaseline 屬性指示的水平線到行框的懸掛基線之間的距離（以 CSS 畫素為單位）。
TextMetrics.alphabeticBaseline 只讀: 從 CanvasRenderingContext2D.textBaseline 屬性指示的水平線到行框的字母基線之間的距離（以 CSS 畫素為單位）。
TextMetrics.ideographicBaseline 只讀: 從 CanvasRenderingContext2D.textBaseline 屬性指示的水平線到行框的表意文字基線之間的距離（以 CSS 畫素為單位）。

示例

基線圖示

此示例演示了 TextMetrics 物件持有的基線。預設基線是 alphabeticBaseline。另請參閱 CanvasRenderingContext2D.textBaseline 屬性。

HTML

html

<canvas id="canvas" width="550" height="500"></canvas>

JavaScript

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();
});

結果

測量文字寬度

在測量文字的 x 方向時，由於斜體/傾斜字型中字元的懸垂部分可能會超出其前進寬度，因此 actualBoundingBoxLeft 和 actualBoundingBoxRight 的總和可能比行內框的寬度 (width) 更寬。

因此，使用 actualBoundingBoxLeft 和 actualBoundingBoxRight 的總和作為獲取絕對文字寬度的更準確方法可能很有用。

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

規範

規範
HTML # textmetrics

瀏覽器相容性

另見

CanvasRenderingContext2D 中的建立方法。
<canvas> 元素及其關聯介面 HTMLCanvasElement

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年2月4日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤