2014-03-27 18:34, Tom Livingston wrote:

I was doing this simple test with google fonts (via @import method).

body{
     font-family: $roboto;
}

.bold{
     font-weight: 500;
}

I suppose you are using some special tools that convert that $roboto to a real name. But how do you refer to the font? If you use Roboto as hosted by Google and you use normal weight and 500 weight, you need, as Google instructions say,

<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet'>

<p>Hi there <span class="bold">bolded text</span></p>
<p><strong>I'm bold</strong></p>

The <strong> element causes font-weight: bold, i.e. font-weight: 700, by default. So you should either change that setting or include 700 into the href attribute.

The strong tag above was rendering wrong in FF and Chrome. FF was
'double-bolding' the text, and Chrome showed odd char spacing.

When settings ask for bold and the font in use has no bold typeface (loaded), browsers may apply algorithmic (synthetic) bolding. The results vary by browser and are generally typographically poorer than real bold typeface.

Am I implementing something wrong, or do I need to write rules like
strong{font-weight:500;font-style:normal;} to have this work right?

If you want <strong> to appear in weight 500, then you need

strong { font-weight:500; }

There is no reason to set font-style on it, since font-style: normal is the default. (Theoretically, some browser could have a different default. Then there's probably some very good reason to that, and authors should not interfere.)

Yucca



______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to