MENU


Font

color
:red: sets the text color to be red
:inherit: inherits the value from the parent element

font (shorthand)

...font-family
:"Courier New",Verdana,Arial,Serif: tries to use the font "Courier New". If the font cannot be found, it tries Verdana. Arial is tried next. Let the browser choose a font from the generic family Serif if everything else fails. Generic font families include Serif, Sans-serif, Cursive, Fantasy, Monospace.
:inherits: inherits the value from the parent element.

...font-size
:xx-small: uses a very small size.
:x-small: uses an extra small size.
:small: uses a small size.
:medium: uses a medium size.
:large: uses a large size.
:x-large: uses an extra-large size.
:xx-large: uses a very large size.
:xxx-large: uses an extremely large size.
:smaller: uses a size smaller than the parent.
:larger: uses a size larger than the parent.
:10px:sets the size to be 10px.
:80%:sets the size to be 80% of the parent's size.
:inherit: inherits the value from the parent element.
Setting calc(12px + 5vh) ensures a minimum font size as the size of the viewport varies.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
   p{
      font-family:cursive,sans-serif;
      font-size: calc(12px + 5vh);
   }
</style></head><body>
   <p>You can think of the entire Internet as a place where ideas embodied in cyberspace are having a war, and it's not much different than the war of gods in heaven, which has been taking place since there's been human beings.</p>
</body></html>

...font-size-adjust
:0.49: adjusts the font size such that the size difference between 'x' and 'X' is 0.49. This allows sizes to be standardized across fallback fonts.
:none: no adjustment.
:inherit: inherits the value from the parent element.

...font-style
:normal: uses the default font style.
:italic: uses the italic font style.
:oblique: uses the oblique font style.
:inherit: inherits the value from the parent element.

...font-weight
:normal: uses a normal weight.
:bold: uses a thick weight.
:bolder: uses a thicker weight.
:lighter: uses a lighter weight.
:800: uses a weight as bold as 800. The normal weight is 400. The bold weight is 700.
:inherit: inherits the value from the parent element.

...font-stretch
:wider: displays wider text.
:narrower: displays narrower text.
:ultra-condensed: displays the narrowest text.
:extra-condensed: displays narrower text.
:condensed: displays narrow text.
:semi-condensed: displays slightly narrow text.
:normal: displays normal text.
:semi-expanded: displays slightly wide text.
:expanded: displays wide text.
:extra-expanded: displays wider text.
:ultra-expanded: displays the widest text.
:inherit: inherits the value from the parent element.
A 'class' attribute can be given more than one value. Fixing the 'width' of <body> prevents the content from shifting around as the visitor resizes the window. Setting the 'margin' to zero in <body> allows the content to stick to the border without any space in between.
RESETRUNFULL
<!DOCTYPE html><html><head>
   <style type="text/css">
      div {background:orange;}
      .i {font-style:italic;}
      .b {font-weight:bold;}
      .u {text-decoration:underline;}
   </style></head><body style="width:1440px; margin:0px;">
  <div class="i b u">
      Hello World! Hello World!
      Hello World! Hello World!
      Hello World! Hello World!
      Hello World! Hello World!
      Hello World! Hello World!
   </div>
</body></html>

font-feature-settings
: normal: let the browser control advanced typographic features in OpenType fonts.
: "smcp", "zero": possible values set

font-kerning
: auto: browser decides whether to use font kerning.
: normal: applies kerning information stored in font.
: none: disables kerning information stored in font.

font-language-override
: normal: use glyphs appropriate for the language specified by the 'lang' attribute
: "ENG": use glyphs appropriate for English

font-optical-sizing
: auto: modifies the glyphs for optimal viewing
: none: does not modify the glyphs

font-synthesis
: bold: bold typeface may be synthesized.
: style: italic typeface may be synthesized.
: none: neither bold nor italic typeface maybe synthesized by the browser.

font-variation-settings (low-level control)
: 'wght' 850: controls font-weight
: 'wdth' 25: controls font-stretch
: 'slnt' 50: controls font-style (oblique)
: 'ital' 50: controls font-style (italic)
: 'opsz' 50: controls font-optical-sizing

font-variant(shorthand)

...font-variant-position
: sub: activates subscript alternate glyphs
: super: activates superscript alternate glyphs
: normal: deactivate such glyphs

...font-variant-alternates
: normal: deactivates alternate glyphs
: historical-forms: enables glyphs in the past
: stylistic(user-defined-ident): stylistic alternates
: styleset(user-defined-ident): specific stylistic alt
: character-variant(user-defined-ident): for char
: swash(user-defined-ident): swash glyphs
: ornaments(user-defined-ident): like fleurons
: annotation(user-defined-ident): like circled digits
: swash(ident1) annotation(ident2): combined

...font-variant-east-asian
: normal: deactivates the use of alternate glyphs for CJK (Chinese-Japanese-Korean) scripts.
: ruby: forces the use of special glyphs for ruby characters.
: simplified: use the simplified Chinese glyphs.
: proportional-width: activates East Asian characters varying in width.
: full-width: activates East Asian characters of the same width.

...font-variant-ligatures
: normal: uses usual ligatures & contextual forms
: none: disables all ligatures and contextual forms
: common-ligatures: common-lig-values
: no-common-ligatures: common-lig-value
: discretionary-ligatures: discretionary-lig-values
: no-discretionary-ligatures: discretionary-lig-values
: historical-ligatures: historical-lig-values
: no-historical-ligatures: historical-lig-values
: contextual: contextual-alt-values
: no-contextual: contextual-alt-values(in French "œ" is a ligature of "oe")

...font-variant-numeric (alternate glyphs for numbers, fractions etc.)
: normal: deactivates such glyphs
: ordinal: eg. 1st, 2nd, 3rd, 4th
: slashed-zero: renders 0 with a slash
: lining-nums: numeric-figure-values
: oldstyle-nums: numeric-figure-values
: proportional-nums: numeric-spacing-values
: tabular-nums: numeric-spacing-values
: diagonal-fractions: numeric-fraction-values
: stacked-fractions: numeric-fraction-values
: oldstyle-nums stacked-fractions: combined

...font-variant-caps
: normal:
: small-caps:
: all-small-caps:
: petite-caps:
: all-petite-caps:
: unicase:
: titling-caps: