Главная » Архив меток: Шрифты

Архив меток: Шрифты

Сервисы для распознавания шрифтов онлайн — по картинке, текстовые, расширения браузеров

Если вам вдруг встретилась красивая типографика сайта в интернете, то посмотрев исходный HTML/CSS код страницы вполне реально узнать какую именно коллекцию шрифтов там использовали. В крайнем случае можно написать авторам/владельцам проекта и спросить о применяемых ими решениях в работе и где их взять. Однако, когда речь идет о найденных в сети иллюстрациях, принтах, баннерах и любых других проявлениях графического дизайна, то ...

Читать далее »

Прогрессивное улучшение шрифтов на сайте

От автора: недавно я имел честь поучаствовать в качестве приглашенного эксперта в работе Рабочей группы W3C по веб-шрифтам. Ранее группа отвечала за предоставление нам стандартов форматов шрифтов WOFF и WOFF2, и ее устав был расширен для работы над чем-то новым: решение проблемы производительности при загрузке шрифтов на сайт. Это действительно важная задача, особенно в связи с появлением переменных шрифтов. Я ...

Читать далее »

Как использовать Google Fonts, чтобы ускорить время загрузки

От автора: если вы задумываетесь, как использовать Google Fonts на своем веб-сайте или в веб-приложении, то рассмотрите несколько дополнительных действий, которые могут дать вам гораздо более быстрое время загрузки. В этой статье я покажу вам, как это сделать: Пропустить время ожидания загрузки шрифтов из Google Fonts Разместить шрифты на собственном хостинге для большей скорости и большего контроля над FOIT и ...

Читать далее »

Google Fonts и font-display: особенности взаимодействия

От автора: дескриптор font-display блоков @font-face действительно хорош. Само по себе это имеет большое значение для улучшения воспринимаемой производительности загрузки веб-шрифтов. Загрузка веб-шрифтов — сложная задача, и наличие инструмента, который работает так хорошо, как он, имеет большое значение для Интернета. Это настолько большое дело, что Pagespeed Insights / Lighthouse от Google предупредят вас, если вы не используете его. Горькая ирония ...

Читать далее »

55+ страшных и ужасных хоррор шрифтов для хэллоуина

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

Читать далее »

Чек-лист по загрузке шрифтов

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

Читать далее »

45+ шрифтов «печатная машинка» для Word / Фотошопа + машинописные русские шрифты

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

Читать далее »

Подробный разбор общих семейств шрифтов в CSS

От автора: сегодня мы поговорим про общее семейство шрифтов CSS. Если у вас есть некий опыт написания CSS, вы наверняка делали что-то похожее и, вероятно, несколько раз в одном файле стилей.   body { font-family: Arial, Helvetica, sans-serif; } Единственное объявление в приведенном выше правиле — это то, что обычно называют стеком шрифтов. Эта строка определяет шрифт, который браузер должен ...

Читать далее »

UX и веб-шрифты или сумасшедший мир загрузки пользовательских шрифтов в вебе

От автора: пользовательский шрифт не является чем-то новым в Интернете, но его использование все же может стать одним из факторов замедления сайта и увеличения стоимости для конечного пользователя. Если вы не очень внимательный, все очень быстро повалится из рук, как в запросе, который я сделал в HTTP Archive. Учитывая это, мы в MDN Web Docs экспериментируем с уменьшением влияния пользовательских ...

Читать далее »

3 техники оптимизации для улучшения производительности пользовательских шрифтов

От автора: оптимизация шрифтов получила новые возможности! Теперь использовать пользовательские шрифты стало легче и быстрее. Давайте разберем, что можно сделать при использовании пользовательских шрифтов, чтобы максимально повысить производительность. Предстоящая версия Microsoft Edge реализует unicode-range (последний современный браузер, который сделает это). Предварительная загрузка и font-display появятся в Safari и Firefox Переменные шрифты доступны во всех браузерах Уменьшите размер файла Помимо цифр, ...

Читать далее »