TextMetrics: fontBoundingBoxDescent プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年8月以降、すべてのブラウザーで利用可能です。
メモ: この機能はウェブワーカー内で利用可能です。
fontBoundingBoxDescent は TextMetrics インターフェイスの読み取り専用プロパティで、CanvasRenderingContext2D.textBaseline 属性で示される水平線から、テキストの描画に使用されるすべてのフォントの中で最も高い境界矩形の下端までの距離を CSS ピクセル単位で返します。
値
数値で、CSS ピクセル単位です。
例
以下のコードは、特定のフォントでテキストの fontBoundingBoxDescent を取得する方法を示しています。
js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "25px serif";
const text = "Foo";
const textMetrics = ctx.measureText(text); // TextMetrics オブジェクトを返す
const descentCssPixels = textMetrics.fontBoundingBoxDescent;
25px のセリフ書体で "Foo" というテキストの CSS ピクセルでのディセントは下記の通りです。
仕様書
| 仕様書 |
|---|
| HTML # dom-textmetrics-fontboundingboxdescent-dev |