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

再現環境

  • ブラウザ: 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フォントで再現しましたが別の方の記事では游ゴシックでも再現するようです。

この記事を書いた人