Что такое веб-шрифт, и что включает в себя преобразование в один?

Я прочитал несколько статей по этому вопросу, но реальные технические различия между веб-шрифтами и настольными шрифтами все еще ускользают от меня. Чем больше я читаю по этой теме, тем больше у меня возникает ощущение, что ни у кого нет четкого технического определения, что такое веб-шрифт.

Когда я загружаю «настольный» шрифт в сервис, генерирующий веб-шрифты, такой как FontSquirrel, что именно эти сервисы делают с файлом шрифта, чтобы сделать его веб-шрифтом? Если основное использование этих служб заключается в преобразовании в различные форматы, то какие форматы действительно необходимы в современной сети для поддержки разумного числа браузеров по состоянию на 2019 год?

«Веб-шрифт» - это просто шрифт, используемый в Интернете или в браузере. Эти веб-генераторы шрифтов просто облегчают вашу жизнь, предоставляя вам необходимые CSS для предоставления шрифта вашим посетителям и преобразования вашего шрифта во все форматы файлов, необходимые для обеспечения работы кросс-браузерного шрифта.

Некоторые шрифты считаются «безопасными для Интернета» просто потому, что они настолько распространены, что есть на каждом компьютере, например «Arial». Вам не нужно ничего делать, кроме как сказать веб-сайту использовать этот шрифт. Веб-шрифты должны быть загружены браузером посетителя, потому что если шрифта нет на вашем компьютере, вы его не увидите.

Форматы шрифтов, разработанные специально для Интернета, такие как Woff, разработаны с учетом небольшого размера файлов. Таким образом, шрифты Google также служат для разных форматов, они немного скрыты.

Очень важно отметить, что некоторые шрифты могут иметь отдельную лицензию на веб-шрифты, которой у вас может не быть, даже если у вас есть файлы шрифтов. Так же, как изображения в Google ... То, что вы смогли загрузить изображение, не означает, что вы можете использовать его для продажи бритья после бритья.

На сайте Developers.google.com есть хорошая статья, посвященная оптимизации веб-шрифтов, но также и об основах.

В этой статье есть довольно хороший отрывок о различных форматах:

Сегодня в Интернете используются четыре формата контейнеров шрифтов: EOT, TTF, WOFF и WOFF2. К сожалению, несмотря на широкий выбор вариантов, не существует единого универсального формата, который бы работал во всех старых и новых браузерах: EOT только для IE, TTF частично поддерживает IE, WOFF пользуется самой широкой поддержкой, но недоступен в некоторых старых браузерах и поддержка WOFF 2.0 находится в стадии разработки для многих браузеров.

Так, где это оставляет нас? Не существует единого формата, который работал бы во всех браузерах, а это значит, что нам нужно предоставить несколько форматов, чтобы обеспечить единообразное взаимодействие

Transfonter также имеет довольно хорошую таблицу о поддержке браузеров:

После того, как я задал этот вопрос, я провел более детальное исследование и поэтому добавляю этот ответ как своего рода дополнение к Joonas ', что было хорошо, но не ответило на мой последний вопрос достаточно подробно для меня:

Если основное использование этих служб заключается в преобразовании в различные форматы, то какие форматы действительно необходимы в современной сети для поддержки разумного числа браузеров по состоянию на 2019 год?

Многие разработчики утверждают, что WOFF и WOFF2 являются единственными форматами шрифтов, необходимыми в современной веб-разработке . Тем не менее, эти ответы не являются источниками, и я также думаю, что они слегка переусердствовали, поэтому давайте начнем с фактических данных о поддержке WOFF и WOFF2, любезно предоставленных CanIUse.com, который является отраслевым стандартом для документирования этого. Такие вещи.

Поддержка WOFF2

WOFF2 улучшает WOFF во всех отношениях, поддерживается большинством настольных браузеров, выпущенных после 2014 года, но только с 2018 года стала поддерживаться большинством мобильных браузеров. Поддерживается примерно 93% браузеров по всему миру.

Поддержка WOFF

WOFF начал поддерживаться Internet Explorer в IE9 (выпущен в 2011 г.), что делает формат EOT устаревшим для версий IE, выпущенных с 2011 г. Он поддерживается примерно 97% браузеров во всем мире.

Другие настольные браузеры начали поддерживать WOFF примерно в одно и то же время, включая Firefox начиная с Firefox 3.6, Chrome начиная с Chrome 5 и Safari начиная с 5.1 (выпущенные в 2010, 2011 и 2011 годах соответственно), что делало форматы TTF и OTF ¹ устаревшими в предыдущих версиях , Большинство мобильных браузеров поддерживают WOFF с 2013 года.

Предостережение и выводы

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

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

Если вы решите, что это так, и вам требуется поддержка настольных браузеров старше 2011 года или мобильных браузеров старше 2013 года, используйте полный стек шрифтов: WOFF2, WOFF, TTF (или OTF) и EOT.

Если вам не нужно поддерживать эти древние браузеры, и все же верно, что вы, скорее всего, этого не сделаете, просто используйте WOFF2 и WOFF в качестве стека шрифтов.

_{(1) TTF и OTF - это традиционные форматы шрифтов рабочего стола, и любой браузер, поддерживающий один, поддерживает другой, поэтому никогда не используйте оба}

Немного.

WOFF - это не что иное, как сжатый формат для TTF, что приводит к меньшему размеру. Внутренние органы не меняются. WOFF2 идет немного дальше, он немного изменяет представление шрифта, чтобы получить немного больше сжатия. EOT, будучи форматом только для MS, вообще не считается. SVG - это практически только контуры, чуть больше, поэтому он не считается реальным шрифтом, используйте его только для иконок, если он вообще есть.

Просто используйте WOFF и покончите с этим. Если вы хотите выжать последний байт, вы также можете предложить WOFF2, но разница будет незначительной.

Хотелось бы подчеркнуть кое-что действительно базовое: «веб-шрифт», за исключением технических деталей реализации, - это шрифт, на который вы получили лицензию, его создателем или правообладателем для конкретной задачи использования на веб-сайте. И те придут в формате веб-шрифта. Если вы сидите перед генератором для преобразования шрифта в формат веб-шрифта, и он не является открытым исходным кодом или тем, который вы нарисовали самостоятельно, остановитесь прямо здесь! Вы почти наверняка нарушаете лицензию и можете получить иск. А поскольку он находится в Интернете, людям легко найти то, что вы делаете, и проверить их список продаж.

Посмотрите, например, на этого глупца , который работал на Facebook и Google, который не осознавал, пока кто-то не сказал ему, что он технически использует пиратский шрифт на своем сайте. У него была лицензия на настольную подписку, но это не лицензия для использования в Интернете.