Jak załadować samodzielnie hostowane pliki czcionek, jeśli usługa GoogleFont jest niedostępna?

Chcę użyć kolekcji czcionek z katalogu czcionek Google. Wybrałem style i dodałem znacznik CSS link do szablonu mojego projektu.Jak załadować samodzielnie hostowane pliki czcionek, jeśli usługa GoogleFont jest niedostępna?

Alternatywnie, dzięki Google Fonts możesz również pobrać kolekcję, a otrzymasz plik ZIP ze wszystkimi stylami czcionki.

Mogę utworzyć równoważnik CSS tego, który Google daje mi uwzględnić w kodzie HTML, więc chcę udostępnić samodzielnie hostowane pliki czcionek jako rezerwowe, jeśli użytkownik nie może uzyskać dostępu do interfejsu API czcionek Google.

Jak to skonfigurować i zapobiec pobieraniu zarówno pliku czcionki Google, jak i samoprzylepnego pliku czcionek? Jeśli użytkownik ma dostęp do czcionek Google, jego przeglądarka nie powinna pobierać samodzielnie hostowanej wersji czcionki.

Źródło

2012-07-16 Armando Pérez Marqués

Myślę, że możesz po prostu podążać ścieżką 'url()' ze ścieżką 'local()' w regule 'src' - przeglądarka powinna przestać szukać, kiedy znajdzie taką, którą może załadować. Jednak tego nie próbowałem. –

Zgodnie ze specyfikacją: "Gdy wymagana jest czcionka, agent użytkownika wykonuje iteracje na zestawie wymienionych referencji, używając pierwszego, z którym może zostać pomyślnie aktywowany." - http://www.w3.org/TR/css3-webfonts/#descdef-src –

To jest opinia, a nie odpowiedź: myślę, że to przemyślisz. Chciałbym po prostu podać czcionkę systemu cofania w CSS w przypadku, gdy czcionki Google nie ładują się. Po pierwsze, czy naprawdę martwisz się, że serwery Google nie działają? Po drugie, czy twoja strona nadal nadaje się do użytku bez określonej czcionki internetowej? (Prawdopodobnie powinno tak być) – chipcullen

Masz 3 opcje:

użyć 2 zestawy @font-face z zasadami, stosując różne font-family nazwy (np "Droid Sans" i "Droid Sans Local"), a następnie za pomocą stosu czcionki jak "Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif. Jednak spowoduje to pobranie obu czcionek, co wydłuży czas ładowania.
Użyj jednego zestawu at-rules @font-face, ale użyj 2 zestawów atrybutów src. To również może wydłużyć czas ładowania, jeśli przeglądarka zdecyduje się pobrać wszystkie określone pliki czcionek.
Wykonuje dublowanie w warstwie sieci za pośrednictwem DNS, tak jak robi to większość sieci CDN. To wymaga konfiguracji sieci, ale Twój CSS pozostanie niezmieniony i będzie najbardziej przejrzysty dla przeglądarki, nie wymagając żadnych dodatkowych plików do pobrania.

Google Web Fonts już stosuje trzecią opcję, więc osobiście nie zawracałbym sobie głowy, jeśli używasz już źródła CDN. Ale może się to opłacać, jeśli używasz czcionek z mniej niezawodnego źródła. Ale jeśli masz zamiar podjąć wysiłek, aby skonfigurować czcionki, może warto skonfigurować je dla wszystkich zasobów statycznych (obrazów, arkuszy stylów, JS itp.)? Najbardziej logicznym rozwiązaniem jest uzyskanie darmowego lub płatnego CDN do hostowania wszystkich zasobów statycznych.

Źródło

2012-07-16 14:52:14

To naprawdę ma sens, aby hostować wszystko na CDN, w tym czcionki. Musiałbym sprawdzić, czy zezwala na to licencja na czcionki. –

Polecam po prostu je hostingu. Jest to fontsprings' "kuloodporna" składnia font-face.

@font-face { 
font-family: 'MyFontFamily'; 
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf') format('truetype'), 
    url('myfont-webfont.svg#svgFontName') format('svg'); 
}

Posiadanie wszystkich czterech z tych zestawów zapewni ich działanie w różnych przeglądarkach. Po prostu upewnij się, że masz czcionkę we wszystkich czterech typach. Font Squirrel ma również świetne zestawy do fontface.

Źródło

2012-07-16 21:56:16

Jak załadować samodzielnie hostowane pliki czcionek, jeśli usługa GoogleFont jest niedostępna?

Odpowiedz

Powiązane problemy