Czy istnieje wyzwalacz, którego mogę użyć, jeśli w CSS użyto czcionki zastępczej?

Question

Używam this service do tworzenia reguł @font-face w moim CSS. To, co zrobiłem, to dwie reguły: jedna dla normalnej czcionki i druga dla wersji z grubą wagą. Tak:

@font-face 
{ 
    font-family: 'CenturyGothicRegular'; 
    src: url('/static/fonts/gothic_2-webfont.eot'); 
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'), 
      url('/static/fonts/gothic_2-webfont.woff') format('woff'), 
      url('/static/fonts/gothic_2-webfont.ttf') format('truetype'), 
      url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
... and another for 'CenturyGothicBold' 

Mam następnie dokonał ogólnej czcionkę domyślną stron Powrót do Verdana tak:

body 
{ 
    font-family: "CenturyGothicRegular", Verdana; 
    font-size: 14px; 
} 

i zrobił trochę regułę dla <strong> tak, że zamiast dokonywania prawidłowej masy wersja pogrubienie (który tylko wydaje się go rozciągnąć), śmiały wersja wagi zostaną wykorzystane:

strong 
{ 
    font-weight: normal; 
    font-family: 'CenturyGothicBold'; 
} 

problem mogę przewidzieć, tutaj jest to, że jeśli czcionka jest domyślnie Verdana, pogrubienie nie będzie b e obecny.

Czy istnieje sposób, w jaki mogę określić nowy zestaw reguł dla <strong>, które mają zastosowanie tylko wtedy, gdy czcionka ma domyślną wartość Verdana?

Answer 1

Nie trzeba szukać wyzwalacza, aby sprawdzić, czy użyto czcionki powrotnej.

Należy ustawić font-weight w regule @font-face, używając tej samej nazwy rodziny. Więc można teraz nazwać CenturyGothic:

@font-face { 
    font-family: 'CenturyGothic'; /* this used to be CenturyGothicRegular */ 
    src: url('/static/fonts/gothic_2-webfont.eot'); 
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/static/fonts/gothic_2-webfont.woff') format('woff'), 
     url('/static/fonts/gothic_2-webfont.ttf') format('truetype'), 
     url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'CenturyGothic'; /* this used to be CenturyGothicBold but the urls still need to point to the files they were pointing at */ 
    src: url('/static/fonts/gothic_2-webfont.eot'); 
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/static/fonts/gothic_2-webfont.woff') format('woff'), 
     url('/static/fonts/gothic_2-webfont.ttf') format('truetype'), 
     url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg'); 
    font-weight: bold; 
} 

body{ 
    font-family: "CenturyGothic", Verdana; 
    font-size: 14px; 
} 

strong{ 
    font-weight: bold; 
} 

To będzie łączyć dwa fonty w jednym font-family pozwalając mu działać jak każdy inny font-family czyli kiedy robisz to bold wyświetli odważną wersję czcionki itp .

Answer 2

Korzystanie font-weight tylko z tego samego font-family nie będzie działać, gdy masz kilka weight, jak światło, ultralekkich, skondensowanej pogrubienie, demi bold itp