Dlaczego powinniśmy umieszczać ttf, eot, woff, svg,… w czcionce?

299

W CSS3 font-face , istnieje wiele rodzajów czcionek zawarta podobnie ttf, eot, woff, svgicff .

Dlaczego powinniśmy używać wszystkich tych typów?

Jeśli są one specjalne dla różnych przeglądarek, dlaczego ich liczba jest większa niż liczba głównych przeglądarek internetowych?

użytkownik16948
źródło

Odpowiedzi:

425

Odpowiedź w 2019 roku:

Używaj tylko WOFF2 lub, jeśli potrzebujesz starszej obsługi, WOFF. Nie używaj żadnego innego formatu

( svgi eotsą martwymi formatami ttforaz otfpełnymi czcionkami systemowymi i nie powinny być używane do celów internetowych)

Oryginalna odpowiedź z 2012 roku:

Krótko mówiąc, font-face jest bardzo stary, ale dopiero niedawno był obsługiwany przez więcej niż IE.

  • eot jest potrzebny dla Internet Explorerów starszych niż IE9 - wymyślili specyfikację, ale eot był zastrzeżonym rozwiązaniem.

  • ttfi otfsą normalnymi starymi czcionkami, więc niektórzy denerwują się, że oznacza to, że każdy może bezpłatnie pobrać drogie licencjonowane czcionki.

  • Czas mija, SVG 1.1 dodaje rozdział „Czcionki”, który wyjaśnia, jak modelować czcionkę przy użyciu wyłącznie znaczników SVG, a ludzie zaczynają z niej korzystać. Mija więcej czasu i okazuje się, że są absolutnie okropne w porównaniu do zwykłego formatu czcionki, a SVG 2 mądrze mądrze usuwa cały rozdział.

  • Następnie woffzostaje wynaleziony przez ludzi z dość dużą wiedzą na temat domen, co umożliwia hostowanie czcionek w sposób, który wyrzuca bity, które są niezwykle ważne dla instalacji systemu, ale nie mają znaczenia dla sieci (sprawiając, że ludzie martwią się piractwem) i pozwala na wewnętrzną kompresję, aby lepiej odpowiadała potrzebom sieci (dzięki czemu użytkownicy i hosty są zadowoleni). To staje się preferowanym formatem.

  • Edycja 2019 Kilka lat później woff2zostaje sporządzony i zaakceptowany, co poprawia kompresję, co prowadzi do jeszcze mniejszych plików, a także umożliwia ładowanie pojedynczej czcionki „w częściach”, dzięki czemu czcionkę obsługującą 20 skryptów można przechowywać jako „fragmenty” „na dysku zamiast, a przeglądarki mogą automatycznie ładować czcionkę„ w częściach ”w razie potrzeby, zamiast przesyłać całą czcionkę z przodu, co jeszcze bardziej poprawia skład tekstu.

Jeśli nie chcesz obsługiwać IE 8 i nowszych wersji, iOS 4 i nowszych wersji oraz Androida 4.3 lub wcześniejszego, możesz po prostu użyć WOFF (i WOFF2, bardziej skompresowanego WOFF, dla najnowszych przeglądarek, które go obsługują).

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Wsparcie dla woffmożna sprawdzić na stronie http://caniuse.com/woff
Wsparcie dla woff2można sprawdzić na stronie http://caniuse.com/woff2

Rich Bradshaw
źródło
8
iOS 5 obsługuje WOFF.
Rob
70
woff... ma tryb, który powstrzymuje ludzi przed piractwem czcionki ? Jak, u licha, może to / działa?
Mark Amery
12
TTF nie powinien być lżejszy niż WOFF. WOFF jest skompresowaną formą TrueType - czcionki OpenType (ttf i otf).
toto_tico
7
Celem WOFF nie jest walka z piractwem. TypeKit mówi: „Dwie główne zalety czcionek OpenType / CFF w porównaniu z czcionkami TrueType to 1) ich mniejszy rozmiar pliku oraz że 2) wymagają one znacznie mniej informacji podpowiedzi, aby dobrze renderować w środowiskach, które umożliwiają pewną formę wygładzania. „
Michael McGinnis
8
Narzędzia @Zelphir utrudniają tworzenie czcionek, które można osadzać przy użyciu tej flagi, a Twój projektant z biegiem czasu jest niepiśmienny i może usunąć flagę tylko wtedy, gdy ktoś zaprojektuje aplikację Mac z błyszczącym przyciskiem „pirackim”. Co więcej, jeśli są to korporacje, możesz wnosić opłaty prawne. Jeśli są facetami z blogiem, porozmawiaj z nimi, jeśli nie, ich gospodarzem itp. - ale pamiętaj, że ludzie, którzy nie mogą kupić twojej czcionki, nie są potencjalnymi klientami, więc powiedziałbym, że darmowa reklama jest warta więcej niż kłopot z przekonaniem ich do zamiany na najbliższą rzecz na dafont.
Camilo Martin
21

Woff jest skompresowaną (skompresowaną) formą czcionki TrueType - OpenType. Jest mały i może być dostarczany przez sieć jak plik graficzny. Co najważniejsze, w ten sposób czcionka jest zachowywana całkowicie, w tym renderowanie tabel reguł, o które bardzo mało osób się troszczy, ponieważ używają tylko łacińskiego skryptu.

Spójrz na [usunięty martwy URL]. Czcionka, którą widzisz, to eksperymentalny, dostarczany przez Internet smartfont (woff), który ma tysiące połączonych znaków tworzących złożone kształty. Podstawowy tekst to prosty łaciński kod romanizowanej Singhali. (Skopiuj i wklej do Notatnika i zobacz).

Tylko woff może to zrobić, ponieważ nikt nie ma tej czcionki, a jednak jest nigdzie widoczny (Mac, Win, Linux, a nawet na smartfonach przez wszystkie przeglądarki oprócz IE. IE nie ma pełnej obsługi typów otwartych).

użytkownik2422970
źródło
3
Nie widzę nic specjalnego na tej stronie. Jeśli skopiuję go do edytora (ma obsługę utf8), nadal widzę tylko normalny tekst. Co dokładnie robi woff?
Zelphir Kaltstahl
4
Dwie trzecie tej odpowiedzi jest błędne lub nieistotne. Również ten link jest zepsuty.
Yay295,
12

WOFF 2.0, oparty na algorytmie kompresji Brotli i innych udoskonaleniach w stosunku do WOFF 1.0 dających ponad 30% zmniejszenie rozmiaru pliku, jest obsługiwany w Chrome, Operze i Firefox.

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/ zawiera przykład, jak z niego korzystać.

Zasadniczo dodajesz adres URL src do pliku woff2 i określasz format woff2. Ważne jest, aby mieć to przed formatem woff: przeglądarka użyje pierwszego obsługiwanego formatu.

Jyrki Alakuijala
źródło