CSS font-stretch用法及代碼示例

CSS中的font-stretch屬性用於將文本設置為較寬或較窄。此屬性不能使用任何字體。它僅在字體係列具有width-variant字體時起作用。

用法:

font-stretch:normal|ultra-condensed|extra-condensed|condensed|
semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;

屬性值：

normal:它是默認字體。它不會拉伸字體。
ultra-condensed：它用於指定比常規字體更簡潔的字體。
extra-condensed：它用於將文本設置為比普通文本窄，而不比ultra-condensed窄。
condensed:它用於設置比semi-condensed窄的文本，而不是比extra-condensed窄的文本。
semi-condensed：它用於將文本設置為比普通文本窄，而不比semi-condensed窄。
semi-expanded：它用於將文本設置為比普通文本寬，但不設置為寬然後擴展。
expanded:它用於設置文本寬於semi-expended，但不寬於extra-expanded。
extra-expanded：它用於將文本設置為比擴展寬，但不能比ultra-expanded寬。
ultra-expanded：它用於設置比ultra-expended寬的文本。

例：

<!--HTML code to illustrate font-stretch  
Property -->
<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS font-stretch Property 
        </title> 
          
        <style> 
            .normal { 
                font-stretch:normal; 
            } 
              
            .ultra_condensed { 
                font-stretch:ultra-condensed; 
            } 
              
            .extra_condensed { 
                font-stretch:extra-condensed; 
            } 
              
            .condensed { 
                font-stretch:condensed; 
            } 
              
            .extra_condensed { 
                font-stretch:extra-condensed; 
            } 
              
            .semi_expanded { 
                font-stretch:semi-expanded; 
            } 
              
            .expanded { 
                font-stretch:expanded; 
            } 
              
            .extra_expanded { 
                font-stretch:extra-expanded; 
            } 
              
            .ultra_expanded { 
                font-stretch:ultra-expanded; 
            } 
        </style> 
    </head> 
      
    <body> 
        <div class = "normal"> 
            GeeksforGeeks:A computer science portal 
        </div> 
          
        <div class = "ultra_condensed"> 
            GeeksforGeeks:A computer science portal 
        </div> 
          
        <div class = "extra_condensed"> 
            GeeksforGeeks:A computer science portal 
        </div> 
          
        <div class = "condensed"> 
            GeeksforGeeks:A computer science portal 
        </div> 
          
        <div class = "extra_condensed"> 
            GeeksforGeeks:A computer science portal 
        </div> 
          
        <div class = "semi_expanded"> 
            GeeksforGeeks:A computer science portal 
        </div> 
          
        <div class = "expanded"> 
            GeeksforGeeks:A computer science portal 
        </div> 
          
        <div class = "extra_expanded"> 
            GeeksforGeeks:A computer science portal 
        </div> 
          
        <div class = "ultra_expanded"> 
            GeeksforGeeks:A computer science portal 
        </div> 
    </body> 
      
</html>

輸出：

注意：此屬性不適用於任何字體。

支持的瀏覽器：下麵列出了font-stretch屬性支持的瀏覽器：

穀歌瀏覽器48.0
Internet Explorer 9.0
Firefox 9.0
Opera 35.0
Safari 11.0

相關用法

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