I'm using multiple properties in one.
For example, instead of using font-family , font-size , I'm only using font , as below:
.topoMenu li{
font: 20px 'Ubuntu', sans-serif, #000, 300;
}
The last one is font-weigth , but when I inform it, it gives a problem, it does not format the font correctly, if I do it works fine.
Is it a problem with the syntax?
According to MDN
The order of the values is not completely free: font-style, font-variant and font-weight should be defined, if any, before the font-size value. The line-height value must be defined immediately after the font-size, preceded by a mandatory. Finally the font-family is mandatory and must be the last value defined.
You need to set font-style , font-variant and font-weight before font-size . Font-family is mandatory and should be the last value.
Can not define color in font shorthand.
Syntax:
Formal syntax: [[ > || || > || < 'font-stretch' > ]? > [/ < line-height > ]? > ] | caption | icon | menu | message-box | small-caption | status-bar
Use color . The following snippet should work.
.topoMenu li{
font: 300 20px 'Ubuntu', sans-serif;
color: #000;
}
There is an order to be followed: font-style, font-variant, font-weight, font-size, line-height, and font-family. more is a shortcut to setting these properties on a property alone, and how you can repair the color property does not exist in font as well.
.topoMenu li{
font: 300 20px 'Ubuntu', sans-serif;
}<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<ul class="topoMenu">
<li>Item</li>
</ul>Read more here (W3C)