Conditionally styling @font-face

Posted by Gnee on Stack Overflow See other posts from Stack Overflow or by Gnee
Published on 2010-05-19T15:48:04Z Indexed on 2010/05/19 15:50 UTC
Read the original article Hit count: 342

Filed under:

font-face

|

css3

|

css

I'm using @font-face for some headers.

The replaced typeface is different in dimension and overall character. When the switch happens, the old typeface's rules don't look so good.

Other than writing a conditional Javascript script, is there a way to have a set of CSS rules for @font-face fonts (if the browsers supports it) and CSS rules for the unreplaced default fonts?

© Stack Overflow or respective owner

Related posts about font-face

@font-face problems

as seen on Stack Overflow - Search for 'Stack Overflow'
Right now I'm trying desperately to get @font-face to work in my website. This is the code I am using right now. @font-face { font-family: romeral; src: url(fonts/romeral.otf ) format("opentype"); } And then.... h1 { font-size:2.5em; font-family:romeral; } I am using the font Romeral.… >>> More
Is there any cons to use @font-face?

as seen on Stack Overflow - Search for 'Stack Overflow'
I found @font-face is good alternative of sIFR3 but every browser need different extension of font. If any font which is freely available as a download on net or if font is purchased by client of purchased by my company. in all condition can i use those fonts? Is there any cons to use @font-face… >>> More
How to define bold, italic using @font-face

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm looking at the MDC page for the @font-face CSS rule, but I don't get one thing. I have separate files for bold, italic and bold + italic, how can I embed all three files in one @font-face rule? For example, if I have: @font-face { font-family: "DejaVu Sans"; src: url("./fonts/DejaVuSans… >>> More
Preloading @font-face fonts?

as seen on Stack Overflow - Search for 'Stack Overflow'
Is it possible to preload or otherwise cache @font-face fonts, most likely with javascript, before the page loads so you don't get that ugly jump when the page finally does load? >>> More
My @font-face is for some reason not showing up on my website. Is there something wrong with my synt

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is the css code: /*Custom*Font*Declerations*/ /*Delicious-Bold*Italic*/ @font-face { font-family: delicious-bolditalic; src: url('dc30.otf'); format("opentype"); } /*Chunkfive*/ /*(OpenType)*/ @font-face { font-family: Chunkfive; src: url('Chunkfive.otf'); format("opentype");… >>> More

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles… >>> More
CSS3 - Validator - RGBA wrong?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using the W3C CSS Validator with the Profile CSS3 but the validator says that my CSS rgba()'s are wrong. I looked up the Color Module Level 3, and the syntax is the same as mine. I also tried the Dev-Validator, same result. Example input: div.class { border: 1px solid rgba(0, 0, 0, 0.5); } Am… >>> More
CSS3 webkit fading in a tooltip.

as seen on Stack Overflow - Search for 'Stack Overflow'
HI, I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's positioned left:-999px;. So basically, what am I doing wrong/is what I was… >>> More
Poll: CSS3 color transparency

as seen on Stack Overflow - Search for 'Stack Overflow'
Many of you already know that you can express colors in your stylesheets like: color: #FFF; color: #FFFFFF; color: rgb(255,255,255); color: hsl(100%,100%,100%); and that you can use rgba() and hsla() to express color transparency. Do you think it would be a good idea to be able to express color… >>> More
Webkit CSS3 for Mozilla

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the equivalent of -webkit-transition: opacity 0.6s linear; in -moz? I tried replacing -webkit with -moz but nothing happened. I even tried extending it to -moz-transition-property/duration but with no success. >>> More