font

Description
Syntax
Examples
Links

Description

The font property for CSS is shorthand for font-family, font-size, font-stretch, font-style, font-variant, font-weight, and line-height.

Syntax

CSS

font: value;

JS

object.style.font = "value";

Values

<'font'> = [ [ <'font-style'> || <'font-variant'> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

<'font-style'> = normal | italic | oblique <angle>?

normal

Matches against a face that is classified as a normal face, one that is neither italic or obliqued.

italic

Matches against a font that is labeled as an italic face, or an oblique face if one does not exist.

oblique

Controls matching against an oblique face. Positive angles represent a clockwise slant; negative angles represent a counter-clockwise slant.

<angle>

deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<'font-variant'> = normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name>#) || character-variant(<feature-value-name>#) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby || [ sub | super ] ]

normal

Resets all subproperties of font-variant to their inital value.

none

Sets font-variant-ligatures to none and resets all other font feature properties to their initial value.

<common-lig-values> = [ common-ligatures | no-common-ligatures ]

common-ligatures

Enables display of common ligatures (OpenType features: liga, clig).

no-common-ligatures

Disables display of common ligatures (OpenType features: liga, clig).

<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]

discretionary-ligatures

Enables display of discretionary ligatures (OpenType feature: dlig).

no-discretionary-ligatures

Disables display of discretionary ligatures (OpenType feature: dlig).

<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]

historical-ligatures

Enables display of historical ligatures (OpenType feature: hlig).

no-historical-ligatures

Disables display of historical ligatures (OpenType feature: hlig).

<contextual-alt-values> = [ contextual | no-contextual ]

contextual

Enables display of contextual alternates (OpenType feature: calt).

no-contextual

Disables display of contextual alternates (OpenType feature: calt).

small-caps

Enables display of small capitals.

all-small-caps

Enables display of small capitals for both upper and lowercase letters.

petite-caps

Enables display of petite capitals.

all-petite-caps

Enables display of petite capitals for both upper and lowercase letters.

unicase

Enables display of mixture of small capitals for uppercase letters with normal lowercase letters.

titling-caps

Enables display of titling capitals.

stylistic(<feature-value-name>)

Enables display of stylistic alternates (font specific, OpenType feature: salt <feature-index>).

historical-forms

Enables display of historical forms (OpenType feature: hist).

styleset(<feature-value-name>#)

Enables display with stylistic sets (font specific, OpenType feature: ss<feature-index> OpenType currently defines ss01 through ss20).

character-variant(<feature-value-name>#)

Enables display of specific character variants (font specific, OpenType feature: cv<feature-index> OpenType currently defines cv01 through cv99).

swash(<feature-value-name>)

Enables display of swash glyphs (font specific, OpenType feature: swsh <feature-index>, cswh <feature-index>).

ornaments(<feature-value-name>)

Enables replacement of default glyphs with ornaments, if provided in the font (font specific, OpenType feature: ornm <feature-index>). Some fonts may offer ornament glyphs as alternates for a wide collection of characters; however, displaying arbitrary characters (e.g., alphanumerics) as ornaments is poor practice as it distorts the semantics of the data. Font designers are encouraged to encode all ornaments (except those explicitly encoded in the Unicode Dingbats blocks, etc.) as alternates for the bullet character (U+2022) to allow authors to select the desired glyph using ornaments().

annotation(<feature-value-name>)

Enables display of alternate annotation forms (font specific, OpenType feature: nalt <feature-index>).

<numeric-figure-values> = [ lining-nums | oldstyle-nums ]

lining-nums

Enables display of lining numerals.

oldstyle-nums

Enables display of old-style numerals.

<numeric-spacing-values> = [ proportional-nums | tabular-nums ]

proportional-nums

Enables display of proportional numerals.

tabular-nums

Enables display of tabular numerals.

<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]

diagonal-fractions

Enables display of lining diagonal fractions.

stacked-fractions

Enables display of lining stacked fractions.

ordinal

Enables display of letter forms used with ordinal numbers.

slashed-zero

Enables display of slashed zeros.

<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]

jis78

Enables rendering of JIS78 forms (OpenType feature: jp78).

