CSS: 書体周りの設定

CSS でテキストの見栄えを変えられる。

• 字詰め（カーニング）
• アンチエイリアス
• 縦書き

字詰め（カーニング）

font-feature-settings プロパティで字詰めできる。
書体の種類による。

• TTF（True Type Font）だとできない。
• OTF（Open Type Font）だと字詰めできる。

font-feature-settings: "palt";
カッコなどの約物と仮名が詰まる

font-feature-settings: "halt";
カッコなどの約物が詰まる（仮名は詰まらない）

試してみる

https://codepen.io/becolomochi/pen/zYKpvQx

参考

font-feature-settings - CSS: カスケーディングスタイルシート | MDN

CSS Fonts Module Level 3

"hwid"; / Half-width OpenType feature /

文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA

上記サイトによると、他の値としては、

pwid（プロポーショナル字形に置き換える指定）

pkna（仮名や仮名関連の字形セットをプロポーショナル字形に置き換える指定）

などもあるとのこと

アンチエイリアス

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

試してみる

アンチエイリアスがかかって細く見える

https://codepen.io/becolomochi/pen/LYRepqZ

参考

developer.mozilla.org

qiita.com

qiita.com

creator.dwango.co.jp

縦書き

writing-mode プロパティで縦書きができる。
値は vertical-rl 。

writing-mode: vertical-rl;

参考

developer.mozilla.org