当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。