cman.jp > WEBページ作成TOP > CSSリファレンス > 「代替文字の置き換え指定」
font-variant-alternates「代替文字の置き換え指定」
「font-variant-alternates」は、代替文字の置き換えを指定します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | する |
font-variant-alternates の指定方法
| 構文 | |
|---|---|
|
font-variant-alternates : normal | [historical-forms || stylistic(feature-value-name) || styleset(feature-value-name #) ||character-variant(feature-value-name #) || swash(feature-value-name) || ornaments(feature-value-name) || annotation(feature-value-name) ] ; |
|
| プロパティ/設定値 | 意味 |
| font-variant-alternates : normal; | 通常の表示 |
| font-variant-alternates : historical-forms; | 歴史的字形で表示 |
| font-variant-alternates : stylistic(feature-value-name); | スタイル上の代替文字で表示 |
| font-variant-alternates : styleset(feature-value-name #); | スタイル上の設定文字で表示 |
| font-variant-alternates : character-variant(feature-value-name #); | 特定の異体文字で表示 |
| font-variant-alternates : swash(feature-value-name); | スワッシュ字体で表示 |
| font-variant-alternates : ornaments(feature-value-name); | 装飾文字で表示 |
| font-variant-alternates : annotation(feature-value-name); | 注釈字体で表示 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
feature-value-name は、@font-feature-values で指定します。
但し、現時点（2017/05）では、ほとんどのブラウザが未対応です。
下記の例の場合、"swishy","flowing"が、feature-value-name です。
【例】
"Noble Script"フォントのスワッシュ字体（@swash）の２番目のflowingで表示する指定。
@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }
p {
font-family: Noble Script;
font-variant-alternates: swash(flowing);}
font-variant-alternates のサンプル
<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-hist{font-feature-settings: "hist";}
.css-alternates-normal{font-variant-alternates : normal;}
.css-alternates-historical-forms{font-variant-alternates : historical-forms;}
.css-variant-historical-forms{font-variant: historical-forms;}
<!-- html -->
<div class="common">
<div class="cssTitle">歴史的字体<br>
font-variant-alternates: historical-forms;/div>
<div>
<span class="css-alternates-normal">
ssssssssss</span><br>
<span class="css-hist">
ssssssssss</span><br>
<span class="css-alternates-historical-forms">
ssssssssss</span><br>
<span class="css-variant-historical-forms">
ssssssssss</span>
</div>
</div>
【font-variant-alternatesの表示例】
１行目：デフォルト指定
２行目：font-feature-settings指定
３行目：font-variant-alternates指定
４行目：font-variant指定
font-variant-alternates: historical-forms
ssssssssss
ssssssssss
ssssssssss
※ほとんどのブラウザが未対応のようです。現時点（2017/05）で、動作確認はできません。
また、@font-feature-values がほとんどのブラウザが未対応のため、"historical-forms"以外は指定できません。
【W3Cのfont-variant-alternates仕様書】
https://www.w3.org/TR/css-fonts-3/#font-variant-alternates-prop
| 関連するCSS(STYLE) | |
|---|---|
| font | 文字のデザイン |
| font-family | フォント |
| font-feature-settings | OpenTypeフォントの字形の切替え |
| font-kerning | 字間スペース |
| font-language-override | 言語を一時的に変更 |
| font-size | 文字の大きさ |
| font-size-adjust | 文字サイズの自動調節 |
| font-stretch | フォントの形状（幅広・幅狭） |
| font-style | 斜体のスタイル |
| font-synthesis | 太字や斜体を持たないフォントの表示方法 |
| font-variant | フォントの変換ルール |
| font-variant-caps | 英大文字での表示制御 |
| font-variant-east-asian | 漢字の表示指定 |
| font-variant-ligatures | 合字の制御指定 |
| font-variant-numeric | 数値の表示形式指定 |
| font-variant-position | 上付き文字・下付き文字の指定 |
| font-weight | 文字の太さ |