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ż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)
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
woff... ma tryb, który powstrzymuje ludzi przed piractwem czcionki ? Jak, u licha, może to / działa?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).
źródło
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.
źródło