HTML Style fontFamily用法及代碼示例

fontFamily屬性設置/返回元素中文本的Font-Family名稱和generic-family名稱的列表。網絡瀏覽器將實現它識別的第一個值。

用法:

它返回fontFamily屬性。
```
object.style.fontFamily
```

它設置fontFamily屬性。

object.style.fontFamily = "font1, font2, etc.|initial|inherit"

屬性值：

值	描述
font1，font2等	由逗號分隔的font-family名稱和generic-family名稱的列表。
initial	將屬性設置為默認值。
inherit	從父元素繼承。

返回值：它返回font-family名稱和/或通用家族名稱的數量。

示例1：Font-family名稱“Impact”。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style fontFamily Property </title> 
</head> 
  
<body> 
    <center> 
        <p style="color:green; 
                  width:100%;  
                  font-size:30px;  
                  font-weight:bold;" 
           id="Geek1"> 
            GeeksForGeeks 
        </p> 
  
        <h2>DOM Style fontFamily Property </h2> 
        <br> 
        
        <button type="button" onclick="myGeeks()"> 
            Click to change 
        </button> 
  
        <script> 
            function myGeeks() { 
                
                //  Set font-family 'impact'. 
                document.getElementById( 
                  "Geek1").style.fontFamily = "Impact"; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

在點擊按鈕之前：
單擊按鈕後：

示例2：Font-family名稱“sans-serif”。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style fontFamily Property </title> 
</head> 
  
<body> 
    <center> 
        <p style="color:green; 
                  width:100%; 
                  font-size:30px; 
                  font-weight:bold;" id="Geek1"> 
            GeeksForGeeks 
        </p> 
  
        <h2>DOM Style fontFamily Property </h2> 
        <br> 
  
        <button type="button" onclick="myGeeks()"> 
            Click to change 
        </button> 
  
        <script> 
            function myGeeks() { 
  
                //  Set font-family 'sans-serif'. 
                document.getElementById( 
                  "Geek1").style.fontFamily = "sans-serif"; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

在點擊按鈕之前：
單擊按鈕後：

示例3：Font-family命名為“ Comic Sans MS，草書，sans-serif”。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style fontFamily Property </title> 
</head> 
  
<body> 
    <center> 
        <p style="color:green;  
                  width:100%; 
                  font-size:30px; 
                  font-weight:bold;" id="Geek1"> 
            GeeksForGeeks 
        </p> 
  
        <h2>DOM Style fontFamily Property </h2> 
        <br> 
  
        <button type="button" onclick="myGeeks()"> 
            Click to change 
        </button> 
  
        <script> 
            function myGeeks() { 
  
                //   Set font-family 'Comic Sans MS, cursive 
                //  and sans-serif' 
                document.getElementById( 
                        "Geek1").style.fontFamily = 
                    'Comic Sans MS, cursive, sans-serif'; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

在點擊按鈕之前：
單擊按鈕後：

穀歌瀏覽器
IE瀏覽器
火狐瀏覽器
Opera
Safari

相關用法

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