TextMetrics：fontBoundingBoxDescent 属性

Baseline 2023

新推出

自 2023 年 8 月起，此功能已在最新的设备和浏览器版本中可用。此功能可能不适用于旧设备或浏览器。

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

TextMetrics 接口的只读属性 fontBoundingBoxDescent 返回从 CanvasRenderingContext2D.textBaseline 属性所指示的水平线到用于渲染文本的所有字体的边界矩形底部的距离，以 CSS 像素为单位。

值

一个数字，以 CSS 像素为单位。

示例

以下代码展示了如何获取特定字体中文本的 fontBoundingBoxDescent。

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 descentCssPixels = textMetrics.fontBoundingBoxDescent;

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

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

下面显示了 25px serif 字体中“Foo”文本的 CSS 像素下降距离。

规范

规范
HTML # dom-textmetrics-fontboundingboxdescent-dev

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2024年9月18日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题