Studio
Happyvalley

WEBで
文字詰め

フォント別に
文字詰を検証する

image: WEBで文字詰め
Toplabo
Font-Feature-Settings

CSS文字詰め、システムフォントの游明・游ゴは対応

2022/07/15

基本

MDNでは非推奨ですがfont-feature-settingsを使用します。
  • Adobeサイトの「CSS での OpenType 機能の構文」ページを見るとCSSでも和文の文字詰めができるようです。

    font-feature-settings: "palt";
    上の設定で和文の対応書体(一部のOpenType)は詰めることができます。
    仕様は、全角(1 em)の幅で設定するようにデザインされた字形のスペースを、個々の(プロポーショナルな)横の幅に収まるように再調整します。とあります。
    他には字体を置き換えるプロポーショナル字形(pwid)、プロポーショナルかな(pkna)などがあるようです。
    よく読むとfont-feature-settingsは文字詰め専用ではなくOpen-typeフォントの拡張機能だそうです。
    主に合字や字体の設定に使うみたいです。
    MDNによるとこのプロパティは非推奨でfont-variantを使うようにとあります。
    ただし、font-variantには和文の文字詰め機能はないので、
    文字詰めする場合はfont-feature-settingsを使わざるをえません。
    MDNがいくら仕様を決めてもフォントメーカーがフォントを作らない限り実現できませんからね。

    font-feature-settingsによる文字詰めを含む詳細解説 Adobeサイトページ

    Adobe: CSS での OpenType 機能の構文:
    https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html#palt

よく使うフォントで実験してみました。
  • Open-Typeであればすべて対応しているわけでは無い様です。

    なので当サイトでよく使うフォントで実験してみました。よく使うフォントは主に下記の2種類です。
    『游明・游ゴ』、『adobe-song-std』。
    これにAdobeのよく使われるメジャーなフォントとGoogleの明朝体Google Noto Serif JP、を加えて実験しました。

本文のCSSでの文字詰め、現状は游系を使用することになりますね。
  • よく使うAdobe Songは未対応。

    結果は上の画像の通り、よく使うAdobe Songダメでした。
    Googleもダメですね。
    文字詰めできたのは游系とAdobeのポピュラーな書体だけでした。ただし、システムフォントの遊明・游ゴが使えるのは大きいですね。
    本文にはWebFontあんまり使わないのでこれで十分です。

『WEBで文字詰め』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら