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/
