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
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.)
font-family
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.
source to share
{
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.
source to share
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.
source to share
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.
source to share
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.
source to share