Оптимизация (сокращение) запросов веб-шрифтов

8

Моя домашняя страница в настоящее время использует 5 веб-шрифтов - я бы хотел, чтобы они были 6 из-за пятнистой поддержки Helvetica Neue. Один из шрифтов - значки «FontAwesome», остальные 4 используются только для одного или двух слов (т.е. у меня есть заголовок «Оптимизация», написанный буквами, похожими на старый компьютер).

2 из этих шрифтов доступны через Google, и я запрашиваю только необходимые буквы (и это прекрасно работает). Однако остальные 2 взяты с openfontlibrary.org и доступны только в одном формате. Что не имеет большого значения (в любом случае они мне понадобятся надежно, так что локальные копии лучше), быстрый доступ к генератору Fontsquirrel.com @ font-face, и у меня есть их в нескольких форматах, и CSS для загрузки.

А потом я проверяю время загрузки моей страницы ... тьфу. Я предполагаю, что я смогу разместить свои локальные копии, у кого-нибудь есть опыт в этой области?

optimization fonts адам-ASDF
источник

Ответы:

3

Использование нестандартных веб-шрифтов значительно влияет на производительность при загрузке страницы по сравнению с использованием стандартных веб-безопасных системных шрифтов. Это так независимо от того, используете ли вы JavaScript или @ font-face .

Всегда следует тщательно анализировать, следует ли использовать нестандартные веб-шрифты.

Некоторые вопросы, которые следует задать себе при рассмотрении использования нестандартных веб-шрифтов:

  • Вы используете их, чтобы показать, что вы можете и знаете, как?
  • Является ли это целью для улучшения дизайна и улучшения работы пользователей?
  • Является ли метод, используемый для реализации кросс-браузерной совместимости шрифтов?
  • Может ли изображение подойти, особенно если на одной странице всего несколько слов или несколько страниц?
  • Достаточно ли отличается шрифт от веб-безопасных шрифтов, чтобы его можно было использовать?
  • Если шрифт используется в качестве основного текста, легко ли его прочитать или он предназначен для заголовков?

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

tacotuesday
источник
Спасибо за подробный ответ, но я собираюсь признать небольшое разочарование ответами до сих пор. Я понимаю, что это влияет на время загрузки; Я знаю о типографии и веб-безопасных шрифтах. Я понимаю, что могу использовать изображение (или спрайты изображения) и альтернативный текст. Тем не менее, это последние курорты для меня. Я мог бы использовать очень безопасный стек шрифтов, но это лишает цели наличия веб-шрифтов (и даже замены требуют HTTP-соединения). Затем вы попадаете в SEO, вопросы доступности, настройки размера шрифта, переводы, настройки для слабовидящих и т. Д. Если это целесообразно , я предпочитаю оптимизировать свои веб-шрифты.
adam-asdf
Если бы вы прочитали первую статью, на которую я ссылался, вы бы нашли информацию о том, как улучшить время загрузки страницы при использовании нестандартных веб-шрифтов.
Tacotuesday
Извините, перегружен количеством ссылок, сейчас сделаю.
adam-asdf
Вы были правы, извините за мое нетерпение (на самом деле это вторая ссылка, которую он дает). Подробности самостоятельного хостинга, TypeKit, Google, font-squirrel (почему-то мне не хватало мысли попробовать расширенный вариант генератора @ font-face) и даже анализ различных методов в разных браузерах. Для тех, кто сталкивается с этим в будущем, он ответил на все мои вопросы.
adam-asdf
Спасибо, что сообщили мне, что это была вторая ссылка. Я перепутал их в посте. Это исправлено, так что это первая ссылка. Вы также можете посмотреть на Cufon и SIFR, если вы еще этого не сделали. Кроме того, большая часть моего ответа была предназначена для будущих читателей, чтобы они немного подумали, прежде чем следовать за толпой в отношении использования веб-шрифтов.
Tacotuesday
6

остальные 4 используются только для одного или двух слов

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

Су»
источник
Это пришло мне в голову, я просто чувствую, что если я скажу, что могу кодировать с помощью CSS3 пару веб-шрифтов, и адаптивный дизайн с помощью медиа-запросов, вероятно, целесообразен.
adam-asdf
Я заметил, что у вас есть большое уважение в этом сообществе (и, видимо, практический опыт). На что я смотрю? Я знаю, что запросы http (s) требуют времени, но дайте мне что-то, чтобы принять обоснованное решение ... мы говорим 2 секунды или 2 микросекунды? Я практичен, но, имея опыт в дизайне, я эстетически ориентирован. Дайте мне, пожалуйста, способ принять обоснованное решение.
adam-asdf
1
@ Су 'совершенно правильно. Каждый сайт отличается от HTTPRequests, все зависит от маршрута между клиентом и вашим сервером. Кто-то, использующий Dial-up (все еще) или спутниковое соединение, будет испытывать более длительное время загрузки, чем кто-либо на DSL или T1. Хорошая эстетика невероятно важна, но хорошая структура и оптимизация так же важны. Минимизация границы времени загрузки является обычной практикой, ограничивая таким образом количество HTTP-запросов на ваш сайт. Создание изображения слов уменьшит время загрузки, и ваши пользователи ничего не узнают. Посмотрите также на CSS Sprites.
Кристофер
@Christopher Я рад, что вы упомянули спрайты. Полагаю, вы могли бы сказать, что я ищу способ создания собственной, локальной версии спрайтов в веб-шрифтах.
adam-asdf
@ user1332729 Легко, сделай, как предложил Su '(Создай образы слов), и примени к нему принципы CSS Sprite. Черт, там так оптимизировано, как вы можете получить, не проходя через форматы изображений. Что вы имеете в виду локально доступны? Вам или вашему клиенту?
Кристофер
2

Чтобы продолжить, я использовал расширенные опции генератора @ font-face для подстановки своих шрифтов, поэтому загружал только необходимые символы.

Один из вариантов заключался в том, чтобы Base64 кодировал шрифты (что позволило мне встроить их в мой файл CSS). Если память служит, то Base64 кодирует .woffи .ttfшрифт.

Хотя мне нравится поддерживать как можно больше пользователей из всех браузеров, я решил, что не стоит замедлять пользователей современных браузеров с дополнительными, вероятно, избыточными данными, поэтому я использовал Modernizr (который использует yep / nope.js) для асинхронно загружать отдельный CSSфайл со ссылками на все форматы шрифтов в соответствии с усиленным пуленепробиваемым синтаксисом шрифтов .

Я ходил взад и вперед между Base64, кодирующим .woffшрифт и включающим остальные объявления шрифта в первичном CSSфайле, или только включал Base64, закодированный .woffв первичном файле, CSSа затем включал другие форматы в CSSфайл, через который я загружал асинхронно Modernizr.load.

Я предпочитаю быструю загрузку эстетике, поэтому FOUC не представляет большой проблемы, но я отмечу, что большинство браузеров как бы «моргали» шрифтами, когда они загружались (что было после того, как закодированные в Base64 шрифты в CSSзагруженной) асинхронны.

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

Так как это был мой собственный сайт, я смог поэкспериментировать, но я в основном делал это, чтобы «похвастаться», я более консервативен с клиентскими сайтами.

Другой метод, который я реализовал, заключался в том, чтобы поместить все .svgшрифты в один файл и идентифицировать каждый из них по своему собственному идентификатору, а не помещать каждый в отдельный файл, как генерирует генератор @ font-face.

адам-ASDF
источник