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