Dlaczego powinniśmy umieścić ttf, eot, WOFF, svg, ... w FONT-face

W CSS3 font-face, istnieje wiele typów czcionek, takich jak ttf, eot, woff, svg i cff.

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?

Author: Trix, 2012-06-12
Source

3 answers

W skrócie, font-face jest bardzo stary, ale dopiero niedawno został obsługiwany przez więcej niż IE.

  • eot jest potrzebny dla Internet Explorerów, które są starsze niż IE9-wymyślili spec, ale eot jest okropnym formatem, który usuwa wiele funkcji czcionek.

  • ttf i otf są zwykłymi, starymi czcionkami, ale niektórzy ludzie byli zirytowani, że oznacza to, że każdy może je pobrać i używać.

  • Mniej więcej w tym samym czasie iOS na iPhonie i iPadzie zaimplementowane czcionki svg.

  • Następnie wynaleziono woff, który ma tryb, który powstrzymuje ludzi przed piractwem czcionki. Jest to preferowany format.

Jeśli nie chcesz obsługiwać IE 8 i niższe, iOS 4 i niższe, i android 4.3 lub wcześniejsze, możesz po prostu użyć WOFF (i woff2, bardziej skompresowany 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 woff można sprawdzić na http://caniuse.com/woff
Wsparcie dla woff2 można sprawdzić na http://caniuse.com/woff2

 337
Author: Rich Bradshaw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-30 00:02:51

WOFF jest skompresowaną (spakowaną) 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 całkowicie zachowana, włączając w to renderowanie tabel reguł, na których bardzo mało osób się troszczy, ponieważ używają tylko alfabetu łacińskiego.

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

Tylko woff może to zrobić, ponieważ nikt nie ma tej czcionki, a mimo to jest ona wszędzie widoczna (Mac, Win, Linux, a nawet na smartfonach przez wszystkie przeglądarki z wyjątkiem IE. IE nie posiada pełnego wsparcia dla typów otwartych).

 21
Author: user2422970,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-30 06:57:11

WOFF 2.0, oparty na algorytmie kompresji Brotli i innych ulepszeniach w stosunku do WOFF 1.0 dających ponad 30% zmniejszenie rozmiaru pliku, jest obsługiwany w Chrome, Opera 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 / mA przykład, jak go używać.

Zasadniczo dodajesz URL src do pliku woff2 i określasz format woff2. On ważne, aby mieć to przed formatem woff: przeglądarka użyje pierwszego formatu, który obsługuje.

 8
Author: Jyrki Alakuijala,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-30 13:20:30