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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。