2012-04-02 3 views
4

Derzeit verwende ich @font-face mit einem Rückfall für nicht unterstützte Browser:Überschreiben font-weight in @ font-face

@font-face 
{ 
    font-family: TheSansBlack; 
    src: local(TheSansBlack), url(../fonts/TheSans_TT9_.woff) format('woff'); 
} 

font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif; 

In einigen Fällen kann der Rückfall fett sein sollte, so habe ich einige CSS-Notationen wie:

#foo 
{ 
    font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif; 
    font-weight: bold; 
} 

Und weil ich eine Schriftart namens TheSansBlack gibt es keine Notwendigkeit font-weight: bold

zu setzen Aber das wird nicht funktionieren:

@font-face 
{ 
    font-family: TheSansBlack; 
    font-weight: normal; 
    src: local(TheSansBlack), url(../fonts/TheSans_TT9_.woff) format('woff'); 
} 

Es zeigt immer noch die kühn, die hässlich aussieht, weil es mit TheSansBlack Doppel fett ist ... Ich brauche nur auf dem Ausweich font-weight zu fett setzen, nicht die woff Schriftart.

EDIT: Ich habe versucht, auch dies ohne Erfolg:

@font-face 
{ 
    font-family: TheSansBlack; 
    src: local(TheSansBlack), url(../fonts/TheSans_TT9_.woff) format('woff'); 

    #foo 
    { 
    font-weight: normal !important; 
    } 
} 

#foo 
{ 
    font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif; 
    font-weight: bold; 
} 
+0

hallo können sie den html-code und jsfiddle link? –

+0

@azad, wie man das mit einer nicht-freien Schriftart tut? ;-) ist es dann nicht sinnlos? – dtrunk

Antwort

1

Verstanden :-)

I font-weight ausdrücklich zu fett in @ font-face zu setzen hatte.

Keine Ahnung, warum ...

EDIT: vollständiges Beispiel

@font-face 
{ 
    src: local(TheSansBlack), url(../fonts/TheSans_TT9_.woff) format('woff'); 
    font-family: TheSansBlack; 
    font-weight: bold; 
} 

#foo 
{ 
    font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif; 
    font-weight: bold; 
} 

Dies führt zu normalen TheSansBlack und Fett Arial/Verdana/Helvetica in älteren Browsern.

+0

Der Grund dafür ist, dass das font-weight in font-face Ihrem Browser mitteilt, dass die Schriftart * die fettgedruckte Variante ist. –