EN
Il contenuto non è disponibile nella lingua di destinazione, ma solo in inglese.

font-family property

Specifies the name of the font used for text in the object.

CSS 2.1, Section 5.2.2

Syntax

font-family: [ [ <family-name> | <generic-family> ] [ , | <family-name> | <generic-family> ]* ]

Property values

family-name

Any of the available font families supported by the browser. For example, Times, Helvetica, Zapf-Chancery, Western, or Courier.

generic-family

Any of the following font families: serif, sans-serif, cursive, fantasy, or monospace.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial ValueDepends on user agent

Standards information

Remarks

The value is a prioritized list of font family names and generic family names. List items are separated by commas to minimize confusion between multiple-word font family names. If the font family name contains white space, it should appear in single or double quotation marks; generic font family names are values and cannot appear in quotation marks.

Because you do not know which fonts users have installed, you should provide a list of alternatives with a generic font family at the end of the list. This list can include embedded fonts. For more information about embedding fonts, see the @font-face rule.

Examples

This example displays text using fonts from different font families. Each line of text uses font-family to display text in a font from a different font family.


body {
  font-family: Garamond, 'Times New Roman', Georgia, serif;
}
.sans-serif {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
.monospace {
  font-family: Courier, Monaco, monospace;
}
.cursive {
  font-family: 'Comic Sans MS', cursive;
}
.fantasy {
  font-family: 'Copperplate Gothic', Impact, fantasy;
}


<body>
  <p>Lorem ipsum dolor sit amet... (<em>font-family: Garamond, 'Times New Roman', Georgia, serif</em>)</p>
  <p class="sans-serif">Lorem ipsum dolor sit amet... (<em>font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif</em>)</p>
  <p class="monospace">Lorem ipsum dolor sit amet... (<em>font-family: Courier, Monaco, monospace</em>)</p>
  <p class="cursive">Lorem ipsum dolor sit amet... (<em>font-family: 'Comic Sans MS', cursive</em>)</p>
  <p class="fantasy">Lorem ipsum dolor sit amet... (<em>font-family: 'Copperplate Gothic', Impact, fantasy</em>)</p>
</body>

The following image shows the result. The first line of text shows the default body element font family, which uses a serif font. The second line of text shows sans serif font-family setting. The third line of text shows a monospace font-family setting. The fourth line of text shows a cursive font-family setting. The final line of text shows a fantasy font-family setting:

An image showing text with different font-family settings.

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
font

 

 

Mostra:
© 2014 Microsoft