「font-kerning」は、プロポーショナルフォントにカーニングを適用するか指定します。
「font-kerning」では、「メトリクスカーニング」を使用します。 「メトリクスカーニング」は、「ペアカーニング情報」という特定の文字間の距離の情報に従って調整します。 そのため、「ペアカーニング情報」のないフォントの場合、文字間の距離は調整しません。
【ペアカーニング情報の文字例】
LA、P.、To、Tr、Ta、Tu、Te、Ty、Wa、WA、We、Wo、Ya、Yo など
CSS Ver. | 適用要素 | 継承 |
---|---|---|
3.0 | 全要素 | する |
構文 | |
---|---|
font-kerning : auto | normal | none; |
|
プロパティ/設定値 | 意味 |
font-kerning : auto; | ブラウザに依存 |
font-kerning : normal; | カーニングを適用する |
font-kerning : none; | カーニングを適用しない |
デフォルト:「タグ毎のスタイル初期値」を参照 |
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.css-auto{font-kerning : auto;}
.css-none{font-kerning : none;}
.css-normal{font-kerning : normal;}
.css-font-family{font-family : 'Arial';}
<!-- html -->
<div class="common">
<div class="cssTitle">font-kerning 表示例<br><br>
上段:auto 中断:normal 下段:none</div>
<div>
<span class="css-auto css-font-family">
To Tr Ta Tu Te Ty Wa WA We Wo Ya Yo</span><br>
<span class="css-normal css-font-family">
To Tr Ta Tu Te Ty Wa WA We Wo Ya Yo</span><br>
<span class="css-none css-font-family">
To Tr Ta Tu Te Ty Wa WA We Wo Ya Yo</span><br>
</div>
</div>
※ほとんどのブラウザが未対応のようです。現時点(2017/03)で、Firefoxは動作確認できました。
【W3Cのfont-kerning仕様書】
https://www.w3.org/TR/css-fonts-3/#font-kerning-prop
関連するCSS(STYLE) | |
---|---|
font | 文字のデザイン |
font-family | フォント |
font-feature-settings | OpenTypeフォントの字形の切替え |
font-language-override | 言語を一時的に変更 |
font-size | 文字の大きさ |
font-size-adjust | 文字サイズの自動調節 |
font-stretch | フォントの形状(幅広・幅狭) |
font-style | 斜体のスタイル |
font-synthesis | 太字や斜体を持たないフォントの表示方法 |
font-variant | フォントの変換ルール |
font-variant-alternates | 代替文字の置き換え指定 |
font-variant-caps | 英大文字での表示制御 |
font-variant-east-asian | 漢字の表示指定 |
font-variant-ligatures | 合字の制御指定 |
font-variant-numeric | 数値の表示形式指定 |
font-variant-position | 上付き文字・下付き文字の指定 |
font-weight | 文字の太さ |