Menu
I have this very simple markup
<h1>
<a href="#">
My Title
</a>
</h1>
and this CSS
h1 {
font-variant: small-caps;
}
Here it is rendered on a jsfiddle.
The issue comes from using Twitter Bootstrap. The text renders like it has no font-variant defined.
I'm sure that Bootstrap is the cause, since when you remove it, the text renders as expected. Any ideas or workaround for this?
I'm trying it on Chrome 26.0.1410.64
203
Using OpenTypeIf you use the value 'c2sc' (caps to small caps) instead of 'smcp' , capital letters will be rendered using small caps. This can be useful for uppercase initialisms, like WWW, when you wish to show them in small caps if possible.
The font-variant-caps property controls the usage of alternate glyphs for capital letters. Show demo ❯ Default value: normal.
Enables display of small capitals (OpenType feature: smcp ). Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters. Enables display of small capitals for both upper and lowercase letters (OpenType features: c2sc , smcp ).
See this thread.
As strange as it is, the issue is actually Chrome, and the fact that you are putting the font-variant: small-caps; on a tag which resides inside an H# tag.
Apparently, Chrome is unable to honor small-caps on H# tags and their descendants at this time. Please take a look at this update to your fiddle to see what I mean.
You might have better luck altering your HTML to simply style a <span>, <p>, or <div> element to look like an <h1> element in this case - because Chrome will then honor your small-caps style.
Update:
Seeing the others' posts - I've noticed that the text-rendering: auto actually forces Chrome back into proper rendering. This update to the jsFiddle demonstrates this fix. Credit for the workaround to Martin.
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
