WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「フォントの変換ルール」

font-variant「フォントの変換ルール」

「font-variant」は、フォントの変換ルールを指定します。

下記のフォントの変換ルールを指定するサブプロパティの値をまとめて指定します。

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

font-variant の指定方法

構文

font-variant : normal | none | 「font-variant-ligatures || font-variant-caps || font-variant-numeric || font-variant-east-asian || font-variant-alternates」;

プロパティ/設定値意味
font-variant : normal; デフォルトの設定で表示する
font-variant : none; 「font-variant-ligatures」の値を none に、
他のサブプロパティの値を初期値の normal に設定する
font-variant : 「font-variant-ligatures」; 合字の制御を指定
「font-variant-ligatures」の値を指定
font-variant : 「font-variant-caps」; 英大文字での表示制御を指定
「font-variant-caps」の値を指定
font-variant : 「font-variant-numeric」; 数値の表示形式を指定
「font-variant-numeric」の値を指定
font-variant : 「font-variant-east-asian」; 漢字の表示を指定
「font-variant-east-asian」の値を指定
font-variant : 「font-variant-alternates」; 代替文字の置き換えを
「font-variant-alternates」の値を指定
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

font-variant のサンプル


<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-liga-clig{font-feature-settings : "liga","clig";}
.css-dlig{font-feature-settings : "dlig";}

.css-ligatures-common{font-variant-ligatures: common-ligatures;}
.css-ligatures-discretionary{font-variant-ligatures: discretionary-ligatures;}

.css-variant-normal{font-variant : normal;}
.css-variant-common{font-variant : common-ligatures;}
.css-variant-discretionary{font-variant : discretionary-ligatures;}
.css-variant-small{font-variant : small-caps;}
.css-variant-all-small{font-variant : all-small-caps;}
.css-variant-lining{font-variant : lining-nums;}
.css-variant-oldstyle{font-variant : oldstyle-nums;}
.css-variant-proportional{font-variant : proportional-nums;}
.css-variant-tabular{font-variant : tabular-nums;}
.css-variant-diagonal{font-variant : diagonal;}
.css-variant-ordinal{font-variant : ordinal;}
.css-variant-jis78{font-variant : jis78;}
.css-variant-jis83{font-variant : jis83;}
.css-variant-jis90{font-variant : jis90;}
.css-variant-jis04{font-variant : jis04;}
.css-variant-traditional{font-variant : traditional;}
.css-variant-full-width{font-variant : full-width;}
.css-variant-proportional-width{font-variant : proportional-width;}
.css-variant-historical-forms{font-variant : historical-forms;}

<!-- html -->
<div class="common">
  <div class="cssTitle">一般的な合字<br>
  font-variant: common-ligatures</div>
  <div>
  <span class="css-variant-normal">
  ff や fi が1つの字形になる</span><br>
  <span class="css-liga-clig">
  ff や fi が1つの字形になる</span><br>
  <span class="css-ligatures-common">
  ff や fi が1つの字形になる</span><br>
  <span class="css-variant-common">
  ff や fi が1つの字形になる</span>
  </div>
  <div class="cssTitle">任意の合字<br>
  font-variant: discretionary-ligatures</div>
  <div>
  <span class="css-variant-normal">
  ct や sp が1つの字形になる</span><br>
  <span class="css-dlig">
  ct や sp が1つの字形になる</span><br>
  <span class="css-ligatures-discretionary">
  ct や sp が1つの字形になる</span><br>
  <span class="css-variant-discretionary">
  ct や sp が1つの字形になる</span>
  </div>
</div>

※タイトル、例文とclassを該当内容に変更するのみのため、以下省略。

【font-variantの表示例】
1行目:デフォルト指定
2行目:font-feature-settings指定
3行目:font-variantのサブプロパティ指定
4行目:font-variant指定

一般的な合字
font-variant: common-ligatures
ff や fi が1つの字形になる
ff や fi が1つの字形になる
ff や fi が1つの字形になる
ff や fi が1つの字形になる
任意の合字
font-variant: discretionary-ligatures
ct や sp が1つの字形になる
ct や sp が1つの字形になる
ct や sp が1つの字形になる
ct や sp が1つの字形になる
小文字→小さい大文字
font-variant: small-caps
To Small Caps
To Small Caps
To Small Caps
To Small Caps
全ての英字→小さい大文字
font-variant: all-small-caps
All Small Caps
All Small Caps
All Small Caps
All Small Caps
ライニング数字
font-variant: lining-nums
0123456789
0123456789
0123456789
0123456789
オールドスタイル数字
font-variant: oldstyle-nums
0123456789
0123456789
0123456789
0123456789
プロポーショナル数字
font-variant: proportional-nums
0123456789
0123456789
0123456789
0123456789
等幅数字
font-variant: tabular-nums
0123456789
0123456789
0123456789
0123456789
分数(スラッシュ表示)
font-variant: diagonal-fractions
1/2 3/4 5/6 7/8 9/10
1/2 3/4 5/6 7/8 9/10
1/2 3/4 5/6 7/8 9/10
1/2 3/4 5/6 7/8 9/10
上付き序数表記
font-variant: ordinal
1st 2nd 3rd 4th
1st 2nd 3rd 4th
1st 2nd 3rd 4th
1st 2nd 3rd 4th
JIS78 字形
font-variant:jis78
餌 麹 襖 辻
餌 麹 襖 辻
餌 麹 襖 辻
餌 麹 襖 辻
JIS83 字形
font-variant:jis83
餌 麹 襖 辻
餌 麹 襖 辻
餌 麹 襖 辻
餌 麹 襖 辻
JIS90 字形
font-variant:jis90
餌 麹 襖 辻
餌 麹 襖 辻
餌 麹 襖 辻
餌 麹 襖 辻
JIS04 字形
font-variant:jis04
餌 麹 襖 辻
餌 麹 襖 辻
餌 麹 襖 辻
餌 麹 襖 辻
旧字体
font-variant: traditional
学 気 台 楽
学 気 台 楽
学 気 台 楽
学 気 台 楽
等幅全角字形
font-variant: full-width
ハンカクモジ 12345 を全角で、表示する
ハンカクモジ 12345 を全角で、表示する
ハンカクモジ 12345 を全角で、表示する
ハンカクモジ 12345 を全角で、表示する
プロポーショナル字体
font-variant: proportional-width
プロポーショナル字体で、表示する
プロポーショナル字体で、表示する
プロポーショナル字体で、表示する
プロポーショナル字体で、表示する
歴史的字体
font-variant: historical-forms
ssssssssss
ssssssssss
ssssssssss
ssssssssss

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

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


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