TextMetrics: fontBoundingBoxAscent 屬性

Baseline 2023

新推出

自 2023 年 8 月起，此功能已在最新的裝置和瀏覽器版本中可用。此功能可能不適用於舊裝置或瀏覽器。

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

TextMetrics 介面的只讀屬性 fontBoundingBoxAscent 返回從 CanvasRenderingContext2D.textBaseline 屬性所指示的水平線，到用於渲染文字的所有字型中最高邊界矩形的頂部的距離，以 CSS 畫素為單位。

值

一個數字，以 CSS 畫素為單位。

示例

以下程式碼展示瞭如何獲取特定字型中文字的 fontBoundingBoxAscent。

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

ctx.font = "25px serif";
const text = "Foo";

const textMetrics = ctx.measureText(text); // returns TextMetrics object
const ascentCssPixels = textMetrics.fontBoundingBoxAscent;

<p id="log"></p>

const log = document.getElementById("log");
log.innerText = `fontBoundingBoxAscent: ${ascentCssPixels}`;

下面顯示了 25px serif 字型中“Foo”文字的上升高度（CSS 畫素）。

規範

規範
HTML # dom-textmetrics-fontboundingboxascent-dev

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後更新於 ⁨2024 年 9 月 18 日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題