Problem with the font property

Asked

Viewed 69 times

2

I’m using several properties in one. For example, instead of me using font-family, font-size, I’m only using font, as below:

.topoMenu li{
    font: 20px 'Ubuntu', sans-serif, #000, 300;
}

The last is the font-weigth, only when I inform it, gives problem, does not format the source properly, if I take it works well.

Problem with the syntax?

css
  • 1

    I’m honest, only if I was a great css expert would I do what you’re doing. In addition to becoming more confusing, it is better to do a small study/tests and see how to study syntax correctly, which should be your problem.

  • I found this link, take a look: http://css-tricks.com/almanac/properties/f/font/

  • What source are you using? Is it one that systems don’t usually have locally?

2 answers

7


According to MDN

The order of the values is not completely free: font-style, font-Variant and font-Weight must 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 (inherit value does not work).

You need to define font-style, font-variant and font-weight before the font-size. Font-family is mandatory and must be the last value.

Cannot specify color in font shorthand.

Syntax:

Formal syntax: [ [ <ķ font-style'> || || <ĩ font-Weight'> || <ĩ font-stretch'> ]? <áti font-size'> [ / <áti line-height'> ]? <áti font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

Utilize color. The following section should work.

.topoMenu li{
    font: 300 20px 'Ubuntu', sans-serif;
    color: #000;
}

Cheat sheet

  • This type of training runs well in IE versions?

  • yes. no problem. https://developer.mozilla.org/en-US/docs/Web/CSS/font#Browser_compatibility

5

There is an order to be followed: font-style, font-Variant, font-Weight, font-size, line-height, and font-family., for property font is nothing more than a shortcut to set these properties in a single property, and how you can repair the color property does not exist in font also.

.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)

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.