I see this particular font css applied to
font: 400 50px/60px "minion-pro",times,serif;
an element. I want to understand what is 400 whats meaning of 50px/60px and which of the three fonts "minion",times or serif gets applied.
I see this particular font css applied to
font: 400 50px/60px "minion-pro",times,serif;
an element. I want to understand what is 400 whats meaning of 50px/60px and which of the three fonts "minion",times or serif gets applied.
you can write like this:
div{
font-weight:400;
font-size:50px;
line-height:60px;
font-family:"minion-pro",times,serif;
}
In the font-family they are fall back
fonts . fallBack fonts means if "minion-pro"
is not in user computer then it's pick times
instead of "minion-pro"
& if there times
is not in the user computer then it's pick serif
font-family.
It can be rewritten like this:
font-weight: 400;
font-size: 50px;
line-height: 60px;
font-family: "minion-pro",times,serif;
So 400
is the weight of the font, 50px/60px
means 50px
font size, with 60px
line-height. The first available font will be applied which exists on the computer which is displaying the webpage.
This is the shorthand font
property.
font: style variant weight size / height family1, family2,...;
is short for
font-style : style;
font-variant: variant;
font-weight: weight;
font-size: size;
line-height: height;
font-family: family1, family2,...;
The font-family
property takes a prioritized list:
The property value is a prioritized list of font family names and/or generic family names
The browser will use the first font-family that's available. There are some generic names like sans-serif
, serif
and monospace
.
EDIT: Also note that font-weight:400
is the same as font-weight: normal
.
See also:
I can answer for the font, they'll be used by order of availability (some browser might not render them or know them) so 1st minion then times then serif. For the 400 I don't know at the moment