jis83

Enables rendering of JIS83 forms (OpenType feature: jp83).

jis90

Enables rendering of JIS90 forms (OpenType feature: jp90).

jis04

Enables rendering of JIS2004 forms (OpenType feature: jp04).

simplified

Enables rendering of simplified forms (OpenType feature: smpl).

traditional

Enables rendering of traditional forms (OpenType feature: trad).

<east-asian-width-values> = [ full-width | proportional-width ]

full-width

Enables rendering of full-width variants (OpenType feature: fwid).

proportional-width

Enables rendering of proportionally-spaced variants (OpenType feature: pwid).

ruby

Enables display of ruby variant glyphs (OpenType feature: ruby). Since ruby text is generally smaller than the associated body text, font designers can design special glyphs for use with ruby that are more readable than scaled down versions of the default glyphs. Only glyph selection is affected, there is no associated font scaling or other change that affects line layout.

sub

Enables display of subscript variants.

super

Enables display of superscript variants.

<'font-weight'> = <font-weight-absolute> | bolder | lighter

<font-weight-absolute> = [normal | bold |  <number [1,1000]>]

normal

Same as 400.

bold

Same as 700.

<number [1,1000]>

Each number indicates a weight that is at least as dark as its predecessor. Only values greater than or equal to 1, and less than or equal to 1000, are valid, and all other values are invalid.

100 - Thin

200 - Extra Light (Ultra Light)

300 - Light

400 - Normal

500 - Medium

600 - Semi Bold (Demi Bold)

700 - Bold

800 - Extra Bold (Ultra Bold)

900 - Black (Heavy)

bolder

Specifies a bolder weight than the inherited value.

lighter

Specifies a lighter weight than the inherited value.

<'font-stretch'> = normal | <percentage> | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

normal

100%.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

ultra-condensed

50%

extra-condensed

62.5%

condensed

75%

semi-condensed

87.5%

semi-expanded

112.5%

expanded

125%

extra-expanded

150%

ultra-expanded

200%

<'font-size'> = <absolute-size> | <relative-size> | <length-percentage>

<absolute-size> = [ xx-small | x-small | small | medium | large | x-large | xx-large ]

<relative-size> = [ larger | smaller ]

<length-percentage> =
    <length> |
    <percentage>

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<'line-height'> = normal | <number> | <length> | <percentage> | inherit

normal

Tells user agents to set the used value to a reasonable value based on the font of the element.

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

inherit

Specifies the same value as the parent.

<'font-family'> = [ <family-name> | <generic-family> ]#

<family-name>

The name of a font family.

<generic-family>

A keyword representing a generic font.

caption

The font used for captioned controls.

icon

The font used to label icons.

menu

The font used in menus.

message-box

The font used in dialog boxes.

small-saption

The font used for labeling small controls.

status-bar

The font used in window status bars.

Examples

1 · font-family · family-name

2 · font-family · generic-family

3 · font-family · JS

