font-size-adjustで異なるフォントのサイズ感を調整する
font-size-adjustがBaselineに到達した。
font-sizeに同じ値を指定しても、フォントによってはサイズ感が異なることがある。そこでfont-size-adjustに係数を指定することで、フォントのサイズ感を調整できる。
<p class="verdana">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="times">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="adjust-times">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
html {
font-size: 1.25rem;
}
.verdana {
font-family: Verdana, sans-serif;
}
.times {
font-family: Times, serif;
}
.adjust-times {
font-family: Times, serif;
/* font-size * font-size-adjust でサイズ感を調整 */
font-size-adjust: 0.5;
}
デモ
Lorem ipsum dolor sit amet（Verdana）
Lorem ipsum dolor sit amet（Times）