HTML DOM Style fontVariant property
Style Objects Definition and Usage
fontVariant property sets or returns whether to display small caps font.
This means that all lowercase letters will be converted to uppercase, but compared to the rest of the text, the letter will be a smaller font size.
grammar
Setting fontVariant properties:
Object.style.fontVariant="normal|small-caps|inherit"
Back fontVariant properties:
Object.style.fontVariant
| 值 | 描述 |
|---|---|
| normal | 默认。字体是 normal（正常的）。 |
| small-caps | 字体显示为小型大写字母。 |
| inherit | fontVariant 属性的值从父元素继承。 |
Browser Support
All major browsers support fontVariant 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 font to small-caps:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.com) </ title>
<Script>
function displayResult () {
document.getElementById ( "p1") style.fontVariant = "small-caps".;
}
</ Script>
</ Head>
<Body>
<P id = "p1"> This is some text. </ P>
<P> 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.fontVariant = "small-caps".;
}
</ Script>
</ Head>
<Body>
<P id = "p1"> This is some text. </ P>
<P> THIS IS SOME TEXT. </ P>
<br>
<Button type = "button" onclick = "displayResult ()"> Change font </ button>
</ Body>
</ Html>
try it"
Style Objects