liタグのマーカー（黒丸や数字）はフォントファミリーに依存することに気づく 😱

いままで意識したことがなかったですが、フォントファミリーを変更すると、liタグのマーカー（左についている黒丸や数字など）サイズが結構変わることがあります。

👆 PC版のGoogle Chrome「Noto Sans JP」と「san-serif」を並べていますが、黒丸は「Noto Sans JP」の方が大きく、数字は「san-serif」の方が大きく見えます。

※ PC版Chromeでの見栄え

なので、こんなことは滅多に無いと思いますが、liによって異なるフォントを設定すると、マーカーがガタガタになってしまうことがあります。僕は先日直面しました。

※ PC版Chromeでの見栄え

対策としては、

::markerを使えば、マーカーにスタイルが当てられるので、

li&::marker {
  font-family: 'Noto Sans JP';
}

という感じで、マーカーのフォントを統一してしまうことです。

マーカーのフォント、フォントサイズにを統一すれば、例えliタグのフォントがバラバラでも、少なくともマーカー部分は統一されて見えます。

※ PC版Chromeでの見栄え

みかづきブログ・カスタム