<!doctype html>
<html>
<body>
    <button>initial</button><br>
    <button>zapf-chancery</button>
    <button>western</button>
    <button>courier</button>
    <button>times</button>
    <button>helvetica</button><br>
    <button>cursive</button>
    <button>fantasy</button>
    <button>monospace</button>
    <button>serif</button>
    <button>sans-serif</button><br>
    <button>zapf-chancery, cursive</button>
    <button>western, fantasy</button>
    <button>courier, monospace</button>
    <button>times, serif</button>
    <button>helvetica, sans-serif</button>
    <p>font-family</p>
    <script>
        function myfunction(myparameter)
        {
            let myproperty = myparameter.target.innerHTML;
            if(myproperty != "initial")
            {
                myproperty = "12pt " + myproperty;
            }
            document.querySelector("p").style.font = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

4 · font-size · absolute-size

5 · font-size · length

6 · font-size · percentage

7 · font-size · relative-size

8 · font-size · JS

<!doctype html>
<html>
<body>
    <button>initial</button><br>
    <button>xx-small</button>
    <button>x-small</button>
    <button>small</button>
    <button>medium</button>
    <button>large</button>
    <button>x-large</button>
    <button>xx-large</button><br>
    <button>smaller</button>
    <button>larger</button><br>
    <button value="1em">em</button>
    <button value="2.235ex">ex</button>
    <button value="0.1667in">in</button>
    <button value="0.423cm">cm</button>
    <button value="4.23mm">mm</button>
    <button value="1pc">pc</button>
    <button value="12pt">pt</button>
    <button value="16px">px</button><br>
    <button value="150%">percentage</button>
    <p>font-size</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            let myproperty = mytarget.value || mytarget.innerHTML;
            if(myproperty != "initial")
            {
                myproperty += " times";
            }
            document.querySelector("p").style.font = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

9 · font-stretch · ultra-condensed

10 · font-stretch · extra-condensed

11 · font-stretch · condensed

12 · font-stretch · semi-condensed

13 · font-stretch · normal

14 · font-stretch · semi-expanded

15 · font-stretch · expanded

16 · font-stretch · extra-expanded

17 · font-stretch · ultra-expanded

18 · font-stretch · percentage

19 · font-stretch · JS

<!doctype html>
<html>
<head>
    <style>
        @font-face
        {
            font-family: myfontfamily;
            src: url(/assets/ttf/Inconsolata.ttf);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>ultra-condensed</button>
    <button>extra-condensed</button>
    <button>condensed</button>
    <button>semi-condensed</button>
    <button>normal</button>
    <button>semi-expanded</button>
    <button>expanded</button>
    <button>extra-expanded</button>
    <button>ultra-expanded</button>
    <button value="200%">percentage</button>
    <p>font-stretch</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            let myproperty = mytarget.value || mytarget.innerHTML;
            if(myproperty != "initial")
            {
                myproperty += " 12pt myfontfamily";
            }
            document.querySelector("p").style.font = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

20 · font-style · italic

21 · font-style · normal

22 · font-style · oblique

23 · font-style · JS

24 · font-variant · normal

25 · font-variant · small-caps

26 · font-variant · JS

27 · font-weight · bold

28 · font-weight · bolder

29 · font-weight · lighter

30 · font-weight · normal

31 · font-weight · number

<!doctype html>
<html>
<head>
    <style>
        .number1
        {
            font: 1 12pt times;
        }
        .number100
        {
            font: 100 12pt times;
        }
        .number200
        {
            font: 200 12pt times;
        }
        .number300
        {
            font: 300 12pt times;
        }
        .number400
        {
            font: 400 12pt times;
        }
        .number500
        {
            font: 500 12pt times;
        }
        .number600
        {
            font: 600 12pt times;
        }
        .number700
        {
            font: 700 12pt times;
        }
        .number800
        {
            font: 800 12pt times;
        }
        .number900
        {
            font: 900 12pt times;
        }
        .number1000
        {
            font: 1000 12pt times;
        }
    </style>
</head>
<body>
    <p class="number1">1</p>
    <p class="number100">100</p>
    <p class="number200">200</p>
    <p class="number300">300</p>
    <p class="number400">400</p>
    <p class="number500">500</p>
    <p class="number600">600</p>
    <p class="number700">700</p>
    <p class="number800">800</p>
    <p class="number900">900</p>
    <p class="number1000">1000</p>
</body>
</html>

32 · font-weight · JS

33 · line-height · length

34 · line-height · normal

35 · line-height · number

36 · line-height · percentage

37 · line-height · JS

<!doctype html>
<html>
<head>
    <style>
        p
        {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <button>initial</button><br>
    <button value="1em">em</button>
    <button value="2.235ex">ex</button>
    <button value="0.1667in">in</button>
    <button value="0.423cm">cm</button>
    <button value="4.23mm">mm</button>
    <button value="1pc">pc</button>
    <button value="12pt">pt</button>
    <button value="16px">px</button><br>
    <button>normal</button>
    <button value="2">number</button>
    <button value="400%">percentage</button>
    <p>line-height</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            let myproperty = mytarget.value || mytarget.innerHTML;
            if(myproperty != "initial")
            {
                myproperty = "12pt/" + myproperty + " times";
            }
            document.querySelector("p").style.font = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>