font
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
4 · font-size · absolute-size
5 · font-size · length
6 · font-size · percentage
7 · font-size · relative-size
8 · font-size · JS
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
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
32 · font-weight · JS
33 · line-height · length
34 · line-height · normal
35 · line-height · number
36 · line-height · percentage
37 · line-height · JS
38 · system · caption
39 · system · icon
40 · system · menu
41 · system · message-box
42 · system · small-caption
43 · system · status-bar
44 · system · JS
Links
Related
Properties
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-composition
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timeline
- animation-timing-function
- appearance
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-ellipsis
- block-size
- border
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-end-end-radius
- border-end-start-radius
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-inline
- border-inline-color
- border-inline-end
- border-inline-end-color
- border-inline-end-style
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-style
- border-inline-start-width
- border-inline-style
- border-inline-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-start-end-radius
- border-start-start-radius
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret
- caret-color
- caret-shape
- clear
- clip
- clip-path
- color
- color-scheme
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container
- container-name
- container-type
- content
- content-visibility
- continue
- counter-increment
- counter-reset
- counter-set
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font-family
- font-feature-settings
- font-kerning
- font-optical-sizing
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-variant-caps
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- forced-color-adjust
- gap
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-start
- grid-row
- grid-row-end
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphens
- image-rendering
- initial-letter
- initial-letter-align
- inline-size
- inset
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inset-inline-start
- isolation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- line-break
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-block
- margin-block-end
- margin-block-start
- margin-bottom
- margin-inline
- margin-inline-end
- margin-inline-start
- margin-left
- margin-right
- margin-top
- mask
- mask-border
- mask-border-mode
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
- math-depth
- math-shift
- math-style
- max-block-size
- max-height
- max-inline-size
- max-lines
- max-width
- min-block-size
- min-height
- min-inline-size
- min-width
- mix-blend-mode
- nav-down
- nav-left
- nav-right
- nav-up
- object-fit
- object-position
- opacity
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-block
- overflow-clip-margin
- overflow-inline
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- paint-order
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- pointer-events
- position
- print-color-adjust
- quotes
- resize
- right
- rotate
- row-gap
- scale
- scroll-behavior
- scroll-margin
- scroll-margin-block
- scroll-margin-block-end
- scroll-margin-block-start
- scroll-margin-bottom
- scroll-margin-inline
- scroll-margin-inline-end
- scroll-margin-inline-start
- scroll-margin-left
- scroll-margin-right
- scroll-margin-top
- scroll-padding
- scroll-padding-block
- scroll-padding-block-end
- scroll-padding-block-start
- scroll-padding-bottom
- scroll-padding-inline
- scroll-padding-inline-end
- scroll-padding-inline-start
- scroll-padding-left
- scroll-padding-right
- scroll-padding-top
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- scroll-timeline
- scroll-timeline-axis
- scroll-timeline-name
- scrollbar-color
- scrollbar-gutter
- scrollbar-width
- shape-image-threshold
- shape-margin
- shape-outside
- tab-size
- table-layout
- text-align
- text-align-all
- text-align-last
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-decoration-thickness
- text-decoration-trim
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-offset
- text-underline-position
- top
- transform
- transform-box
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- translate
- unicode-bidi
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom