CSS font-variant-position属性用法及代码示例

CSS的font-variant-position用于将字体的位置更改为上标，下标或普通字体。它们相对于字体的基线定位，该基线保持不变。

用法:

font-variant-position:normal | sub | super

属性值：

Normal:Normal停用上标和下标字形。如果不存在，则字体样式的上级或下级将以基线为基准。

用法:

font-variant-position:normal

例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport"
        content="width=device-width, 
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
  em{ 
    font-style:unset; 
  } 
  .font{ 
    font-variant-position:normal; 
  } 
</style> 
<body> 
  <em> 
    (geeksforgeeks) 
    <em class="font"> 
      2 
    </em> 
  </em> 
</body> 
</html>

输出：

极好的：超级激活上标和备用字形。

用法:

font-variant-position:normal

例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width,  
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
  .font{ 
    font-variant-position:super; 
  } 
</style> 
<body> 
  <em> 
    (geeksforgeeks) 
    <em class="font"> 
      2 
    </em> 
  </em> 
</body> 
</html>

输出：

子：Sub激活下标和备用字形。

用法:

font-variant-position:sub

例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width, 
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
  .font{ 
    font-variant-position:sub; 
  } 
</style> 
<body> 
  <em> 
    H 
    <em class="font"> 
      2 
    </em> 
    O 
    <em class="font"> 
      2 
    </em> 
  </em> 
</body> 
</html>

输出：

支持的浏览器：

火狐浏览器

相关用法

注：本文由纯净天空筛选整理自tarun007大神的英文原创作品 CSS font-variant-position Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。