Jeśli mam tylko WOFF i EOT, jakie przeglądarki obsługuję za pomocą @ font-face?

Chcemy kupić czcionkę, która pozwala na jej użycie w Internecie tylko w podanych formatach: WOFF i EOT.

Nie jestem pewien, w jakich przeglądarkach one działają i nie mogę znaleźć aktualnych informacji. Jakie przeglądarki mogę obsługiwać za pomocą tylko tych dwóch?

Moje jedyne doświadczenie dotyczy składni fontspring, która ma EOT, WOFF, TTF i SVG.

fonts standards css3

— erik
źródło

Podobne pytanie w witrynie poświęconej

— user56reinstatemonica8

Odpowiedzi:

Jest to standardowy sposób ładowania za pomocą @ font-face , hacky fix i wszystko !!

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

Ale po usunięciu SVG prawie całkowicie utracisz wsparcie dla iOS <5.0

Can I Use ma doskonałą tabelę do obsługi przeglądarki, ogólnie inną dla EOT , inną dla WOFF , jeszcze inną dla SVG i wreszcie jeszcze jedną dla TTF . Umieściłem je poniżej dla jasności, a to powinno poprowadzić cię do tego, co przetestować, ale pamiętaj, że zmieni się to dość szybko.

Edytuj przez wyu : Skompilowałem tabelę, abyś mógł wyświetlać wsparcie obok siebie

Ogólne wsparcie dla przeglądarki font-face

Ogólne wsparcie dla przeglądarki font-face

Obsługa przeglądarki EOT

Obsługa przeglądarki EOT

Obsługa przeglądarki WOFF

Obsługa przeglądarki WOFF

Obsługa przeglądarki SVG

Obsługa przeglądarki SVG

Obsługa przeglądarki TTF

Obsługa przeglądarki TTF

— toomanyairmiles
źródło

dlaczego eot jest deklarowany na dwa różne sposoby - .eot i .eot? #iefix?

— sam

@sam stackoverflow.com/questions/8050640/...

— Diego Agulló

Dla każdego, kto sprawdzi tę odpowiedź w przyszłości ... Android> = 4.4 obsługuje teraz WOFF caniuse.com/#feat=woff

— ozke

Drogi @ozke, Jestem z przyszłości, dziękuję za podzielenie się tym przydatnym faktem. Być może zainteresuje Cię informacja, że do końca 2015 r. Użycie nieobsługiwanych wersji podstawowej przeglądarki Androida woffspadnie do mniej niż 2% globalnych użytkowników, a podstawowa przeglądarka Androida zostanie zaćmiona przez Chrome dla Android (16%) i UC (8%), oba obsługiwane woff. Firefox także na Androida; jednak jego użycie nigdy nie przekroczy 1%. Możesz teraz powrócić do słuchania

— utworu

więc potrzebujesz teraz tylko czcionek internetowych?

— SuperUberDuper

SVG nie zabierze Cię nigdzie z @ font-face; ale EOT jest obsługiwany przez IE; gdzie as, TTF i OTF są obsługiwane przez wszystkie inne główne przeglądarki. Jeśli chodzi o WOFF, od czytania, z jego podobieństwem do TTF i OTF, jest całkiem prawdopodobne, że jest obsługiwany w tych samych przeglądarkach co TTF lub OTF. Moja sugestia, jeśli jesteś naprawdę zainteresowany, wypróbuj każde rozszerzenie @ font-face w przeglądarce i zobacz, co otrzymujesz, a następnie prześlij to, co masz, do W3C, aby zaktualizowali stronę standardów dla deskryptora @ font-face. (Obecnie nie obejmuje nawet „bezpiecznych” rozszerzeń czcionek).

Jeśli wszystko inne zawiedzie, jestem pewien, że W3Schools jest aktualne: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

— Jeff Langemeier
źródło

Problem polega na tym, że Safari Mobile 4.1 i nowsze wersje obsługują tylko SVG.

— toomanyairmiles,

@toomanyairmiles Dlatego ostatecznie sprawi, że będzie wyglądał dobrze dla twojego „domyślnego”, a następnie sprawi, że będzie wyglądał niesamowicie dla tych, którzy „mogą” go zobaczyć. Nie może mieć 100% pokrycia, ponieważ większość czcionek nie ma OTF, EOT ani SVG.

— Jeff Langemeier,

Właściwie możesz. Zbudowałem kilka witryn, które mają 100% zasięgu, kupując czcionki we wszystkich czterech typach lub korzystając z darmowych czcionek i samodzielnie generując pliki - działa idealnie.

— toomanyairmiles

@toomanyairmiles To miejsce, w którym zabija mnie szybkie i luźne pisanie. Nie zawsze ma 100% zasięgu, czasem tak się nie dzieje, a projektant musi pamiętać, że w najgorszym przypadku ludzie używają starych przeglądarek i tak dalej, 100 % zasięgu nie zawsze oznacza 100% zasięgu; gdzie mam około 40-50% użytkowników Internetu nadal używa IE 7 lub starszych, które w pierwszej kolejności nie obsługują czcionek, aby mieć prawdziwie 100% pokrycie, musi być dolna linia, która wygląda „przyzwoicie” lub przynajmniej utrzymuje twoją witrynę w granicach czcionek „bardziej wyszukanych”.

— Jeff Langemeier

Cóż, wypróbowałem to na małych stronach i stronach głównych marek. Czcionki działają w IE6 i 7. Czy jakość renderowania jest tak dobra jak nowoczesnej przeglądarki? Nie, ale działa dobrze.

— toomanyairmiles

Dostawcy Webfont naprawdę muszą zapewnić eot wsparcie dla swoich czcionek - szczególnie z tego powodu! Można by pomyśleć, że byłaby to druga natura, nawet w przypadku chmury (z opcją włączenia lub wyłączenia) - jeśli ludzie są zmuszeni do wyłapywania czcionek z czarnej listy, czy nie zachęciłoby to piractwa tylko po ich znalezieniu? @ eb_p1

— eburnett
źródło

Zaraz, dlaczego? EOT nie żył, kiedy pytanie zostało zadane po raz pierwszy, było to gnijące zwłoki, kiedy odpowiedziałeś, a dziś nie widziałem czcionki EOT od ponad roku.

— SilverbackNet