码农教程 - 一技在手,衣食无忧! tools

目录

Style fontFamily Property

❮ Previous ❮ Style Object Reference Next ❯

Example

Set the font for an element:

document.getElementById("demo").style.fontFamily = "Impact,Charcoal,sans-serif";
Try it Yourself »

Description

The fontFamily property sets or returns a list of font-family names and/or generic-family names for text in an element.

The browser will use the first value it recognizes.

There are two types of font-family values:

  • font-family: The name of a font-family, like "verdana" or "arial"
  • generic-family: The name of a generic font-family, like "serif" or "sans-serif"

Tip: Always specify a generic-family name as the last alternative!

Note: Separate each value with a comma.

Note: If a font-family name contains whitespace, it must be quoted.

Tip: Look at Web safe fonts for commonly used font combinations.

Browser Support

Property
fontFamily Yes Yes Yes Yes Yes

Syntax

Return the fontFamily property:

object.style.fontFamily

Set the fontFamily property:

object.style.fontFamily = "font1, font2, etc.|initial|inherit"

Property Values

Value Description
font1, font2, etc. A comma-separated list of font-family names and/or generic-family names
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: not specified
Return Value: A String, representing the font name of the text in the element
CSS Version CSS1

More Examples

Example

A demonstration of possible values:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("demo").style.fontFamily = listValue;
Try it Yourself »

Example

Return the font of an element:

alert(document.getElementById("demo").style.fontFamily);
Try it Yourself »

Related Pages

CSS tutorial: CSS Font

CSS reference: font-family property

HTML DOM reference: font property


❮ Previous ❮ Style Object Reference Next ❯