What is the meaning of a font family?

I am new to HTML and CSS. I am confused about the property font-family


I declare font-family

as follows:

    font-family:cambria, sans-serif, georgia;


But when I remove the part sans-serif, georgia

, the appearance remains the same.

Why declare font-family

and how is it different from font



source to share

8 answers

Announcement font

is shorthandAllowing us to style font-size

, font-weight

, font-family

, font-variant

and line-height

. all in one. (In the same way as background

it is the abbreviation for background-color

, background-url

, background-image

and several other properties related to the background.)


itself allows us to specify the initial font and common fonts to be used if the original font cannot be used. In your case cambria

, this is the initial font, sans-serif

this is the fallback style used if the user's system does not have a font cambria

, but georgia

used if the font sans-serif

does not exist on the user's system.



font-family:cambria, sans-serif, georgia;


means: if your browser does not support cambria

use sans-serif

, if it does not support sans-serif

use georgia

, and if not georgia

, it will display the default font

Font: 12px bold cambria, sans-serif;


means: font-size / font-weight / font-family



You specify the fonts in the order you wish. The page will try to load cambria, but if the user doesn't have cambria, he will try ANY sans-serif font, and finally he will try to use georgia.

Imagine if you are using a very specific font that all users may not have, you would like to back up so that the system default font is not displayed if the user does not have your first desired font.



His priority list; try using the first font, if not available, try the second, etc.

font {}

includes font-family

that its a way to set multiple values font-*

in one pass, see here .



When using a font family, you are specifying the type of font that you intend to use. On the other hand, by using only the "font" attribute, you can declare various attributes for font styles.

Font-Family: cambria, sans-serif, georgia;


Doing this tells the browser that you prefer to use the "cambria" font if that font does not exist in that browser, although you would like to use "sans-serif", etc.

Font: 12px bold cambria, sans-serif;


This allows you to put multiple values ​​in one place.



The font family is a list, if the first font you specified cannot be displayed, the second font will be loaded, and if the second font cannot be loaded, the third will be displayed.



A font family is a CSS property that accepts a font name precedence list that defines the font for an element. It can take on comma-separated values ​​to indicate that they are alternatives if the first font in the list is not available in the browser.

font-family: cambria, sans-serif, georgia;


This means that if the "cambria" font is not available in the browser, it will select "sans-serif" and so on.



The property font-family

specifies a list of font families to check, in order of preference. It does not affect other font-related properties, except that the selection affects the value normal

for line-height

(font and browser dependent).

In contrast, the stent property font

always sets all font-related properties, although you must explicitly specify the font size and font family, for example. font: 1em Cambria

; other properties will then be set to their initial values.

The meaning is font-family

used so that the first font family in the list is used for each character in the element's content if a) the font family is available on the users' system, and b) the applicable font in that family contains the glyph for the character. (This is a specific mechanism, but browsers are known to partially implement it.)

In the example case, if the user system has Cambria and it contains glyphs for all the characters of the matched elements, the other values ​​in the value have font-family

no effect. If Cumbria has a character that appears in the font used by the browser as a common font sans-serif

, then the latter is used, possibly creating a stylistic inconsistency. (Generally, serif fonts like Cambria should have serif backups.) The georgia

part will only matter in the very unlikely case that the system has Georgia but lacks Cambria and the default font sans-serif

doesn't contain any character in content but Georgia does.

Whether you use font-family

(and other specific font properties) or shorthand font

or both is a matter of judgment and taste. Obviously, it's much easier to set all font properties separately. In terms of code length, it font

can save you a few bytes.



All Articles