WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「字間スペース」

font-kerning「字間スペース」

「font-kerning」は、プロポーショナルフォントにカーニングを適用するか指定します。

「font-kerning」では、「メトリクスカーニング」を使用します。 「メトリクスカーニング」は、「ペアカーニング情報」という特定の文字間の距離の情報に従って調整します。 そのため、「ペアカーニング情報」のないフォントの場合、文字間の距離は調整しません。

【ペアカーニング情報の文字例】
LA、P.、To、Tr、Ta、Tu、Te、Ty、Wa、WA、We、Wo、Ya、Yo など

CSS Ver.適用要素継承
3.0全要素する
広告

font-kerning の指定方法

構文

font-kerning : auto | normal | none;

プロパティ/設定値意味
font-kerning : auto; ブラウザに依存
font-kerning : normal; カーニングを適用する
font-kerning : none; カーニングを適用しない
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

font-kerning のサンプル


<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>
font-kerning 表示例

上段:auto 中断:normal 下段:none
To Tr Ta Tu Te Ty Wa WA We Wo Ya Yo
To Tr Ta Tu Te Ty Wa WA We Wo Ya Yo
To Tr Ta Tu Te Ty Wa WA We Wo Ya Yo

※ほとんどのブラウザが未対応のようです。現時点(2017/03)で、Firefoxは動作確認できました。

【W3Cのfont-kerning仕様書】
https://www.w3.org/TR/css-fonts-3/#font-kerning-prop


広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン