WEBページ作成リファレンス
cman.jp 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)の2番目のflowingで表示する指定。
@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }
p {
font-family: Noble Script;
font-variant-alternates: swash(flowing);}

ページTOP

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の表示例】
1行目:デフォルト指定
2行目:font-feature-settings指定
3行目:font-variant-alternates指定
4行目:font-variant指定

歴史的字体
font-variant-alternates: historical-forms
ssssssssss
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


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