Какие файлы шрифтов мне нужны для современных браузеров, Android и IOS?

У меня есть эти файлы шрифтов:

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff2') format('woff2'),
    url('@{fa-font-path}/fontawesome-webfont.woff') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf') format('truetype'),
    url('@{fa-font-path}/fontawesome-webfont.svg fontawesomeregular') format('svg');
//  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

Только они отвечают моим потребностям:

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot');
  src: url('@{fa-font-path}/fontawesome-webfont.woff2') format('woff2'),
    url('@{fa-font-path}/fontawesome-webfont.woff') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Будет ли только woff и woff2 удовлетворять мои потребности?

ОТВЕТЫ

Ответ 1

Вы просто нужно WOFF. И вот почему:

  • eot устарел, но на самом деле устарел, теперь Microsoft поддерживает только "последнюю версию IE для поддерживаемых версий Windows" , поэтому это означает IE11, а также Edge. Оба hese поддерживают WOFF просто отлично. И обратите внимание, что все, что старше Windows 7, уже не поддерживается (Windows Vista SP2 по-прежнему поддерживалась корпоративными корпоративными лицензиями во время этого ответа, но с тех пор также достигла конца жизни).
  • svg был оставлен несколько лет назад. Это была интересная идея, но на практике она оказалась плохой, потому что она была смехотворно огромна по сравнению с реальными шрифтами и не имела особенностей, которые имеют решающее значение для достойной типографии. Практически все браузеры, которые поддерживали его в какой-то момент в прошлом, с тех пор снова удалили эту поддержку (что было плохой). Только два браузера, которые по-прежнему поддерживают шрифты svg, также поддерживают WOFF, поэтому нет причин для обслуживания обоих.
  • ttf и otf являются шрифты OpenType (оба они отличаются расширением по историческим причинам, повторное создание шрифтов, различия между ними существенно неактуальны), которые предназначены для универсального использования системы. Как установка на компьютер или отправка на современный принтер для создания физического документа. Как таковой. у них много бит и бит, которые им нужно поддерживать (спецификация довольно большая), многие из которых на самом деле не так уж важны, если вы просто показываете веб-страницу на экране. WOFF позволяет уйти с некоторыми упрощениями в шрифте OpenType, и каждый браузер, поддерживающий общий Opentype, также поддерживает WOFF. Так снова: просто используйте WOFF.

Следует понимать, что WOFF представляет собой байтовую байтовую оболочку вокруг шрифтов OpenType, но с (необязательным) сжатием без потерь, чтобы шрифт был меньше, что ускоряло передачу с сервера клиенту и указывало что шрифт предназначен только для использования в Интернете, а это означает, что некоторые требования, которые шрифт абсолютно необходимо встретить, чтобы считать законным шрифтом в универсальной системе типов, смягчены, поэтому можно сэкономить некоторые данные.

Я знаю, что Font Squirrel и другие сайты все еще генерируют "имеют каждый формат, который когда-либо существовал!" вроде шрифтов CSS, но это 2017, и нам просто больше не нужны эти огромные наборы. Несмотря на то, что три года назад эти комплекты были наилучшей практикой (используя подход "пуленепробиваемый" к CSS в ландшафте браузера, который был сильно фрагментирован, когда дело касалось веб-сайтов), сегодня эти пакеты совершенно не нужны. Все поддерживает WOFF.

"Как насчет WOFF2?"

WOFF2 является пересмотром WOFF с новым алгоритмом шифрования с более высоким без потерь для вида двоичных данных, которые вы найдете в Интернете (WOFF2 использует brotli, а не WOFF "deflate" ), поэтому, если браузеры, на которые вы нацеливаете, поддерживают это: отлично. Но сначала проверьте http://caniuse.com; есть много браузеров, которые пока не поддерживают его, особенно на популярных платформах (Windows IE и Apple Safari не поддерживают WOFF2 прямо сейчас. IE в конечном итоге, но Safari... кто знает)

"Как насчет того, что шрифты Google, которые используются под Google, когда я прошу WOFF2?"

Действительно, WOFF2 также позволяет загружать "один шрифт" в кусках, указывая, как должна работать загрузка подмножества символов, чтобы вы могли загружать столько же шрифта, сколько вам необходимо для поддержки локалей ваших пользователей. Однако, если вы не запустили веб-сайт, который должен быть доступен в нескольких разных локализованных версиях, предназначенный для определенных рынков на этой планете на их родном языке, или вы используете сайт, который учит различным языкам, все из которых нужно стилизовать с одинаковыми (что маловероятно), это почти не имеет к вам отношения.