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 上查看此页面 • 报告此内容的问题