Czcionki internetowe i zastępcze czcionki

Question

Podczas korzystania z web fonts przy użyciu @font-face zastanawiałem się, jaka jest zalecana metoda korzystania z czcionek zastępczych?

Jak, na przykład, gdybym był przy użyciu czcionki WWW, który był śmiały, takich jak:

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url('../fonts/OpenSans-Bold-webfont.eot'); 
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), 
     url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), 
     url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

teraz kiedy wywołasz ten to oczywiście po prostu to zrobić:

font-family: OpenSansBold; 

Jednak byłem zastanawiasz się nad zapewnieniem zastępczych czcionek, na przykład gdy pobieranie czcionki kończy się niepowodzeniem z jakiegokolwiek powodu.

Oczywiście to dość łatwe do czynienia z normalną czcionką pogrubioną czcionką w stylu (non/non-kursywa), jak poniżej ..

font-family: OpenSansRegular, Arial; 

Jednak zastanawiam się, co jest co, gdy czcionka jest pogrubienie lub italski.

Czy zalecono coś podobnego i nie wpłynie to na czcionkę internetową?

font-family: OpenSansBold, Arial; 
font-weight: bold; 

prostu zastanawiasz się, bo jeśli nie określił pogrubiony wtedy, jeśli czcionka internetowej zawiodła, dostaną Arial, ale to nie będzie pogrubiony.

Answer 1

Prawdopodobnie używasz plików czcionek i pliku CSS generowanego przez FontSquirr el. Problem z ich podejściem polega na tym, że każda określona czcionka (na przykład Open Sans Regular i Open Sans Bold) jest reprezentowana jako osobna rodzina czcionek, z wagą czcionki ustawioną na normalną.Oznacza to, że zamiast znaczników takich jak <p>foo <strong>bar</strong> i prostych stylów CSS, takich jak p { font-family: Open Sans, Arial } (domyślne ustawienie domyślnej wersji przeglądarki strong i wybranie odpowiedniej czcionki z rodziny Open Sans), konieczne będzie wyraźne ustawienie czcionek. Oznacza to ustawienie zarówno rodziny czcionek, jak i czcionki, domyślnie z wartością właściwości font-family.

Będziesz musiał dostroić CSS, aby uzyskać lepsze podejście. Można by użyć tej samej rodziny czcionek, ale różne ciężary w regule @font-family, a w regule font-family, należy ustawić tylko rodzinie:

@font-face { 
    font-family: 'open_sans'; 
    src: url('opensans-bold-webfont.eot'); 
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-bold-webfont.woff') format('woff'), 
     url('opensans-bold-webfont.ttf') format('truetype'), 
     url('opensans-bold-webfont.svg#OpenSans') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'open_sans'; 
    src: url('opensans-regular-webfont.eot'); 
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-regular-webfont.woff') format('woff'), 
     url('opensans-regular-webfont.ttf') format('truetype'), 
     url('opensans-regular-webfont.svg#OpenSans') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
* { font-family: open_sans, Arial; } 

I wtedy po prostu użyć font-weight: bold (lub znaczników HTML, który ma taki domyślnie efekt, na przykład strong, b, th, h1 do h6) dla tych elementów, które powinny pojawić się w Open Sans Bold.

Sposób, w jaki opisujesz, wydaje się działać również w większości przeglądarek, ale nie liczę na to. Po zadeklarowaniu czcionki jako normalnej wagi w ustawieniu @font-face, ustawienie font-weight: bold na tekście czcionki może spowodować a) niepowodzenie, ponieważ ciężary się nie zgadzają lub b) czcionka przyjęta jako punkt początkowy dla algorytmicznego pogrubienia, wynikowego w podwójnym pogrubieniu. A jeśli się nie mylę, b) to, co dzieje się w Safari (Win 7).

Answer 2

pan słusznie podkreślono problem z „new age” czcionek internetowych, w tym blogu omawia je i prezentuje obejście http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/

Istotne fragment

Problem numer dwa jest znacznie większy niż pierwszy. Rozważmy FF Enzo, który nie ma wagi 400 (lub nawet 500). W niektórych okolicznościach jego lekka (300) waga może być nieco zbyt cienka dla małego typu ciała, więc zamiast tego użyjmy wagi 600. Ach, to wygląda dobrze.

Ale to nie w porządku! Ponieważ jeśli nie można wyświetlić tej czcionki, a my cofamy się do czegoś innego, ta czcionka zastępcza będzie renderować na poziomie 600; innymi słowy: pogrubiony.

Sposób obejścia?

Istnieje sposób obejścia tego i jest to metoda użycia FontsLive w CSS generowanym przez ich użytkowników: deklarujesz każdą wagę indywidualnie, a nie całą rodzinę. Ich kod wygląda trochę tak:

kod CSS:

{ font-family: 'FamilyName Light', 'FallbackFamily', serif; font-weight: normal; } 
{ font-family: 'FamilyName Medium', 'FallbackFamily', serif; font-weight: normal; } 
{ font-family: 'FamilyName Bold', 'FallbackFamily', serif; font-weight: bold; } 
{ font-family: 'FamilyName Black', 'FallbackFamily', serif; font-weight: bold; } 

Aktualizacja:

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url('../fonts/OpenSans-Bold-webfont.eot'); 
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), 
     url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), 
     url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

I wtedy coś takiego (jak sugerowane):

{ font-family: OpenSansBold, 'Arial'; font-weight: bold; }