CSS font-synthesis屬性用法及代碼示例

font-synthesis屬性控製瀏覽器對缺失類型樣式(如粗體，斜體或下劃線)的綜合。諸如中文和日文之類的不同字體語言不包含這些字體變體，因此將它們合成可能會阻礙文本的可讀性，因此必須關閉字體的默認瀏覽器合成。

用法:

font-synthesis:none | weight | style | style weight;

屬性值：

none:無表示無法合成粗細和樣式字樣。

用法:

font-synthesis:none;

例：

<!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-weight:bold; 
  } 
  .para { 
    font-synthesis:none; 
  } 
</style> 
<body> 
  <span>With font-synthesis:none</span><br> 
  <em class="para">Geeks for geeks | ???</em> 
  <br/> 
  <span>Without font-synthesis property 
     </span><br> 
  <em>Geeks for geeks | ???</em> 
</body> 
</html>

輸出：

Style:根據此要求，瀏覽器可以根據需要合成斜體字體。

用法:

font-synthesis:style

例：

<!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-weight:bold; 
  } 
  .para { 
    font-synthesis:style; 
  } 
</style> 
<body> 
  <span>Without font-synthesis 
        property</span><br> 
  <em>Geeks for geeks | ???</em> 
  <br> 
  <span>With font-synthesis:Style 
    </span><br> 
  <em class="para">Geeks for geeks | ???</em> 
</body> 
</html>

輸出：

weight:據此，如果需要，瀏覽器可以合成粗體字。

用法:

font-synthesis:weight

例：

<!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-weight:bold; 
  } 
  .para { 
    font-synthesis:weight; 
  } 
</style> 
<body> 
  <span>Without font-synthesis property</span><br> 
  <em>Geeks for geeks | ???</em> 
  <br> 
  <span>With font-synthesis:Weight</span><br> 
  <em class="para">Geeks for geeks | ???</em> 
</body> 
</html>

輸出：

款式重量：據此，瀏覽器可以根據需要合成粗體和斜體字體。

用法:

font-synthesis:style weight

例：

<!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-weight:bold; 
  } 
  .para { 
    font-synthesis:style weight; 
  } 
</style> 
<body> 
  <span>Without font-synthesis property</span><br> 
  <em>Geeks for geeks | ???</em> 
  <br> 
  <span>With font-synthesis:Style Weight</span><br> 
  <em class="para">Geeks for geeks | ???</em> 
</body> 
</html>

輸出：

支持的瀏覽器：

Firefox
蘋果Safari

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 CSS font-synthesis Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。