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


HTML Style font用法及代码示例

HTML DOM样式的font属性用于更改元素的字体属性。它可用于更改字体样式,粗细,大小和字体。

用法:

  • 设置字体样式:
    node.style.font = "font-properties font-size font-family;"
  • 要获取当前字体样式:
    node.style.font;

属性值:它是一个字符串,其值包括字体属性,字体大小和字体系列。
这些属性按以下顺序是必需的:


  • 字体样式
  • 字体变体
  • 字型粗细
  • 字体大小
  • 字型高度
  • 字体系列

方法:我们有一个段落元素,其ID为text。我们在JavaScript中创建了一个函数,该函数将变量gfg中的字符串值作为参数,并将“文本” ID元素的style.font属性设置为“ gfg”。我们通过按钮调用此函数,并适当提供属性值。

例:

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <title>HTML DOM | Style font property</title> 
</head> 
  
<body> 
    <p id='text'>Welcome to GeeksForGeeks</p> 
    
    <button onclick= 
            "changeFont('italic 20px arial')"> 
      Italic, Arial, 20px 
  </button> 
    
    <button onclick= 
            "changeFont('bold 26px serif')"> 
      Bold, Serif, 26px 
  </button> 
    
    <button onclick= 
            "changeFont('italic bold 30px Montserrat')"> 
      Italic, Montserrat, 20px 
  </button> 
    
    <button onclick="changeFont('900 34px hack')"> 
      Weight 900, Hack, 34px 
  </button> 
  
    <script type="text/javascript"> 
        function changeFont(gfg) { 
            
            //  Get font style. 
            document.getElementById( 
              'text').style.font = gfg; 
        } 
    </script> 
  
</body> 
  
</html>

输出:

支持的浏览器:DOM style.font属性支持的浏览器如下:

  • 谷歌浏览器
  • Internet Explorer /Edge
  • Firefox
  • Opera
  • Safari


相关用法

注:本文由纯净天空筛选整理自rossoskull大神的英文原创作品 HTML | DOM Style font Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。