Webフォント（Noto Sans JP）を使って上下中央に文字を表示したい

前提・実現したいこと

Googleフォント"Noto Sans JP"を使い、文字をdivの上下中央に表示したい。

試したソースコード

codepenでのプロジェクト↓
https://codepen.io/takabosoft/pen/xxZgRNX

html
1<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
2<div>あいうえお</div>

css
1div {
2  font-family: 'Noto Sans JP', sans-serif;
3  box-sizing: border-box;
4  border: 2px solid black; 
5  width: 150px;
6  height: 35px; 
7  display: flex; 
8  justify-content: center; 
9  align-items: center; 
10  line-height: 1.1; 
11  font-size: 16px; 
12  text-align: center;
13}

試した結果、問題点

下の画像はブラウザの96dpi 100%のレンダリング結果を３倍にして赤線や注釈を入れたものです。

ChromeとFirefoxで縦の位置が微妙に違い、Chromeはほぼ期待どおりですが、Firefoxの方がやや下にずれているように見えます。
これらをなるべく揃えるような方法をご存知の方がいらっしゃいましたらご教示をお願いいたします。

また、ついでですが、フォントの幅もChromeとFirefoxで少し違って見えます。
こちらについてはフォントのレンダリングエンジンの違いだろうとは思っていますが、何か揃える方法がありましたらご教示をお願いいたします。

考えた案

Firefoxの場合に限り、テキスト描画にtransform: translate(0, -1px);のような補正を掛ける。

補足情報（FW/ツールのバージョンなど）

Windows 10
Google Chrome 83.0.4103.106（Official Build）（64 ビット）
Firefox 77.0.1 (64 ビット)

Lhankor_Mhy

2020/06/20 02:43

↓このあたりのルールが実装されてくればCSSでコントロールできるのでしょうけれど、現在のところでは難しいのではないでしょうか。 https://www.w3.org/TR/css-inline-3/#text-edges 確認している環境がWinのようですが、Macやその他のデバイスでは異なっている可能性もあるかと思います。 ↓この記事が詳しいです。 > After running some tests, it seems that browsers use the HHead Ascent/Descent values on Mac OS, and Win Ascent/Descent values on Windows (these values may differ!). https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align