font-variant

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

font-variant 属性は、テキストをフォントの自体のバリエーションを使用してレンダリングするかどうかを指定します。

メモ: プレゼンテーション属性であるため、 font-variant には対応する CSS プロパティ font-variant があります。両方が指定された場合、 CSS プロパティが優先されます。

この属性は以下の SVG 要素で使用できます。

例

SVG のフォントバリエーションの制御

html

<svg viewBox="0 0 250 60" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-variant="normal">Normal テキスト</text>
  <text y="45" font-variant="small-caps">Small-caps テキスト</text>
</svg>

使用上のメモ

値	`normal` \| `none` \| [ `<common-lig-values>` \|\| `<discretionary-lig-values>` \|\| `<historical-lig-values>` \|\| `<contextual-alt-values>` \|\| `stylistic( <feature-value-name> )` \|\| `historical-forms` \|\| `styleset( <feature-value-name># )` \|\| `character-variant( <feature-value-name># )` \|\| `swash( <feature-value-name> )` \|\| `ornaments( <feature-value-name> )` \|\| `annotation( <feature-value-name> )` \|\| [ `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` ]
デフォルト値	`normal`
アニメーション	可