在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

font-variant-position CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.

The glyphs are positioned relative to the baseline of the font, which remains unchanged. These glyphs are typically used in <sub> and <sup> elements.

/* 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;
					

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.

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.

句法

font-variant-position property is specified as one of the keyword values listed below.

值

normal

Deactivates alternate superscript and subscript glyphs.

sub

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.

super

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.

形式定义

初始值	normal
适用于	所有元素。它还适用于 ::first-letter and ::first-line .
继承	yes
计算值	如指定
动画类型	discrete

形式句法

normal | sub | super
					

范例

Setting superscript and subscript forms

HTML

<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>
					

CSS

p {
  display: inline;
}
.normal {
  font-variant-position: normal;
}
.super {
  font-variant-position: super;
}
.sub {
  font-variant-position: sub;
}
					

结果

规范

规范	状态	注释
CSS Fonts Module Level 3 The definition of 'font-variant-position' in that specification.	候选推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
font-variant-position	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

元数据

• 最后修改： 2020 年 7 月 17 日

相关话题

1. CSS
2. CSS 参考
3. CSS 字体
4. 指南

   1. OpenType font features guide
   2. Variable fonts guide
5. At-Rules

   1. @font-face
   2. @font-feature-values
6. 特性

   1. font
   2. font-family
   3. font-feature-settings
   4. font-kerning
   5. font-language-override
   6. font-optical-sizing
   7. font-size
   8. font-size-adjust
   9. font-smooth
   10. font-stretch
   11. font-style
   12. font-synthesis
   13. font-variant
   14. font-variant-alternates
   15. font-variant-caps
   16. font-variant-east-asian
   17. font-variant-ligatures
   18. font-variant-numeric
   19. font-variant-position
   20. font-variation-settings
   21. font-weight
   22. line-height
   23. line-height-step