WEB制作(html・css(スタイルシート))に関する各種メモ書き

CSSでカーニング調整をして先頭が 「 (カッコ)の左端を揃える

WEBで先頭が 「 (カッコ)の文章があると、括弧の左端に隙間ができてしまい、左端を綺麗に揃えることができません。 Illustratorならカーニングで簡単に調整してしまうところですが、CSSの場合は次のプロパティを使用します。

● CSSの「font-feature-settings」プロパティ

font-feature-settingsプロパティを使用すると、カーニングの自動調整ができます。

▲ 対応フォント

Open type 形式のフォントなら対応可能です

ヒラギノ角ゴシック
ヒラギノ明朝
游ゴシック体
游明朝体
Noto Sans

Windowsの メイリオ は対応していません

▲ 対応ブラウザ

全ブラウザ( Edge, Safari, Chrome, Firefox , IEは 11 以降 )

https://caniuse.com/#feat=font-feature

▲ デモ

http://logic.moo.jp/livedemo/font-feature-settings.html

.my_list li{
    font-feature-settings: "palt";
    list-style-type: disc !important;
    font-family: "Yu Gothic" , sans-serif;
    line-height: 1.2;
}
<ul>
    <li>日本語のテストです</li>
    <li>「あいうえおかきくけこ」</li>
</ul>
No.1177
11/27 15:41

edit