4 способа узнать, какой шрифт используется на веб-сайте
Опубликовано: 2021-08-16
Ежедневно, просматривая Интернет, мы сталкиваемся с множеством веб-сайтов. О большинстве из них мы забудем после получения необходимой информации, а некоторые сайты выделятся из толпы красивыми шрифтами. Веб-сайт может использовать разные типы шрифтов, чтобы привлечь внимание читателей и предложить удобство для пользователей. Если вы блогер или дизайнер, вам также может быть интересно использовать аналогичный стиль шрифта на вашем веб-сайте или на веб-сайте вашего клиента. В этой статье мы расскажем о различных методах определения шрифта, который использует веб-сайт.
По теме: Как узнать количество страниц на сайте?
Шрифты и сайты
Как правило, есть три способа использовать шрифты на любом веб-сайте.
- Самостоятельные пользовательские шрифты — на торговых площадках есть довольно нестандартные шрифты, которые можно купить.
Кто угодно, а также купите и разместите эти шрифты на том же сервере, где также хранится контент веб-сайта. - Сторонние шрифты, такие как Google Fonts — владельцы веб-сайтов могут легко использовать Google Fonts API и динамически вызывать шрифты с серверов Google для использования на своих сайтах. Это самая популярная форма в системах управления контентом, таких как WordPress, поскольку разработчики тем и плагинов будут использовать бесплатные шрифты Google.
- Использование системного стека — проблема с двумя вышеуказанными методами заключается в том, что загрузка файлов шрифтов влияет на скорость загрузки веб-страницы в браузере. Использование системного шрифта по умолчанию заставит веб-сайт использовать настройки шрифта вашего компьютера. Это поможет повысить скорость работы веб-сайта, а также предложит читателям больше впечатлений.
Кто угодно, а также купите и разместите эти шрифты на том же сервере, где также хранится контент веб-сайта. Помните, что некоторые владельцы веб-сайтов могут загрузить шрифты Google и разместить их на своем собственном сервере.
Независимо от того, какой тип шрифта использует веб-сайт, сайт должен включать шрифт в свой CSS (каскадная таблица стилей). Для сторонних шрифтов это будет внешний CSS, а для двух других вариантов следует использовать внутренний CSS сайта. Следовательно, вы можете легко найти семейство шрифтов, используя один из следующих методов, проверив код CSS.
Метод 1 — просмотр исходного кода страницы
Самый простой способ проверить шрифт, используемый на веб-сайте, — это проверить его исходный код.
- Откройте веб-сайт в Chrome или в своем любимом браузере.
- Щелкните правой кнопкой мыши и выберите в контекстном меню опцию «Просмотр источника страницы».
- На новой открывшейся странице нажмите «Control + F» в Windows или «Command + F» в Mac.
- Введите «шрифт» в поле поиска и нажмите Enter, чтобы найти слово в исходном коде.
- Если на веб-сайте используются шрифты Google или любые другие сторонние шрифты, вы можете найти соответствующие URL-адреса шрифтов в виде таблиц стилей CSS. Вот как это выглядит в исходном коде страницы:
Вот как это выглядит в исходном коде страницы:- Как видите, используются два семейства шрифтов с сайта fonts.googleapis.com, который является API для сервера Google Fonts.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">
- С помощью этой информации вы можете найти название семейства шрифтов, используемого на сайте.
Метод 2 — проверьте с помощью инструментов разработчика
Если на веб-сайте не используются сторонние шрифты, вы не увидите никаких таблиц стилей, включенных в исходный код страницы. В таком случае веб-сайт должен использовать либо пользовательские шрифты, либо использовать системный стек в таблице стилей веб-сайта.
Самый простой способ изучить таблицу стилей веб-сайта — просмотреть исходный код любого элемента HTML с помощью консоли разработчика браузера. Вы можете найти шрифт, используемый на веб-сайте, с помощью свойства CSS font-family.
- Когда вы находитесь на веб-странице, нажмите F11 в Windows для перехода в консоль разработчика. Если вы работаете на Mac, щелкните правой кнопкой мыши веб-страницу и выберите «Проверить» или «Проверить URL-адрес», чтобы открыть консоль разработчика.
- Когда вы увидите инструменты разработчика, щелкните инструмент выбора элемента, а затем наведите указатель мыши на любой текстовый элемент на веб-странице.
- Вы можете увидеть всплывающее окно, показывающее детали элемента с деталями шрифта, как показано ниже.
- Однако получить полную информацию о шрифте сложно, так как строка будет обрезана во всплывающем окне.
- Вы можете просмотреть подробную информацию о CSS элемента в разделе «Стили» в консоли разработчика. Прокрутите вниз в разделе «Стили» и найдите, какой шрифт используется на сайте.
Прокрутите вниз в разделе «Стили» и найдите, какой шрифт используется на сайте.- Если вы видите зачеркнутую строку для свойства font-family для элемента body, прокрутите вверх и найдите активное семейство font-family для этого выбранного текстового элемента. По сути, это означает, что веб-сайт использует несколько шрифтов для разных элементов на странице.
- Если сайт использует собственные или сторонние файлы шрифтов, вы также можете проверить в разделе «Источники» консоли разработчика, чтобы найти исходное расположение шрифтов, загруженных на сайт.
Метод 3 — проверьте с помощью инструментов тестирования скорости страницы
Некоторые веб-сайты блокируют щелчок правой кнопкой мыши и просмотр исходного кода страницы и ограничивают доступ к инструментам разработчика. В этом случае вы не можете использовать два вышеуказанных метода, чтобы определить, какой шрифт использует веб-сайт. Однако вы можете использовать некоторые сторонние инструменты, такие как инструменты тестирования скорости страницы, чтобы найти CSS и ресурсы, используемые на сайте.
- Перейдите к инструменту измерения скорости страницы Pingom.
- Введите URL-адрес веб-страницы, на которой вы хотите найти семейство шрифтов.
- Нажмите кнопку «Начать тест» и подождите несколько секунд, чтобы получить результаты.
- Прокрутите вниз и проверьте раздел «Запросы файлов».
- Если на веб-сайте используются файлы шрифтов (собственные или внешние), вы можете найти HTTP-запрос в этом разделе.
- Используя эти данные, вы можете найти шрифты, используемые на протестированном веб-сайте.
Метод 4 — используйте расширение браузера Chrome
Последний вариант — использовать расширение в браузере Google Chrome. Это поможет вам получить шрифт, наведя указатель мыши на текстовое содержимое на веб-странице после установки расширения.
- Откройте браузер Chrome и перейдите по URL-адресу команды «chrome: // apps /».
- Вы найдете список приложений и щелкните Интернет-магазин, чтобы перейти в раздел расширений Интернет-магазина Chrome.
- Введите «поиск шрифта» в поле поиска, чтобы отфильтровать релевантные расширения.
- Вы найдете несколько расширений и нажмите «Какой шрифт — найти шрифт».
- На следующем экране вы можете найти все сведения о расширении и нажать кнопку «Добавить в Chrome».
- Подтвердите всплывающее окно, нажав кнопку «Добавить расширение». Вы увидите сообщение об успехе, и веб-сайт разработчика откроется в новом окне, которое вы можете просто закрыть.
- Теперь откройте веб-страницу, на которой вы хотите найти шрифт. Щелкните значок головоломки рядом с адресной строкой браузера и выберите расширение «Какой шрифт — найти шрифт».
- Наведите указатель мыши на текстовые элементы на странице, чтобы получить название семейства шрифтов. Вы можете щелкнуть текст, чтобы отобразить всплывающее окно, в котором отображаются семейство шрифтов, стиль, высота строки, размер и сведения о цвете.
- Можно получить сведения о шрифте нескольких элементов на странице. Вы можете навести указатель мыши или щелкнуть на различные элементы на странице, чтобы получить подробную информацию о шрифте.
- Наконец, нажмите всплывающее окно «Выйти из шрифта», чтобы закрыть расширение и начать просмотр страницы в обычном режиме.
Заключительные слова
Веб-сайт может импортировать шрифты с использованием внутренних или внешних таблиц стилей. По сути, вы можете анализировать свойства CSS в таблицах стилей, чтобы получить полную информацию о шрифте. Вы можете использовать один из вышеперечисленных методов, чтобы легко узнать, какой шрифт использует веб-сайт.
вариативные шрифты как вектор будущего дизайна / Skillbox Media
ABC Dinamo в первую очередь известна как популяризатор вариативных шрифтов, которые всё чаще встречаются в диджитал-среде.
В её портфолио более 20 уникальных шрифтов, а среди клиентов есть такие, как Nike, Bauhaus, Dazed & Confused, Harvard Graduate School of Design и многие другие. Этим летом основатели студии приехали на «Стрелку», где провели двухдневный воркшоп.
Мы поговорили с Йоханнесом Брайером и Фабианом Харбом о том, как создать свой вариативный шрифт и в чём его преимущества перед традиционными форматами типографики.
Фото: Артём Голяков / предоставлено институтом «Стрелка»
— Вариативные, или переменные, шрифты — это отчасти новый, а отчасти производный формат. У такого шрифта нет отдельных файлов с жёстко заданными стилями (Regular, Regular Italic, Bold, Bold Italic и им подобными).
Файл со шрифтом всего один, но он позволяет получить великое множество начертаний.
Самое крутое в вариативном шрифте — кастомизация. Вы можете очень точно настроить, насколько тонким (Narrow) или насыщенным (Bold) будет любое начертание, какой наклон будет у его курсивного варианта и так далее.
— Как эти шрифты появились и когда стали популярны?
— Вариативные шрифты — наследники шрифтов Multiple Master (шрифтов MM). Эта технология появилась ещё в девяностые, но долго буксовала — мешали медлительные компьютеры и низкая скорость интернета. Зато последние пять-шесть лет вариативные шрифты развивались весьма бурно. Этому помогают улучшения веб-дизайна и браузеров.
— А как использовать их преимущества на практике?
— Во-первых, конечные пользователи могут гибко настраивать внешний вид шрифта.
Поэтому легче создать дизайн, в котором важны детальность и нюансы, получить более интересную и акцентированную типографику.
Во-вторых, дизайнеру проще «сбалансировать серые» (оттенки серого), чтобы подружить на печатной странице шрифты разных начертаний и размеров.
В-третьих, вариативный шрифт помогает повысить интерактивность сайта и доступность контента. Его вид можно изменять в зависимости от действий посетителя и других условий. Например — анимировать смену начертаний при попадании курсора на нужные элементы или менять контраст, толщину, пропорции и размер букв в зависимости от времени дня.
А всем скептикам и консерваторам скажем: вариативные шрифты умеют то же самое, что и обычные. И работать с ними можно абсолютно так же. Если вам нужен обыкновенный Bold или Regular, то просто берите стандартные начертания (их уже задал разработчик) — и ничего под себя подстраивать не придётся.
— С помощью каких инструментов создают вариативные шрифты? Есть ли какие-то тонкости?
— В Dinamo мы в основном работаем с Glyphs App и Dinamo Font Gauntlet. Чтобы использовать преимущества вариативного шрифта, нужно настроить у него оси вариативности (axis) — насыщенности, ширины, наклона и так далее. Для каждой оси задаются крайние начертания, определяющие множество промежуточных вариантов.
Ещё один нюанс: разработчику стоит тщательнее проверять готовый шрифт, испытывать его в деле. То есть смотреть, чтобы отдельно взятые начертания были читабельными, а переходы между ними красиво анимировались вдоль всей оси и не портили дизайн.
— Как думаете, какие перспективы у вариативных шрифтов?
— Мы в Dinamo искренне верим, что вариативные шрифты станут отраслевым стандартом в ближайшие годы.
Ведь у них много преимуществ: от расширения дизайнерских возможностей до более лёгкого администрирования и высокой скорости загрузки. Так как файл шрифта один, то и обращение к серверу нужно всего одно.
Однако сперва предстоит подружить с ними множество отраслевых программ — возможно, даже серьёзно доработать их функциональность. Задача непростая, и быстро её решить не получится, но мы уверены, что оно того стоит. Поэтому мы ждём не дождёмся, когда вариативные шрифты завоюют доверие и поддержку. Например, у производителей софта для работы с видео и 3D.
обложка: Артём Голяков / предоставлено институтом «Стрелка»
Apple, Google Microsoft шрифты Adobe объединили свои усилия для решения проблемы
Шрифт
проблема отображения возникает целый ряд вопросов. Например, показать хороший
шрифт на Chromebook ноутбук будет очень значительным раздутым, и в Nexus 6
будет очень неровные тени на вашем Mac.
Последняя переменная технологии шрифта путем корректировки в режиме реального времени для эффективного решения этой проблемы, так что реальность влияния текста на различных платформах и устройствах могут хорошо выглядеть. Этот метод также позволяет экономить пространство, обеспечивая множество стилей шрифтов в одном файле.
Теперь Apple, Google, Microsoft, Adobe работает учиться. На этой неделе четыре цифровой печати четыре платформы для запуска технологии переменной шрифта. Adobe Typekit и Adobe Type головы • Тим Браун (Tim Brown) отметил, что «несколько веков, что мы делаем, является статическим. А теперь мы имеем результаты проектирования, его интерьер включает в себя опечатку как мозг может вносить коррективы автоматически в зависимости от среды, в которой текст более привлекательным «.
Это
зависит от существующего файла шрифта для каждого шрифта. Обмен файлами шрифтов
требуется, курсив также нужен свой файл, Роман по-прежнему нужен свой
собственный файл шрифта.
Если вы хотите, чтобы показать каждый шрифт на
странице или приложения, вам нужны все файлы
шрифтов. Вы добавляете больше файлов, он будет потреблять больше пропускной
способности, поэтому существует множество сайтов, чтобы скорость загрузки
шрифтов будет очень медленным.
В то время как переменная шрифта, по существу, ряд шрифтов включены в один файл. Его принцип работы заключается в использовании одной или нескольких осей, чтобы изменить стиль шрифта, с помощью этой точки можно изменить стиль вдоль любого текста, в файле шрифта могут быть созданы многочисленные шрифты.
Для
дизайнера, он может быть переменной в соответствии с заданным шрифтом
устройств, приложения бесплатны и творческий идеальный стиль. Эти документы,
чем традиционный 70% меньший размер файла шрифта. • Microsoft Питер Констебль
(Petleer Constab) говорит, что традиционное
слово имеет свет, emilight, регулярные, полужирный и полужирный пять видов
размер файла около 656KB.
В развивающихся странах, Wi-Fi и мобильных сетей 2G является дефицитным ресурсом, быстрая скорость загрузки страницы может сэкономить время и деньги. Даже если у вас есть неограниченный трафик данных, переменные шрифты могут улучшить пользовательский опыт.
Мы с нетерпением ожидаем успешного технологии переменной шрифта, так как она согласуется с потребительским спросом. Генеральный директор FONTLAB Томас Фини (Thomas Финни) говорит, что существующая технология шрифта не работает на разных платформах. Новая технология будет бесчисленное множество.
Разработчики
объявили на прошлой неделе соответствующую технологию переменной шрифта
QuickSpecs, теперь есть больше работы предстоит сделать. Дизайнеры должны
выяснить, какой шрифт использовать эту технологию для лучшего эффекта, и
браузер также должен быть совместим с этой технологией.
Четыре цифровые печатные платформы имеют свои большие надежды. Google надеется интегрировать его в браузер Chrome и ASAP. И Adobe будет выпущен в конце этого месяца переменная обновления шрифта патч. Microsoft говорит, что в следующем году будет поддерживать переменные шрифтов во всех продуктах. Для Фини и других дизайнеров, с нетерпением жду дня переменной шрифт будет везде.
После успеха этой технологии не все платформы отображения шрифтов могут быть общими, давайте подождем и посмотрим, прибытие этот день.
App Store: Шрифты для Тату — текст для татуировок
Представляем TattooFonts 2!
Приложение переписано с нуля. Текст выглядит на 5+, скорость работы — отличная.
Больне нет никаких багов с «обрезанными» буквами.
Бесплатно для всех текущих владельцев TattooFonts!
Еще больше полезных функций в разработке!
###
*На данный момент не поддерживает кириллицу.
Коллекция самых популярных шрифтов для татуировок. Выберите шрифт, текст и посмотрите как оно будет смотреться!
Напишите свой собственный текст. Выберите размер. Затем перейдите к экрану списка шрифтов и выберите шрифт который вам понравился. Затем, вы можете переключиться в режим просмотра в полноэкранном режиме. Подождите, пока навигационная панель исчезнет, и сделайте скриншот (нажмите кнопку Home + Блокировка одновременно). Теперь вы можете увидеть этот шрифт в вашем фотостриме. Расшарьте его в Facebook, Twitter или Instagram. Так просто! Используйте снимок в качестве эскиза тату мастеру.
****
Татуирóвка (татý, татуáж) — процесс нанесения перманентного (стойкого) рисунка на тело методом местного травмирования кожного покрова с внесением в подкожную клетчатку красящего пигмента. Относится к декоративным модификациям тела. Как правило, татуировка и её вид определяются самим заказчиком, либо условиями быта и социума. Татуировка носит характерные отличительные черты, подразделяясь на виды, стили и способы изготовления.
* Татуировка — это разновидность боди арта, то есть, вид авангардного искусства.
* Татуировка нередко используется криминальными группами (Mara Salvatrucha, Якудза и т. д.) как метод идентификации внутри иерархии.
* Распространена среди молодёжных групп и течений, способствуя самовыражению и самоидентификации.
* Нередко используется для опознания и идентификации трупов в ходе судебно-медицинских расследований.
После Кука термин «татуировка» был принят не сразу, в качестве главенствующего, по отношению к одному и тому же способу украшения тела, у различных народов земного шара. Поначалу слово «татуировка» связывалось с процедурой, выполняемой на Таити.
Постепенно термин «татуировка» распространялся в большинстве европейских государств, приспосабливаясь к различным языкам и, заполняя нишу в лексике точным обозначением предмета, о котором идёт речь. Само же понятие «татуировка», которое охватывало уже все разновидности данного явления во всем мире, впервые попало в «Словарь медицины», подготовленный бельгийцем Пьером Нистеном в 1856 году.
Затем Эмиль Литтре ввёл его в знаменитый «Словарь французского языка».
Оценка татуировки производится не только методом «учета площади» заказанной работы, но и вероятной сложностью исполняемой работы, а также временем, затраченным на изготовление дизайна.
В России
Культура русского тату считается практически утраченной, до момента рождения криминальных структур. Именно потому в России и русских стилях тату синонимами татуировки могут служить слова-выходцы из криминального сленга: «портак», «портачка», «наколка», «масть». Сленговые слова определяют либо сам процесс изготовления тату (наколка, наколоть), либо идентификацию внутри иерархии (масть). Криминальное татуирование в России стало общественно признанной культурой, поскольку истинные каноны татуирования славян неизвестны или утрачены.
Татуировка, на сегодняшний день, является молодым направлением в искусстве России, не имея богатых и основательных традиций. В своем историческом прошлом, во времена СССР, татуировка имела в основном политический, армейский и арестантский характер.
Ускорение загрузки шрифтов на сайте
На сегодняшний день почти каждый сайт использует те или иные шрифты (включая иконки) для улучшения удобства коммуникации с пользователями и создания уникального стиля. Еще 20 лет назад на веб-сайтах сложно было встретить какие-либо шрифты кроме стандартного Times New Roman или Helvetica, сейчас же шрифты является неотъемлемой частью веба.
Кроме очевидных удобств использования шрифты создают до 50% дополнительного времени ожидания при загрузке (отрисовке) первого экрана сайта. Мы уже разбирали как оптимизировать загрузку шрифтов на сайте, в этом материале подробнее поговорим, что дополнительно можно внедрить уже после проведенной оптимизации для улучшения ситуации со скоростью сайта.
Краткая история веб-типографикиНачалось все в 1995 году, когда Netscape добавил поддержку тега font и возможность стилизовать текст страниц с помощью системного шрифта. Это позволило использовать порядка 10 различных шрифтов во всех браузерах.
В 1997 году Internet Explorer добавил поддержку загружаемого шрифта в формате EOT (который был всеми отвергнут), это положило начало использованию @font-face в том виде, как мы его знаем сейчас.
Следующие 10 лет разработчики стандартов были сфокусированы на более глобальных вещах, поэтому рядовым веб-мастерам приходилось «изобретать велосипеды». Наиболее распространенной техникой «специальных» шрифтов на страницах сайта стали подмена изображениями, FLIR, (да-да, создавалась сотня изображений с «глифами» дизайнерского шрифта, которая использовалась для стилизации заголовков), Cufon (когда использовался JavaScript и векторная графика в связке SVG + VML) и sIFR на Flash. Последний подход работал в большинстве браузеров того времени, ибо поддержка Flash была очень широкой (вплоть до 98% в лучшие годы).
В 2006 году CTO Opera, Hakon Wium, развернул целую кампанию против использования формата EOT для веб-шрифтов, поскольку Microsoft закончила поддерживать развитие этого формата в 2002 году. В результате, в большинство браузеров была добавлена поддержка альтернативных, типографских, форматов, TTF и OTF, и к 2009 году использование font-face, практически, было утверждено в текущем варианте: множество различных форматов для разных браузеров.
Последней вехой в 2010 году стало появление формата WOFF, Web Open Font Format, который смог собрать лучшее из TTF и OTF, включая сжатие «из коробки» и дополнительные мета-данные, и запуск сервиса Google Fonts, который стал стандартом «де факто» для подключения нестандартных шрифтов.
Почему веб-шрифты такие медленные?После окончания войны форматов (WOFF поддерживается 94% всех браузеров) веб-шрифтов началась война за скорость. В процессе разработки формата удалось договориться о подключении разных файлов шрифтов для разных браузеров в соответствии с их поддержкой этих форматов: это уже решило существенную часть проблем (для сравнения можно вспомнить еще недавние времена, когда в файл стилей записывались все возможные стили для всех браузеров, чтобы не загружать их отдельными файлами).
Но это не решило основную проблему производительности: загрузка шрифтов существенно блокировала отрисовку страниц сайта, и при большом количестве различных шрифтов сайт ужасно тормозил. Причин для этого несколько:
Большой размер файлов шрифтов: один нестандартный шрифт «весит» как все стили сайта (шрифт — бинарные векторные данные множества букв, глифов, а стили — это обычный текст, CSS код). Несколько нестандартных шрифтов нескольких начертаний уже существенно блокируют отрисовку страниц сайта.
Блокировка отрисовки страниц: текст на сайте, для которого назначен нестандартный шрифт, может быть отображен только после загрузки этого шрифта в браузере (ведь это могут быть иконки или штрих-коды). Из-за этого в большинстве случаев пользователь видит белый экран в браузере пока не загрузились нужные шрифты (а они могут быть очень большого размера).
Ускоряем загрузку шрифтовПодробная инструкция, как работать с большим размером шрифтов, уже была опубликована. В этом материале разберем все подходы для устранения блокировки отрисовки страниц шрифтами, предполагая, что все меры по уменьшению их размера уже приняты.
Веб-разработчики ввели несколько сокращений, описывающих ситуации при загрузке шрифтов на сайте. Это FOIT (Flash of Invisible Text) – невидимый текст на странице по причине отсутствия шрифта в браузере для его отображения (в некоторых случаях сводится к появлению квадратов на месте иконок), FOUT (Flash of Unstyled Text) – отрисовка текста в неверной (запасной) гарнитуре по причине отсутствия шрифта и FOFT (Flash of Faux Text) – отрисовка текста в поддельной гарнитуре (лже-наклонной и лже-полужирной), базирующейся на обычном начертании шрифта при отсутствии специальных начертаний.
Механизмы работы с порядком загрузки шрифтов в браузере уже достаточно хорошо описаны, поэтому приведу конечную схему:
Мы разберем финальные варианты из этой схемы с некоторыми прикладными улучшениями.
Практические рекомендацииДля избежания FOIT на странице, минимизации времени FOUT или FOFT необходимо к загрузке файлов шрифтов применить следующие меры:
- Добавить во все не-иконочные определения запасные варианты, максимально соответствующие нужной гарнитуре. На текущий момент кроме большого набора «стандартных» шрифтов браузеры также поддерживают общие начертания serif (с засечками), sans-serif (без засечек), monospace (моноширинные), cursive (от руки), fantasy (декоративные). Каждое назначение гарнитуры в CSS (через правила font*) должно оканчиваться одним из них. Например:
font-family: "Avenir Next Cyr", Tahoma, sans-serif;
- Добавить в директиву для @font-face правило моментального отображения текста при наличии запасного варианта шрифта (это подойдет для не-иконочных шрифтов):
font-display: swap
- Лучшей техникой для наискорейшей загрузки файла шрифта в браузере является тег preload, это позволяет обеспечить готовность файлов шрифтов к моменту отрисовки страницы (после загрузке стилей и блокирующих скриптов). Он поддерживается 68% браузеров (https://caniuse.com/#search=preload). Например:
<link rel=”preload” as=”font” href=”/assets/fonts/AvenirNextCyr-BoldItalic.woff” type=”font/woff” crossorigin>
- Для эмуляции preload в оставшихся 30% браузеров и более строгого кэширования шрифта через localStorage можно использовать предварительную загрузку шрифта через XHR. Скрипт, если его вставить в самом верху страницы, в head, позволяет обеспечить вызовы необходимых файлов шрифтов и кэширует их в localStorage. Предварительно файлы шрифтов (правила стилей) должны быть конвертированы в base64 для кэширования в localStorage (бинарные данные не удастся использовать). При использовании этого подхода нужно теги preload обернуть в <noscript> для исключения двойной загрузки шрифта.
- Для устранения FOIT для иконочных шрифтов можно использовать Font Face Observer и дополнительно ввести CSS класс для загруженного шрифта, инициализирующий font-face правило и назначаемый на html или body. В этом случае без наличия шрифта в браузере не будут отрисованы квадраты вместо иконок, а сразу после загрузки шрифта иконки появятся на странице.
- Для уменьшения времени FOUT при загрузке всех начертаний гарнитуры (нормальное-полужирное, нормальное-наклонная, полужирное-наклонное и т.д.) можно использовать FOFT и прописать основной шрифт единственном в нормальном начертании в другой font-family: в примере LatoInitial. После проверки загрузки всех остальных начертаний (можно в асинхронном режиме) через Font Face Observer применяются классы, исправляющие ложные начертания шрифта на корректные.
Вопрос использования FOFT для ускорения отображения текста является дискуссионным (во многих случаях проще положиться на запасные шрифты), но может помочь вам в ряде контентных проектов.
Как выбрать шрифт для проекта: антиква | GeekBrains
Разбираем историю антиквы и шрифты этого семейства
https://gbcdn.mrgcdn.ru/uploads/post/2445/og_image/d6cbcfd75425b8dca59af6825d76dbab.png
Почему важно понимать, как тот или иной шрифт соотносится с эпохой? Шрифт, как и дизайн, очень тесно связан с культурными событиями и историей. Постоянно создаётся немыслимое количество самых разнообразных, диких, классных, странных, консервативных шрифтов, которые так или иначе отвечают трендам. Такое многообразие сначала пугает — ведь когда нужно выбрать шрифт (или шрифтовую пару) для проекта, многие не понимают, как это сделать.
На самом деле всё не так сложно. Нужно помнить, что у всех шрифтов, которые создаются сейчас, есть прототип. Да, начертаний и шрифтов очень много, но если правильно классифицировать их и знать историю возникновения, поле выбора значительно сужается.
Итак, чтобы правильно выбрать шрифт, нужно учитывать культурный контекст проекта и знать этапы развития шрифта. Существует два больших семейства, на основе которых создаётся новый шрифт — антиква и гротеск. Есть и иные классы шрифтов, которые имеют признаки антиквы и гротеска, но не являются ими. О них поговорим в конце статьи. А сейчас, чтобы не запутаться, разберём основу основ — антикву.
Антиква. Старый стиль, переходный и антиква нового стиля
1445 год. На смену рукописным книгам и несовершенным оттискам, производить которые было сложно и дорого, приходит книгопечатание. Прорыв совершил Иоганн Гутенберг: он предложил использовать литеры (металлические буквы) и сразу отпечатывать по целой странице текста. Скорость печати возросла до 100 экземпляров оттисков одной страницы за час, а Гутенберг вошёл в историю как человек, придумавший книгопечатание.
Немаловажную роль в печати играла не только скорость набора, но и удобочитаемость и гармоничность шрифта.
Библия Иоанна Гутенберга. Набрана шрифтом-текстурой, но расширенной и доработанной. Первая половина 1450-х гг.
Разворот книги, который набрал Николя́ Жансо́н (1420–1480 гг.), французский пуансонист, гравёр, печатник и типограф. Работал в основном в Венеции
С зарождением книгопечатания появилась антиква старого стиля, её ещё называют гуманистическим минускулом. Очень много элементов взято из рукописного набора, но, несмотря на это, шрифт выглядит более собрано и функционально. Если рассмотреть наиболее характерные черты антиквы старого стиля, можно вывести некоторые закономерности, которые впоследствии будут изменяться, но основа останется прежней.
Возьмём для примера шрифт Adobe Garamond. Внимательно смотрим на засечки: они более «рукописные» и немного выгнуты наружу (это обусловлено спецификой пера). Они выполняют не только декоративную функцию, но и визуально отделяют один знак от другого. Старинной антикве свойственны мягкие, округлые засечки.
Особое внимание стоит обратить на ось у овальных букв (она сильно смещена вправо) и скругление засечек в местах примыкания. Это верный признак антиквы старого стиля.
Шрифт Adobe Garamond. Сам набор выглядит очень живым и не слишком контрастным, без лишних отвлекающих элементов
Шрифт Sabon, автор — Ян Чихольд
Знаменитые типографы того времени: Клод Гарамон, Альд Ману́ций, Джамбаттиста Палатино, Франческо Гриффо.
Типографы, которые сделали современный аналог шрифта: Герман Цапф, Стэнли Морисон, Уильям Кэзлон, Ян Чихольд.
Переходный стиль и эпоха барокко
После антиквы старого стиля появилась антиква переходного стиля. Она развивалась в XVII веке, в эпоху барокко. Если старым стилем в основном набирали религиозную литературу, то переходная антиква отвечала потребностям общества эпохи барокко.
Шрифт основан не на рукописном рисунке, а на геометрии в сочетании с природными мотивами. Появился сильный контраст и сам набор стал более изящным. Традиционно считается, что новый рисунок шрифта впервые создавался для короля Франции Людовика XIV.
Засечки в переходной антикве становятся прямыми и без дополнительных прогибов, каплевидный элемент более выражен, ось у овальных букв стала почти вертикальной, а форма знаков — полузакрытой.
Шрифт Baskerville
Шрифт Times New Roman
Если внимательно присмотреться, становится понятно, насколько разные начертания объединились в одной группе
Знаменитые типографы того времени: Уильям Кэзлон, Джон Ба́скервилл, Пьер-Симо́н Фурнье́.
Типографы, которые сделали современный аналог шрифта: Мэтью Картер, Чонси Х. Гриффит, Стэнли Морисон.
Антиква нового стиля. Эпоха классицизма
Антиква достигает расцвета. На смену барокко с его декоративными элементами приходит классицизм, где ясная структура вместе с функциональностью становится во главе угла. Теперь всё в единой системе. Звонкий, чёткий контраст. Связь с рукописной техникой пера совсем не ощущается — этот шрифт уже полностью отрисован.
Главные изменения в начертании: каплевидные элементы становятся более округлыми и выраженными, исчезает перемычка возле засечки. Сами засечки становятся очень длинными и тонкими. Ось выравнивается и становится симметричной.
Шрифт Bodoni
Знаменитые типографы того времени: Джамбаттиста Бодони, Фирме́н Дидо́ , Иоганн Юлиус Вальбаум.
Типографы, которые сделали современный аналог шрифта: Моррис Фуллер Бентон, Линн Бойд Бентон, Теодор Лоу де Винн.
Ленточная антиква
Отдельный вид, который сложно отнести к классу антиквы или гротеска. Скорее, этот класс шрифтов — современная модификация антиквы. Сохранён контраст между вертикалью и горизонталью, сам набор выглядит тонко и изящно, но нет засечек — основного, что отличает антикву от гротеска.
Шрифт Optima, создатель — Герман Цапф
Шрифт Meridian, создатель — Имре Рейнер
Напоследок — фото каллиграфа за работой. Это художник Ллойд Рейнольдс (1902–1978) в 1961 году
Переход к стеку системных шрифтов в WordPress (как и зачем) — WordPressify
Я большой поклонник высокой производительности в сети. Однако я также считаю, что она не должна ставить под удар дизайн. Важно всегда соблюдать баланс. Еще в 2017 году я посетил блог GitHub и мне понравился их шрифт. Он был удобочитаемый. Я решил покопаться в свойствах в Chrome Devtools и увидел, что они используют стек системных шрифтов.
Я использую системные шрифты уже много лет и люблю их. Сегодня я хочу показать вам, как использовать стек системных шрифтов на WordPress-сайте.
Что такое стек системных шрифтов?
Существуют разные типы шрифтов, когда речь идет про веб-сайт. Вы можете воспользоваться следующими опциями:
- Безопасные веб-шрифты: они бесплатные, браузер не тратит время на их скачивание, однако, как правило, они выглядят довольно старо, а потому они редко используются. Вы можете посмотреть список безопасных веб-шрифтов.
- Веб-шрифты: выглядят красиво, но требуют загрузки браузером. Доступны как бесплатные, так и платные опции. Они добавляют некоторый вес к вашему сайту. Однако их можно передавать через кэшируемые CDN. Среди провайдеров можно отметить Google, Adobe Fonts (TypeKit) и т.д.
- Локальное размещение веб-шрифтов: доступны как бесплатные, так и платные опции. Этот вариант требует некоторого времени на загрузку, но могут использоваться возможности отдельного HTTP/2-соединения к кэшируемому CDN.
- Системные шрифты: бесплатные, выглядят круто, поскольку соответствуют ОС, не требуют загрузки. Они используются такими сервисами, как GitHub, Bootstrap, Medium, Ghost, Booking.com и даже консолью WordPress. По моему личному мнению системные шрифты в macOS выглядят чуть круче, чем в Windows.
Системные шрифты не являются чем-то новым. Фактически Medium использует их еще с 2015 года. Это родные шрифты для вашей ОС. Многие из современных операционных систем подбирают шрифты очень рационально, потому внешний вид всегда является элегантным. И это не то же самое, что возврат к безопасному веб-шрифту Arial или Times New Roman. Поверьте мне, никто не хочет лицезреть на сайте Times New Roman.
И, что самое приятное, системные шрифты функционируют так же, как и безопасные веб-шрифты, поскольку они не требуют браузерной загрузки. Это позволит уменьшить общий вес страниц на сайте. Как показывает статистика, на апрель 2020 года веб-шрифты в среднем составляют примерно 6.2% от общего веса сайта. Это не так уж и много, но помните, что даже небольшая оптимизация способна ускорить работу вашего сайта.
Есть ли недостатки у системных шрифтов? Да. Во-первых, они зависят от корректной работы браузеров. В Chrome 81 на macOS были проблемы с выводом полужирных системных шрифтов. Но потом все было поправлено в Chrome 83. Однако был короткий период времени, когда любой сайт, использующий системный шрифт, выглядел несколько странно.
CSS для стека системных шрифтов
Благодаря свойству font-family у веб-шрифтов, мы обычно имеем базовый шрифт и один или два запасных fallback-шрифта. В случае с использованием системных шрифтов вы должны охватить все операционные системы, а потому вам нужно добавить чуть больше шрифтов. Потому этот метод и называется стеком системных шрифтов.
К примеру, вот как может выглядеть CSS для веб-шрифта:
font-family: "Open Sans","Helvetica Neue",sans-serif;
А вот как может выглядеть стек системных шрифтов:
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
Знали ли вы, что ваша консоль WordPress использует стек системных шрифтов? Вот как это выглядит:
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif
Таблица стеков системных шрифтов
Ниже мы приводим список шрифтов, которые идут с каждой конкретной ОС. Примечание: с течением времени шрифты могут меняться.
| Системный шрифт | OS |
|---|---|
| -apple-system (San Francisco) | iOS Safari, macOS Safari, macOS Firefox |
| system-ui | macOS Chrome, Windows Chrome (новые версии) |
| BlinkMacSystemFont (San Francisco) | macOS Chrome |
| Segoe UI | Windows Vista и новее |
| Tahoma | Windows XP |
| Roboto | Android, Chrome OS |
| Oxygen / Oxygen-Sans | KDE |
| Fira Sans | Firefox OS |
| Droid Sans | Android (старые версии) |
| Ubuntu | Ubuntu |
| Cantarell | GNOME |
| Helvetica Neue | macOS версии< 10.11 |
| Arial | Все |
| sans-serif | Все |
Как применить стек системных шрифтов
Теперь давайте посмотрим, как можно внедрить стек системных шрифтов на WordPress-сайт.
Метод 1. Использовать тему GeneratePress
Простейший способ – попробовать тему GeneratePress. В кастомайзере в разделе Typography вы можете просто выставить пункт System Stack. Больше ничего не нужно делать!
Метод 2. Добавить стек системных шрифтов через CSS
Если вы используете другую тему WordPress, вы можете легко перейти к стеку системных шрифтов с помощью небольшого CSS-кода.
Шаг 1. В WordPress вам нужно сменить CSS для вашего свойства font-family. Вы можете использовать кастомайзер WordPress для добавления кода в разделе Additional CSS.
Шаг 2. Добавляем следующий код. Он может варьироваться в зависимости от используемой темы, однако для большинства случаев подойдет именно такой вариант (он перезаписывает все остальные стили). Я использую тот же стек системных шрифтов, что и GitHub. Единственное исключение: я добавляю system-ui, поскольку новые версии Chrome поддерживают это. Помните, что шрифты будут использоваться в порядке их появления в стеке.
body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h2,h3,h4,h5,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}В зависимости от вашей темы вам может понадобиться добавить теги абзаца для контента body. Пример:
body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
Шаг 3. Вы также можете отключить любые сторонние шрифты, такие как, к примеру, Google Fonts, чтобы они не загружались в теме WordPress. Этот шаг может варьироваться, поскольку каждый разработчик включает шрифты по-своему. Однако в большинстве тем есть простой способ включения и выключения Google Fonts.
Если вы используете дефолтную WordPress-тему, вы можете использовать плагин Disable Google Fonts для отключения шрифтов Google.
Тестируем скорость сайта
Проведем тесты до и после для темы. Каждый тест был выполнен 5 раз и взято среднее значение.
Скорость сайта до изменений
Ниже приведен тест скорости сайта до изменений (с загруженными шрифтами Google).
Скорость сайта после изменений
Вот тест скорости сайта со стеком системных шрифтов. Как вы можете видеть, я сократил вес страницы на 60 Кб и избавился от 3 запросов. Один из них к fonts.googleapis.com, и затем 2 загрузки для разных font-weight-версий Roboto. Стек системных шрифтов был примерно на 6% быстрее, чем при использовании Google шрифтов.
Я знаю много сайтов, которые используют 4-5 шрифтов разного начертания и стиля, а иногда даже 2-3 разных Google шрифта. Потому вы можете столкнуться с более существенными изменениями, чем я.
Сглаживание шрифтов
Вам может потребоваться добавить сглаживание шрифтов. Возможно, ваша тема автоматически применяет соответствующие CSS-атрибуты к вашему шрифту. В таком случае шрифты будут выглядеть лучше.
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
Резюме
Системные шрифты могут быть отличной альтернативой безопасным веб-шрифтам. Они не создают никакой дополнительной нагрузки для пользователей и при этом выглядят великолепно. Хотя Google-шрифты и кэшируются локально, однако они все равно являются частью общего веса страницы.
Источник: woorkup.com
скоростных шрифтов | FontSpace
Загрузить- Темный режим
- Помощь Войти
- Шрифты
- Стили
- Коллекции
- Генератор шрифтов
- (͡ ° ͜ʖ ͡ °)
- Дизайнеры
- Stuff
89
Связанные стили
Современные
Ретро
Винтаж
Курсив
Логотип
Комикс
Плакат
Мультфильм
ПовседневныйFast
Дисплей
Racing
Автомобиль
Futuristic
Speedy
Sports
Мотоцикл
1 Race
Заголовок
Techno
1950S
Автомобильная промышленность
Велосипед
Мотор
Dodge
Nascar
1960S
1970S
427
Americana
Indy
America
Camaro
Chevrolet
Chevy10
Chrysler
Коммерческое использование
Сортировать по
- Популярные
- В тренде
- Новейший
- Имя
Для личного пользования Бесплатно
184.6k загрузок
Для личного пользования Бесплатно
85009 загрузок
Для личного пользования Бесплатно
20339 загрузок
Для личного пользования Бесплатно
Demo Italic16201 загрузок
Personal Use Free
7984 загрузок
100% бесплатно
92640 загрузок
Для личного пользования Бесплатно
Обычный125.2k загрузок
Для личного пользования Бесплатно
246.4k загрузок
Для личного пользования Бесплатно
860k загрузок
Для личного пользования Бесплатно
80287 загрузок
100% бесплатно
449,2k загрузок
Для личного пользования Бесплатно
6216 загрузок
Для личного пользования Бесплатно
80982 загрузок
Для личного пользования Бесплатно
Обычные29972 загрузки
Для личного пользования Бесплатно
12539 скачиваний
От 1 до 15 из 89 Результаты
- 1
- 2
- 3
- 4
- Далее
Еще больше стилей
- Популярные шрифты
- Коммерческие шрифты
- Классные шрифты
- Курсивные шрифты
- Блог
- Справка
- Контакты
- Бренд
- Конфиденциальность
- Условия
- DMCA 9000pace4
- Карта сайта
- Arial
- Calibri
- Helvetica
- Verdana
- Courier
- Georgia
- Palatino
- Times New Roman
- Serif — Латинское слово «стопа» означает «стопы».«Они также отлично подходят для заголовков, основного текста и логотипов. Благодаря более высокому качеству экрана в наши дни вам не нужно так сильно беспокоиться о том, что они будут выглядеть пиксельными при использовании на меньших размерах. Примеры: Джорджия, Таймс, Курьер, Гарамонд.
- Sans Serif — Эти шрифты, как правило, выглядят более современно, поскольку у них нет «ножек» засечек. («Без» означает без!) Они отлично подходят для большинства случаев использования в Интернете, от логотипов (привет, посмотрите на наш!) До заголовков и основного текста. Примеры: Arial, Tahoma, Verdana
- Script — Курсив, почерк, как угодно называть их.Примеры: Brush Script, Comic Sans.
- Дисплей — Эти шрифты почти все остальное. Это забавные, которые не подходят к другим категориям, но они могут отлично подходить для логотипов. Сценарии также могут попадать в эту категорию, поскольку иногда они могут быть менее читаемыми. Используйте с осторожностью, но знайте, что в этой области обычно есть забавные!
- Основной текст должен иметь высоту строки и размер шрифта, удобные для всех читателей.(Бонус: это отлично подходит для RPM, а также для SEO!)
- Гиперссылки особенно должны быть, по крайней мере, подчеркнуты и иметь доступный цвет текста, например синий. Идея состоит в том, чтобы пользователь мог легко определить, когда текст содержит гиперссылку. (На некоторых примерах ознакомьтесь с шестью способами сделать ваш сайт более доступным!)
- Любой шрифт, который вы используете, должен контрастировать с фоном. Шрифты с тонкими линиями и узкими деталями могут быть трудночитаемыми, поэтому вы можете выбрать более толстый шрифт.Например, Raleway — это шрифт, обычно используемый для основного текста, но некоторые из более тонких шрифтов могут быть трудночитаемыми при меньших размерах основного текста.
- Когда дело доходит до цветов текста, не используйте сплошной черный (# 000000). Сплошной черный цвет означает отсутствие света, поэтому он предотвращает испускание света экраном и создает нагрузку на глаза по мере их адаптации. Вместо этого выберите темно-серый цвет, например # 444444.
- Заголовки и заголовки страниц должны отличаться от основного текста, чтобы они выделялись для удобства чтения.
- Хотя может возникнуть соблазн настроить шрифты, используемые в навигационных функциях вашего сайта (таких как навигация, боковая панель и нижний колонтитул), чтобы сосредоточить внимание на вашем контенте, имейте в виду, что в этих областях шрифты должны быть достаточно четкими, чтобы читатель мог их найти, прочтите и нажмите.
- TTF — Шрифт True Type
- WOFF — Формат открытых веб-шрифтов
- WOFF2 — формат открытых веб-шрифтов, версия 2
- EOT — встроенный открытый тип
- 1
26
Производительность веб-шрифтов — как ваши шрифты влияют на скорость страницы
Для многих из нас типографика — такое же важное решение, как и все остальное в процессе разработки веб-сайта.Выбираем идеальное семейство шрифтов, следя за тем, чтобы мы использовали правильный вес шрифта. Мы хотим, чтобы наш шрифт был продолжением дизайна, а также чтобы наш контент был приятным для глаз, вызывая интерес наших читателей. Но как насчет производительности нашего веб-шрифта?
К сожалению, как правило, при оценке производительности гораздо меньше думается об использовании замечательного стороннего шрифта, который вы скачали. Из-за этого ваши посетители могут испытывать медленную загрузку или, что еще хуже, ужасную «Вспышку не стилизованного текста» (FOUT).Рассмотрение производительности веб-шрифтов — это то, что должно стать вашей привычкой.
Не бойся. Мы рассмотрим шаги, которые вы можете предпринять, чтобы решить, подходит ли вам веб-шрифт. Если вы решите, что это необходимое дополнение к вашему сайту, мы обсудим правильную оптимизацию и внедрение.
Веб-шрифты и системные шрифты
Прежде чем мы перейдем к выбору правильного веб-шрифта и к тому, как убедиться, что он не влияет на время загрузки вашего сайта, нам нужно сначала задать себе вопрос.Мне действительно нужно использовать собственный веб-шрифт? Или будет достаточно системного шрифта, который уже загружен в браузер?
Дэвид Гилбертсон и ребята из Hackernoon имеют отличную статью и блок-схему, которые помогут вам решить, действительно ли вам нужно загружать веб-шрифт для вашего сайта. Короче говоря, если веб-шрифт не представляет напрямую ваш бренд или каким-то образом не упрощает чтение вашего контента, он вам, скорее всего, не понадобится.
Самое замечательное в системных шрифтах то, что они уже включены в большинство устройств.Это означает, что их не нужно загружать на компьютер посетителя, когда они посещают ваш сайт. Это экономит пропускную способность и снижает количество запросов, необходимых для загрузки вашего сайта. Ниже мы перечислим некоторые из шрифтов, доступных в большинстве систем, но это далеко не полный список. Помимо этого, есть причина, по которой эти шрифты используются для миллиардов слов в книгах и документах — их удобочитаемость и качество.
Web Safe Fonts (Системные шрифты)
Суть в том, что важно спросить себя, зачем вам нужен веб-шрифт.Заметили бы ваши посетители разницу, если бы вместо этого вы выбрали системный шрифт? Скорее всего, когда вы сравните веб-шрифт, который вы думаете использовать, с сопоставимым системным шрифтом, разницу будет трудно увидеть. Часто причина, по которой мы пытаемся заменить системный шрифт, просто … потому что мы можем.
различных типов шрифтов — TTF, WOFF, WOFF2, SVG.
Если вы решили, что вам действительно нужен специальный веб-шрифт для вашего сайта, возможно, вы были сбиты с толку из-за различных типов файлов, сопровождающих загрузку шрифта.Вероятно, вы видели TTF, WOFF, WOFF2, SVG и некоторые другие. Хотя, к сожалению, не существует одного типа шрифта, который работал бы во всех без исключения браузерах, мы можем приблизиться и предоставить запасные варианты для крайних случаев.
TTF — Хотя шрифты TrueType совместимы практически со всеми браузерами, они не сжимаются и, следовательно, имеют больший размер файла. Это редко бывает хорошим вариантом.
SVG — Шрифты масштабируемой векторной графики можно игнорировать.Они содержат ошибки и были удалены из всех браузеров, кроме Safari, и даже в этом браузере далеко не лучший вариант. (Не путайте их с изображениями SVG, которые популярны и широко поддерживаются).
WOFF — А теперь поговорим. Формат открытого веб-шрифта является продуктом сотрудничества Opera, Microsoft и Mozilla и является рекомендацией консорциума World Wide Web. Он предлагает сжатие и поддерживается 98% браузеров. Это формат шрифта, который вы хотите использовать для посетителей в большинстве случаев.Почему запасной вариант, а не основной вариант?
WOFF2 — Вот почему. WOFF2 — это следующее поколение WOFF, обеспечивающее преимущество сжатия на 30% по сравнению с оригиналом. Какое-то время он не имел широкой поддержки браузерами. Однако он пользуется поддержкой не во всех основных браузерах (94%), и только IE и Opera Mini остаются без поддержки. Используйте его везде, где это возможно, для наилучшей производительности.
Источник: caniuse.comИспользование Google Font API
Google Font API — это веб-сервис, поддерживающий файлы шрифтов с открытым исходным кодом, которые можно использовать для вашего веб-дизайна.Их постоянно растущая коллекция шрифтов легко доступна по адресу https://fonts.google.com/. Если приведенные выше разделы были ошеломляющими, Google API — отличный ресурс, так как он выполняет большую часть основной работы за вас.
Источник: https://fonts.google.com/После выбора шрифта вы сможете выбрать нужный размер шрифта. Выбирайте только то, что вам нужно. Google даже предлагает удобный индикатор в правом верхнем углу, позволяющий узнать, насколько ваш выбор влияет на производительность веб-шрифтов.
API упрощает использование кода CSS @ font-face. Кроме того, он может обрабатывать множество альтернативных вариантов, поэтому вам не нужно беспокоиться о том, в каких браузерах вы работаете.
Иконочные шрифты и маленькие изображения
А что с иконками? Когда следует использовать шрифты значков из службы вроде https://fontawesome.com/, а когда — изображения значков?
Что касается производительности, ответ зависит от обстоятельств. Обычно, если вы показываете только 1-2 значка (например, большой палец вверх и большой палец вниз), тогда потребуется меньшая пропускная способность, чтобы просто загрузить их как изображения.Однако, если вы используете много значков на странице, шрифт для значков может быть более эффективным. Попробуйте это и увидите разницу — вы можете обнаружить, что шрифт значков, который вы хотели использовать, более компактен, чем изображения. Все они разные, и вам следует проверить оба варианта.
Если вы все еще не определились или у них схожие затраты на производительность, подумайте об эстетике. Если вам нужен многоцветный значок, лучше всего подойдут изображения значков, поскольку шрифты будут одноцветными. Изображения также дают стабильные результаты независимо от браузера.Если вы когда-либо использовали Font Awesome и видели квадрат (или ничего) вместо значка, вы видели, что может случиться, если что-то не настроено должным образом.
С другой стороны, иконки шрифтов можно изменять размер и перекрашивать с помощью простого CSS, и в результате не возникают какие-либо проблемы с разрешением. Шрифт будет отлично смотреться независимо от устройства, размера экрана или плотности пикселей. Их также можно легко кэшировать, чтобы сократить время загрузки.
Советы по оптимизации веб-шрифтов
Все это не означает, что никто никогда не должен использовать веб-шрифты.Однако есть правильный способ сделать это. Помня о производительности веб-шрифтов, вы можете избавить себя от лишнего стресса.
Причина, по которой веб-шрифты могут вызывать более медленную загрузку и FOUT, заключается в том, что часто браузер узнает, что ему нужно загрузить ваш шрифт только после того, как он уже загрузил файлы HTML и CSS. Это явно далеко не идеально.
Источник: HackernoonОднако, используя rel = preload, вы можете сразу сказать браузеру, что ему нужно загрузить ваш шрифт.Это больше похоже на это.
Источник: HackernoonНамного лучше. Предварительная загрузка в настоящее время пользуется поддержкой около 85%, так что она не является полностью универсальной. Однако есть альтернативы. Вы также можете использовать FontFace API, который предлагает большую совместимость. Более того, поддержка WOFF2, лучшего варианта, который мы рассмотрели ранее, практически идентична.
Резюме
Наша точка зрения здесь не в том, что никогда нельзя использовать веб-шрифты. Скорее, важно посмотреть на , почему вы используете веб-шрифт.Если это не важно для вашего бренда и не служит какой-либо другой цели, лучшим вариантом будет системный шрифт.
Если вы настроили использовать сторонний шрифт, вы можете предпринять простые шаги, чтобы убедиться, что он не окажет негативного влияния на вашу работу в Интернете. Теперь ваш сайт может воспользоваться этой великолепной типографикой. Подарите своим посетителям прекрасные впечатления от и !
Как выбрать шрифты для скорости и доступности сайта
Можете назвать меня ботаником в области типографики, но выбор фирменных шрифтов всегда является моей любимой частью процесса дизайна.
Типографика, изучение шрифтов и способа написания букв уже давно имеют решающее значение для облегчения чтения читателям.
(Хорошо, да, я фанат типографики.)
Я всегда рекомендую нанять дизайнера, если вы можете себе его позволить, даже если это просто для вашего логотипа. Если вы оказались в ситуации, когда вам нужно выбрать шрифт, вот самые основные категории шрифтов на выбор:
Быстрый курс по шрифтамВыберите комбинацию шрифтов
При разработке своего веб-сайта или бренда рекомендуется использовать всего несколько шрифтов.Например, в Mediavine наш бренд состоит из двух шрифтов (с засечками и без засечек), которые мы используем во всем, что делаем. Мы выберем другие шрифты, чтобы выделить их только в особых случаях, например, для публикации в социальной сети или логотипа мероприятия.
Использование разного веса шрифта — хороший способ внести разнообразие, не переусердствуя. Толщина шрифта — это различная толщина шрифта, например, тонкий, светлый, римский, жирный, очень жирный и т. Д.
Помните о доступности
Еще во времена высокой печати наборщики выбирали отдельные гарнитуры и буквы и вручную распределяли их так, чтобы они лучше всего подходили для читателя и конечного результата.Теперь мы можем закодировать эти варианты прямо на наших веб-сайтах, но многие из лучших практик по-прежнему остаются в силе.
Доступность веб-сайта в наши дни является большой темой для разговоров, и не зря: какой смысл публиковать весь этот замечательный контент, если процент читателей его не видит?
Для людей с любым видом нарушения зрения, убедитесь, что весь текст на вашем сайте читаем и разборчив, — это огромная часть хорошего интернет-гражданина. Вот несколько советов:
Скорость страницы имеет первостепенное значение
К сожалению для дизайнеров, которые часами разбирались со шрифтами, шрифты не всегда подходят для скорости страницы. А что волнует пользователей, поисковые системы и сайты социальных сетей?
Pagespeed.
Увы, шрифты — это область вашего бренда, которую вы можете пойти на компромисс ради скорости.
Но у вас есть несколько вариантов, когда дело доходит до этого компромисса:
1. Придерживайтесь веб-шрифтов
Веб-шрифты — самый быстрый вариант, потому что браузер и веб-сайт не загружают никаких дополнительных файлов. Это можно сделать с помощью быстрого CSS или, если вы используете Trellis, в настройках Trellis.
Это метод, который мы используем на нашем собственном сайте The Hollywood Gossip, который мы упоминаем в нашем тематическом исследовании, посвященном тому, как The Hollywood Gossip прошли Core Web Vitals.
От нашей команды разработчиков:
Этот вариант является наиболее простым в настройке и гарантирует самый быстрый и наименее разрушительный метод загрузки шрифтов. Tahoma и Garamond создают хорошую комбинацию без засечек и засечек, обеспечивая при этом передышку от комбинации Arial + Times.
2. Самостоятельные шрифты
При таком подходе вы можете загружать шрифты в свою тему напрямую, но есть шанс некоторого замедления.Chrome и другие браузеры представили резервные шрифты, но когда этот резервный шрифт заменяется вашим шрифтом Google, может произойти кумулятивный сдвиг макета.
Нет, буэно.
От нашей команды разработчиков:
Если выбор между использованием сети доставки контента (CDN) и размещением самого шрифта сводится к скорости страницы, самостоятельный хостинг шрифта всегда будет выигрывать. Аргументов в пользу CDN за последние несколько лет стало меньше.Вопрос для обсуждения: «Сэкономит ли CDN время?» теряется на время, необходимое для отправки запроса CDN.
3. Настройте инструкцию CSS «font-display»
Этот метод является немного более техническим, поэтому я позволю нашей команде разработчиков использовать этот:
От нашей команды разработчиков:
По умолчанию Trellis использует «font-display: optional». Использование «optional» обеспечивает наилучший баланс предотвращения CLS, но при этом позволяет использовать шрифты, не являющиеся веб-безопасными.
Это может быть немного сложно объяснить, но суть в том, что браузер выполняет несколько задач одновременно, чтобы быстро загрузить и обслужить запрошенный шрифт до того, как какой-либо текст будет отображаться на данной странице. Браузер на самом деле довольно хорошо справляется с этим менее чем за 100 мс, и большинство пользователей увидят настраиваемый шрифт при первом посещении и при каждом последующем посещении. Если в браузере не удалось загрузить шрифт вовремя, пользователи будут видеть безопасный для Интернета шрифт до тех пор, пока не перейдут на другую страницу.Последнее препятствует CLS.
Доступны и другие варианты «font-display». Из них «font-display: fallback» заслуживает внимания, поскольку гарантирует, что если шрифт загружается достаточно быстро, браузер может переключить шрифт, отображаемый на странице, на запрошенный, при условии, что он будет готов менее чем за 3 секунды. Это создает более приятное впечатление от визуально настроенного веб-сайта, но создает риск для CLS при медленных соединениях.
4. Установите сторонний шрифт
Вы можете установить шрифт через такую службу, как Google Fonts или Adobe Fonts, но это также означает, что ваш веб-сайт не может отображать какой-либо текст, пока этот шрифт не загрузится, поэтому вы делаете это на свой страх и риск, не пройдя Core Web Vitals.
Это определенно наш наименее любимый вариант.
А как же мой брендинг?
Поверьте, моему дизайнеру больно из-за того, что некоторые из моих любимых шрифтов недоступны в качестве веб-шрифтов. И возникает вопрос, зачем Google предоставлять веб-шрифты, а затем обвинять нас в их использовании?
Но я верю, что отрасль наверстает упущенное и в конце концов предоставит нам больше возможностей. Фактически, в разработке находятся новые возможности браузера, которые предоставят больше возможностей для баланса производительности и выбора шрифта.
Моя любимая часть работы дизайнера — придумывать творческие решения сложных проблем, поэтому я говорю, что есть способ сохранить фирменный вид без ущерба для скорости:
Добавьте выбранный вами небезопасный для Интернета шрифт в свой логотип или любые изображения, размещенные на вашем веб-сайте, при этом продолжая использовать безопасный для Интернета шрифт для текста.
Используйте свой любимый инструмент дизайна, чтобы создавать фирменные изображения с использованием шрифтов по вашему выбору, при этом сохраняя скорость вашего сайта ориентированной на безопасные для Интернета шрифты.
И не волнуйтесь — к большому огорчению любого дизайнера, вероятно, никто, кроме вас, не заметит, что вы вносите изменения в свои шрифты. Безопасные для Интернета шрифты настолько распространены, что большинство людей не задумывается, прежде чем их увидеть.
Типографика скорости — как шрифты помогают или снижают скорость веб-сайта
Кто не любит красивые и уместные шрифты. Одним из важнейших элементов дизайна любого веб-сайта является выбранная типографика. Шрифты определяют не только «атмосферу» вашего сайта, но и то, как читатели взаимодействуют с вашим контентом.
Однако, как и любой другой элемент дизайна на странице, типографика играет непосредственную роль в общей скорости и производительности веб-сайта. Хотя его влияние на скорость не так важно, как изображения или другие формы мультимедиа, в стремлении достичь оптимальных показателей производительности важна каждая буква (буквально).
Неудивительно, что почти 70 процентов всех веб-сайтов используют ту или иную форму пользовательской типографики. В стремлении к индивидуальности бренда многие веб-сайты достигают своих эстетических целей за счет производительности и проблем пользователей.Итак, что вы можете сделать, чтобы ваш бренд сохранил свою оригинальность, не жертвуя производительностью и функциональностью?
Хотя существует несколько способов решения этой широко распространенной проблемы, давайте потратим несколько минут на рассмотрение наиболее эффективных способов оптимизации пользовательских шрифтов.
Совет №1 — не переусердствуйте со стилями шрифтов
Самая большая ошибка, которую делают многие веб-дизайнеры, — это перегружать свой веб-сайт несметным количеством файлов пользовательских шрифтов. Знаете ли вы, что для каждого настраиваемого шрифта требуется веб-браузер для загрузки файла? Хотя это не имеет большого значения, если у вас есть только небольшое количество разных шрифтов, когда вы начнете приближаться к файлам шрифтов с двузначными цифрами, скорость вашего сайта пострадает.
В большинстве случаев вам нужно всего три разных файла шрифтов. Если вы можете работать с меньшим количеством, это даже лучше. Но, как правило, старайтесь сократить количество стилей шрифтов до трех или меньше.
Совет № 2 — Используйте веб-шрифты, поддерживаемые браузером
Почти каждый браузер поддерживает четыре основных веб-шрифта. Это означает, что файлы автоматически распознаются браузером и не требуют дополнительных загрузок. Эти форматы шрифтов включают:
Выбор шрифтов из этих четырех библиотек упростит рендеринг на странице, что окажет существенное положительное влияние на веб-сайты с большим количеством контента.
Совет № 3 — Загружайте только то, что вам нужно
Вместо того, чтобы загружать все файлы шрифтов на каждой странице, укажите браузерам только загружать и отображать файлы шрифтов, используемые на этой конкретной странице. Избегайте использования кода @ font-family на странице, где этот конкретный шрифт не используется.
Также имейте в виду, что если вы используете код , большинство браузеров автоматически загрузят версию курсивного шрифта, что означает, что вам не нужно указывать этот шрифт в разделе стилей на странице.
Совет №4 — Используйте загрузчик веб-шрифтов
Этот оригинальный инструмент представляет собой библиотеку Javascript, разработанную Adobe Typekit и Google Fonts для объединения и оптимизации файлов шрифтов, полученных из нескольких источников.По сути, эта функция загружает пользовательские веб-шрифты в фоновом режиме, что означает, что она не влияет на время начальной загрузки страницы. Если файл шрифта превышает продолжительность загрузки (установленную вами), используется назначенный резервный шрифт. Однако, если файл пользовательского шрифта загружается в течение отведенного периода времени, резервный шрифт отключается для пользовательского шрифта.
Оптимизация веб-шрифтов для скорости страницы
Уменьшить и оптимизировать веб-шрифты для повышения скорости страницы
Несмотря на то, что сокращение и оптимизация загрузки веб-шрифтов часто упускается из виду, это прекрасная возможность повысить скорость загрузки страниц и улучшить стиль дизайна для лучшего взаимодействия с пользователем.
Ни для кого не секрет, что стильный дизайн веб-сайта усиливает воздействие своего сообщения и может оказать важное влияние на взаимодействие с пользователем и различные формы конверсии, такие как продажи, подписка на электронную рассылку потенциальных клиентов и многое другое.
Лучшее в умеренности
Уникальные настраиваемые веб-шрифты могут стать отличным улучшением дизайна и добавить ценный слой визуального интереса, но с этим преимуществом приходит компромисс производительности и потенциальные ошибки времени загрузки.Во многом из-за упрощенных методов добавления шрифтов на веб-сайты, пользовательские шрифты стали очень распространены в Интернете, и может возникнуть соблазн использовать шрифты слишком широко.
Хотя вариативные шрифты становятся все более стандартными, каждый дополнительный традиционный шрифт или вариант шрифта обычно означает дополнительный файл, поэтому грамотный выбор шрифтов, которые действительно влияют, а какие можно опустить, снизит вес страницы — обычно практически без отрицательного воздействия на общий пользовательский опыт.
Сколько шрифтов для оптимальной скорости страницы?
Размер необходимых файлов зависит от шрифтов, поэтому оптимальный баланс скорости будет зависеть от конкретных используемых шрифтов. В большинстве случаев хорошим общим правилом является использование одного стиля шрифта для заголовков и одного для обычного текста абзаца с разумным пределом от четырех до шести общих вариантов шрифта.
Ограничьте пользовательские веб-шрифты до ~ 4 вариантов шрифтов для оптимальной скорости страницы.
Например, один шрифт для (1) общего текста абзаца плюс (2) жирный шрифт и (3) курсив, с другим шрифтом для (4) заголовков и других отличительных текстовых элементов.
Мобильные устройства
Чтобы еще больше уменьшить количество шрифтов, загружаемых в более медленные мобильные сети и устройства, пользовательские шрифты могут быть ограничены для больших экранов или других условий с помощью атрибутов HTML media и запросов CSS @media .Веб-браузеры не загружают файлы шрифтов, которые не относятся к текущим условиям мультимедиа, сохраняя этот вес страницы.
Например, чтобы избежать загрузки ресурсов для специального шрифта заголовка на мобильных устройствах, это семейство шрифтов может быть ограничено большими экранами:
media = " (min-width: 62em) " href = "https: // шрифты.googleapis.com/css2?family=Merriweather&display=swap "> А:
CSS / * --- специальный шрифт на больших экранах --- * /
@media (min-width: 62em) {
h2 {font-family: 'Merriweather'}
} Обратите внимание, что с html браузеры по-прежнему будут загружать файл CSS, даже если условие media не соответствует, но с более низким приоритетом без блокировки рендеринга и что CSS не будет применяться к странице .Как и в случае с запросом CSS @media , указанные файлы шрифтов не будут загружены вообще.
Системные шрифты
Один из фундаментальных принципов оптимизации скорости страницы заключается в том, что самый быстрый загружаемый файл — это тот файл, который вообще не должен загружаться. (Это отчасти объясняет, почему проницательный анализ возможностей сокращения ресурсов и настройки управления кешем являются важными стратегиями скорости страницы.)
То же самое и с веб-шрифтами.С пользовательскими шрифтами, которые настолько распространены, легко забыть, что их вообще не нужно использовать. Их также можно использовать выборочно, как специальный настраиваемый шрифт для заголовков и общий системный шрифт для общего текста абзаца.
Иногда называемые веб-безопасными шрифтами, системные шрифты уже являются частью программного обеспечения устройства пользователя и готовы к использованию без загрузки. Список шрифтов может быть указан в коде CSS — часто называемом стеком шрифтов — который браузер будет использовать в зависимости от того, какие шрифты доступны на данном устройстве.
Стек системных шрифтов с засечками может выглядеть примерно так, но при необходимости его можно настроить:
CSS / * --- общий текстовый шрифт --- * /
body { font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif} Службы шрифтов
Хотя лицензированные пользовательские шрифты могут размещаться на собственном хостинге, службы веб-шрифтов используют возможности CDN и включают такие параметры, как пользовательские наборы символов.Google Fonts является наиболее широко используемым, но есть и другие аналогичные сервисы.
Примените асинхронный CSS и подсказки к ресурсам для самых быстрых шрифтов Google.
Одним из преимуществ сторонних служб веб-шрифтов является то, что файлы шрифтов могли быть уже загружены браузером пользователя во время посещения другого веб-сайта. Браузер сохраняет эти файлы и использует их на других веб-сайтах без повторной загрузки.
Используйте только то, что вам нужно
Службы шрифтовтакже предлагают возможность загрузки только определенных необходимых символов, а не полного файла шрифта.Это умный способ уменьшить вес страницы, когда требуется всего несколько определенных символов, слов или фраз специального шрифта.
Загрузка пользовательских шрифтов
Шрифты из веб-служб шрифтов чаще всего добавляются на веб-сайт со ссылкой в HTML. (Правило @import в CSS также работает, но обычно приводит к снижению производительности для сторонних шрифтов.)
Вот пример загрузки двух вариантов шрифта под названием Roboto из Google Fonts:
HTML < ссылка rel = "stylesheet" href = "https: // fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap "> Вариант JavaScript
Загрузчик веб-шрифтов JavaScript позволяет более детально управлять загрузкой пользовательских шрифтов. Загрузчик шрифтов, разработанный совместно Google и Typekit, предлагает возможность асинхронной загрузки, а также расширенную конфигурацию, такую как обратные вызовы CSS и JavaScript, для управления отображением шрифтов в процессе загрузки.
Оптимизация шрифтов Google
Получите максимум от пользовательских веб-шрифтов Google.Наряду с повышением скорости страницы за счет подсказок ресурсов, устраните эффект блокировки рендеринга шрифтов Google Fonts путем асинхронной загрузки ресурсов CSS шрифта.
Оптимизировать шрифты GoogleЖенские шорты PUMA Speed Font, черные / черные, большие в магазине женской одежды Amazon
Таблица размеров Шорты US Slim
| Размер бренда | USA | Талия | Бедра | Внутренний шов | Бедро | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| XS | XS | 23.6 | 27,6 | 6,9 | 16,1 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| S | S | 25,2 | 29,5 | 6,9 | 17,3 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| M | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| L | L | 30,3 | 35,4 | 6,9 | 21 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| XL | XL | 33,5 | 38,6 | 6,9 Спортивные шорты для США
|