CSSでテキストの上下余白が調整可能に！text-box-trimの使い方
BRANK

2024年12月〜2025年2月頃にかけてリリースされたSafari 18.2、Chrome 133、Microsoft Edge133から、text-box-trimプロパティとtext-box-edgeプロパティが使用可能になりました。テキスト要素の上下のスペースを調整できるようになります。

ics.media
Related Topics: CSS Web Standards / Browsers
2 comments
  • 池田 泰延
    @clockmaker

    Noto Sans JP(CJK JP含む)は10年以上の実績と知名度と、今回のWindows標準搭載で、定番フォントとして何十年も使い続けられることでしょう。
    ＭＳ Ｐゴシックやメイリオ、游ゴシックの時代に代わって。

    2018年に標準搭載されたBIZ UDPゴシックが今も知名度が低くて、不憫ですが･･･。

  • 池田 泰延
    @clockmaker

    残念なことに、Windows標準搭載のNoto Sans JPは垂直方向に余白があります（Notoの既知の問題）。

    ボタンに使うと、縦中央に配置されないことを確認しました。CSSのtext-boxで対策が必要ですね。

    ■対策方法
    text-box-trimの使い方 - ICS MEDIA ics.media/entry/250319/ pic.x.com/y8lLshebZt