CSS3

：

プロパティ

：

font-variant

　 編集：2022.07.14 by T.A.

→●、mdn

フォントの変形： 略式プロパティ。

名前 font-variant
値 normal |
none |
[<common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ||
　[small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps]
|| <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby || [sub | super]]
初期値 normal
適用対象 個々のプロパティを見よ
継承 個々のプロパティを見よ
百分率 個々のプロパティを見よ
算出値 個々のプロパティを見よ
アニメーション型 個々のプロパティを見よ

font-variant プロパティは、そのすべての下位プロパティ用の略式プロパティである。

以下のCSSが組み込んであります：

normal
font-variant のすべての下位プロパティを、それぞれの初期値に再設定する。
<SPAN style="font-family:Test_Font_Open; font-size:30px;
">ABCabcffittjWordT.012</SPAN><BR>

none
font-variant-ligatures を none に設定し、他のすべてのフォント特能プロパティを それぞれの初期値に再設定する。

他の略式プロパティと同様、font-variantの利用により、未指定な font-variant 下位プロパティは、それぞれの初期値に再設定される。それは、font-feature-settings の値は再設定しない。

<SPAN style="font-family:Test_Font_Open; font-size:30px;
 font-variant:none;
">ABCabcffittjWordT.012</SPAN><BR>

<common-lig-values> ○ 
<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:common-ligatures;
">ABCabcffittjWordT.012</SPAN><BR>

<discretionary-lig-values> ○ 
<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:discretionary-ligatures;
">ABCabcffittjWordT.012</SPAN><BR>

<historical-lig-values> ○ 
<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:historical-ligatures;
">ABCabcffittjWordT.012</SPAN><BR>

<contextual-alt-values> ○ 
<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:contextual;
">ABCabcffittjWordT.012</SPAN><BR>

small-caps 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:small-caps;
">ABCabc012</SPAN>


<SPAN style="font-family:ＭＳ 明朝; font-size:30px;
 font-variant:small-caps;
">ABCabc012</SPAN>

all-small-caps 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:all-small-caps;
">ABCabc012</SPAN>

petite-caps 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:petite-caps;
">ABCabc012</SPAN>

all-petite-caps 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:all-petite-caps;
">ABCabc012</SPAN>

unicase 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:unicase;
">ABCabc012</SPAN>

titling-caps 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:titling-caps;
">ABCabc012</SPAN>


<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:titling-caps;
">ABCabc012</SPAN>

<numeric-figure-values> ○ 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:oldstyle-nums;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:oldstyle-nums;
">ABCabc012</SPAN><BR>

<numeric-spacing-values> ○ 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:tabular-nums;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:tabular-nums;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:proportional-nums;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:proportional-nums;
">ABCabc012</SPAN><BR>

<numeric-fraction-values> ○ 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:diagonal-fractions;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:diagonal-fractions;
">ABCabc012</SPAN><BR>
⛌ 

<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:stacked-fractions;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:stacked-fractions;
">ABCabc012</SPAN><BR>

ordinal 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:ordinal;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:ordinal;
">ABCabc012</SPAN><BR>

slashed-zero 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:slashed-zero;
">ABCabc012</SPAN><BR>
⛌ 

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:slashed-zero;
">ABCabc012</SPAN><BR>
○

<east-asian-variant-values> ○ 
<SPAN style="font-family:ＭＳ 明朝; font-size:30px;
">ABCabc012麹町</SPAN><BR>
<SPAN style="font-family:ＭＳ 明朝; font-size:30px;
 font-variant:jis78;
">ABCabc012麹町</SPAN><BR>


<SPAN style="font-family:Test_Font; font-size:30px;
">ABCabc012麹町</SPAN><BR>
<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:jis78;
">ABCabc012麹町</SPAN><BR>
○

<east-asian-width-values> ○ 
<SPAN style="font-family:ＭＳ 明朝; font-size:30px;
">ABCabc012漢字</SPAN><BR>
<SPAN style="font-family:ＭＳ 明朝; font-size:30px;
 font-variant:proportional-width;
">ABCabc012漢字</SPAN><BR>


<SPAN style="font-family:Test_Font; font-size:30px;
">ABCabc012漢字</SPAN><BR>
<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:proportional-width;
">ABCabc012漢字</SPAN><BR>

ruby 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:ruby;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:ruby;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:ＭＳ 明朝; font-size:30px;
 font-variant:ruby;
">ABCabc012</SPAN><BR>

sub 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:sub;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:sub;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:ＭＳ 明朝; font-size:30px;
 font-variant:sub;
">ABCabc012</SPAN><BR>

super 
<SPAN style="font-family:Times New Roman; font-size:30px;
 font-variant:super;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant:super;
">ABCabc012</SPAN><BR>


<SPAN style="font-family:ＭＳ 明朝; font-size:30px;
 font-variant:super;
">ABCabc012</SPAN><BR>

012ABCabc…漢字／Times New Roman
012ABCabc…漢字／ＭＳ 明朝
012ABCabc…漢字／Test_Font
テスト
HTML：

ここに表示
¶[Edge]フォント「fontopoSunnyDay」でもだめ
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：