フォントの実際のピクセルの高さを使用してテキストをCSSと垂直に整列させますか？

Question

イメージの中央にテキストを垂直に配置する必要がありますが、私が使用しているカスタムフォントには非常に大きなアセンダとディセンダがあります（つまり、文字の一部がかなり張り付いてしまいます）。すべての可能な文字を修正してください。

例えば、文字Xとg間のアライメントの違いを見て：

私はこれが原因で、フォントの「ベースライン」であり、それは私の質問が何であるかではないことを知っています約。

"境界ボックス"やコンテナの線の高さに頼るのではなく、フォントの実際のピクセル値を使用してテキストの文字列を垂直に配置できるかどうかを知りたいと思っています下の境界：

：だから例として、上記を使用して

、単一の文字Xとgは完全にこのように中央に表示されます

Answer 1

これを行うには、組み込みの方法はありません。

specs

にactualBounding*含むそうするために必要なすべての値を定義することTextMetricオブジェクトを返すmeasureText()機能は、しかしと残念ながら、唯一widthその仕様からはincluded in the browsersあります。

これらの制限の一部を克服するのに役立つかもしれないpolyfillがありますが、自分で試したことはありませんし、それが良いかどうかは言えません。

最後のオプションは、実際に行をスキャンして各文字のピクセル位置を調べることです。どのくらいうまく動作するかは、レンダリングする必要があるテキストの量によって決まります。あなたは基本的にそれぞれの文字をオフスクリーンキャンバスに書いてから、上から下までスキャンして、最初のピクセルがどこに現れているかを調べ、それを上と下の実際の境界ボックスとして使用する必要があります。