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
相关用法
- HTML Style right用法及代码示例
- HTML Style top用法及代码示例
- HTML Style textDecorationLine用法及代码示例
- HTML Style borderRight用法及代码示例
- HTML Style borderLeft用法及代码示例
- HTML Style textAlign用法及代码示例
- HTML Style wordSpacing用法及代码示例
- HTML Style opacity用法及代码示例
- HTML Style height用法及代码示例
- HTML Style whiteSpace用法及代码示例
- HTML Style textDecoration用法及代码示例
- HTML Style columnRuleStyle用法及代码示例
- HTML Style display用法及代码示例
- HTML Style transformStyle用法及代码示例
- HTML Style visibility用法及代码示例
注:本文由纯净天空筛选整理自PranchalKatiyar大神的英文原创作品 HTML | DOM Style fontFamily Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。