HTML DOM Style fontFamily property
Style Objects Definition and Usage
fontFamily property sets or returns a list of elements of the Chinese font family name / generic font family name.
The browser will use the first value it recognizes.
There are two types of font family values of:
- font-family: a font family name, such as "verdana" or "arial".
- generic-family: a generic font family name, such as "serif" or "sans-serif".
Tip: Always specify a generic font family name as a last resort!
NOTE: If thefont family name contains spaces, quotation marks.
Tip: Check web-safe fonts commonly used font combinations.
grammar
Setting fontFamily properties:
Object.style.fontFamily="font1, font2, etc.|inherit"
Back fontFamily properties:
Object.style.fontFamily
| 值 | 描述 |
|---|---|
| font1, font2, etc. | 字体系列名称/通用字体系列名称的表，由逗号分割。 |
| inherit | fontFamily 属性的值从父元素继承。 |
Browser Support
All major browsers support fontFamily property.
Note: IE7 and earlier versions do not support the "inherit" value.IE8 only provides! DOCTYPE supported "inherit". IE9 support "inherit".
Examples
Examples
Change the text font:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
<Script>
function displayResult () {
document.getElementById ( "p1") style.fontFamily = "Impact, Charcoal, sans-serif".;
}
</ Script>
</ Head>
<Body>
<P id = "p1"> This is some text. </ P>
<br>
<Button type = "button" onclick = "displayResult ()"> Change font </ button>
</ Body>
</ Html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
<Script>
function displayResult () {
document.getElementById ( "p1") style.fontFamily = "Impact, Charcoal, sans-serif".;
}
</ Script>
</ Head>
<Body>
<P id = "p1"> This is some text. </ P>
<br>
<Button type = "button" onclick = "displayResult ()"> Change font </ button>
</ Body>
</ Html>
try it"
Style Objects