Syntax
body {
font: font-style font-variant font-weight font-size/line-height font-family;
}
In Use
body {
font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}
You need to supply at least font-size and font-family for the shorthand to work, otherwise it’ll just be a syntax error and do nothing.
body {
font: italic 20px Serif; /* works */
font: 20px; /* fails */
font: 18em Fantasy; /* works */
font: bold small-caps; /* fails */
}
Watch out for accidental resets when using the shorthand.
Ah, so that’s why I wasn’t able to specify the size of fonts using font:! I’ve always just had to use font-size:.
Thanks!
Why are they arranged this way?
What is the reason behind this?
Is there a specific feature or condition?
In addition to the URL linked in the post, I have a cheat sheet for helping understand font shorthand:
http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/
Sorry, Louis. I cannot understand you’re cheat sheet.
Why on earth would you have Arial before Helvetica
So when we do a CSS reset, is the any reason to not use the font shorthand to initialize html, for example?
eg. html {font:100%/125% Verdana,Arial,sans-serif}
…or even nicer maybe:
html { font: 100%/1.25 Verdana, Arial, sans-serif }
I think you’re missing
font-stretch
in your shorthand declaration example.see here: https://developer.mozilla.org/en-US/docs/Web/CSS/font
the shorthand defaults to 4
normal
s up front like this:font: normal normal normal normal 13px/19px sans-serif;
longhand would be:
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
font-size: 13px;
line-height: 19px;
font-family: sans-serif;
That defeats he purpose of using the SHORTHAND. Since you are setting those values to ‘normal’ anyway, why not just use font: 13px/19px sans-serif; ? Who uses px’s for line-height?
The CSS property font-stretch was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.
Browser compatibility
Desktop Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 48.0 9.0 (9.0) 9.0 35.0 No support
Can you help me with changing the font when use the shortcode list? When I use this shortcode as this link [removed] the font is changed from helvetica to another font.