diff options
Diffstat (limited to 'files/zh-cn/web/css/font-variant-position/index.html')
| -rw-r--r-- | files/zh-cn/web/css/font-variant-position/index.html | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/font-variant-position/index.html b/files/zh-cn/web/css/font-variant-position/index.html new file mode 100644 index 0000000000..c150db8747 --- /dev/null +++ b/files/zh-cn/web/css/font-variant-position/index.html @@ -0,0 +1,103 @@ +--- +title: font-variant-position +slug: Web/CSS/font-variant-position +translation_of: Web/CSS/font-variant-position +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>font-variant-position</code></strong> CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.</p> + +<p>The glyphs are positioned relative to the baseline of the font, which remains unchanged. These glyphs are typically used in {{HTMLElement("sub")}} and {{HTMLElement("sup")}} elements.</p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +font-variant-position: normal; +font-variant-position: sub; +font-variant-position: super; + +/* Global values */ +font-variant-position: inherit; +font-variant-position: initial; +font-variant-position: unset; +</pre> + +<p>When the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs.</p> + +<p>These alternate glyphs share the same em-box and the same baseline as the rest of the font. They are merely graphically enhanced, and have no effect on the line-height and other box characteristics.</p> + +<p>{{cssinfo}}</p> + +<h2 id="语法">语法</h2> + +<p>The <code>font-variant-position</code> property is specified as one of the keyword values listed below.</p> + +<h3 id="可选值">可选值</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Deactivates alternate superscript and subscript glyphs.</dd> + <dt><code>sub</code></dt> + <dd>Activates subscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.</dd> + <dt><code>super</code></dt> + <dd>Activates superscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.</dd> +</dl> + +<h3 id="正式语法">正式语法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><p class="normal">Normal!</p> +<p class="super">Super!</p> +<p class="sub">Sub!</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">p { + display: inline; +} + +.normal { + font-variant-position: normal; +} + +.super { + font-variant-position: super; +} + +.sub { + font-variant-position: sub; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Examples') }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-position', 'font-variant-position')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + + + +<p>{{Compat("css.properties.font-variant-position")}}</p> |