「font-variant-position」は、上付き文字・下付き文字を指定します。
CSS Ver. | 適用要素 | 継承 |
---|---|---|
3.0 | 全要素 | する |
構文 | |
---|---|
font-variant-position : normal | sub | super; |
|
プロパティ/設定値 | 意味 |
font-variant-position : normal; | 通常の表示 |
font-variant-position : sub; | 下付き文字で表示 |
font-variant-position : super; | 上付き文字で表示 |
デフォルト:「タグ毎のスタイル初期値」を参照 |
<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-normal{font-variant-position : normal;}
.css-sub{font-variant-position : sub;}
.css-super{font-variant-position : super;}
<!-- html -->
<div class="common">
<div class="cssTitle">font-variant-position 表示例<br><br>
左:super 中:normal 右:sub</div>
<div>
<span class="css-super">
super! </span>
<span class="css-normal">
normal! </span>
<span class="css-sub">
sub!</span>
</div>
</div>
※ほとんどのブラウザが未対応のようです。現時点(2017/05)で、Firefoxは動作確認できました。
【W3Cのfont-variant-position仕様書】
https://www.w3.org/TR/css-fonts-3/#font-variant-position-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-alternates | 代替文字の置き換え指定 |
font-variant-caps | 英大文字での表示制御 |
font-variant-east-asian | 漢字の表示指定 |
font-variant-ligatures | 合字の制御指定 |
font-variant-numeric | 数値の表示形式指定 |
font-weight | 文字の太さ |