CSS辞典 font-kerningプロパティの解説

ギフト・ポイントGet!
css辞典 CSS辞典
この記事は約4分で読めます。

カーニング情報の使用方法を制御する「font-kerningプロパティ」の使用方法を掲載

CSS3/2.1

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値 auto
適用される要素 すべての要素
モジュール CSS Fonts Module Level3及びLevel4
継承 あり

概要・使用方法

{font-kerning: 表示方法;}

font-kerningプロパティは、フォントに含まれるカーニング情報をブラウザで使用するか設定します。カーニングとは、特定の文字の組み合わせの文字間隔を調整して読みやすい表示にすることです。

カーニング情報あり・なしの解説図

カーニングありの場合は、wとaのスペースを調整します。調整が無い場合は、ちょっと広がった感じになります。

表示方法

autoカーニング情報を使用するかはブラウザに任せます。
normalカーニング情報を使用するようにブラウザに要求します。
noneカーニング情報を使用しないようにブラウザに要求します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>font-kerning CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>   
          /* フォントを個別指定 */
          p{font-family: serif;}
          p.none{
                      font-kerning: none;
                      font-size:200%;
                    }      
          p.auto{
                      font-kerning: auto;
                      font-size:200%;
                    }
          p.normal{
                      font-kerning: normal;
                      font-size:200%;
                    }    
    </style>
  </head>
  <body>
      <p class="none">Watermark</p>
      <p class="auto">Watermark</p>
      <p class="normal">Watermark</p>
  </body>
</html>
実行結果

Watermark

Watermark

Watermark

chrome 実行サンプル

font-kerningプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

font-kerningプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

font-kerningプロパティのedgeブラウザの実行結果

opera 実行サンプル

font-kerningプロパティのoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました