IE11で見出しにWebフォントを使用すると中心より上にずれてしまう

⚠この記事が公開されたのは 2020年7月2日で、内容が古く、間違っている可能性があります。

再現環境

  • ブラウザ: Internet Explorer 11
  • Webfont: FOT-スーラ ProN (Adobe Font)
  • Bootstrap: v4.3.1

解決策

IE11のCSSハックにてズレを調整

_:-ms-lang(x)::-ms-backdrop, .css-hack { //.css-hackの部分は見出しに対する任意のセレクタ
/* ここにズレを調整するスタイルを記述する */
}

IE11のみで再現しました。Bootstrapの影響については未検証です。
Webフォントで再現しましたが別の方の記事では游ゴシックでも再現するようです。