Шрифты css: font-family | htmlbook.ru

Веб-Безопасные шрифты — Учебник CSS — Schoolsw3.com

❮ Назад Далее ❯

Что такое веб-безопасные шрифты?

Веб-безопасные шрифты — это шрифты, которые универсально устанавливаются во всех браузерах и устройствах.

Резервные шрифты

Тем не менее, нет 100% полностью веб-безопасных шрифтов. Всегда есть вероятность, что шрифт не найден или установлен неправильно.

Поэтому очень важно всегда использовать резервные шрифты.

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

Пример

Здесь есть три типа шрифтов: Tahoma, Verdana и sans-serif. Второй и третий шрифты являются резервными копиями, на случай, если первый не найден.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Попробуйте сами »

Лучшие веб-безопасные шрифты для HTML и CSS

Ниже приведен список лучших веб-безопасных шрифтов для HTML и CSS:

• Arial (без засечек)
• Verdana (без засечек)
• Helvetica (без засечек)
• Tahoma (без засечек)
• Trebuchet MS (без засечек)
• Times New Roman (с засечками)
• Georgia (с засечками)
• Garamond (с засечками)
• Courier New (моноширинный)
• Brush Script MT (рукописный)

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

Arial (без засечек)

Arial — наиболее широко используемый шрифт как для онлайн, так и для печатных СМИ. Arial также является шрифтом по умолчанию в Google Docs.

Arial — один из самых безопасных веб-шрифтов, и он доступен во всех основных операционных системах.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Verdana (без засечек)

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

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Helvetica (без засечек)

Helvetica — шрифт любят дизайнеры. Подходит для многих видов бизнеса.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Tahoma (без засечек)

Tahoma — шрифт имеет меньше пространства между символами.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Trebuchet MS (без засечек)

Trebuchet MS — был разработан Microsoft в 1996 году. Используйте этот шрифт осторожно. Не поддерживается всеми мобильными операционными системами.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Times New Roman (с засечками)

Times New Roman — один из самых узнаваемых шрифтов в мире. Он выглядит профессионально и используется во многих газетах и «новостных» сайтах. Это также основной шрифт для устройств и приложений Windows.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Georgia (с засечками)

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

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Garamond (с засечками)

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

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Courier New (моноширинный)

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

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Brush Script MT (рукописный)

Шрифт Brush Script MT — был разработан для имитации рукописного ввода. Это элегантно и утонченно, но может быть трудно читать. Используйте его осторожно.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Совет: Также проверьте все доступные Google Fonts и как их использовать.

❮ Назад Далее ❯

Минимально необходимые шрифты — CSS-LIVE

Перевод статьи CRITICAL WEB FONTS с сайта zachleat.com, опубликовано на css-live.ru с разрешения автора — Зака Лезермана.

История загрузки веб-шрифтов проходила через много этапов:

1. Не делать ничего: подключение CSS-блока @font-face и использование его у себя в коде без уточнений. Но по мне, так это антипаттерн. Это приводит к мельканию невидимого текста (англ. flash of invisible text — FOIT) в некоторых браузерах, или того хуже, если что-то пойдет не так, в браузерах без таймаута на загрузку шрифта (WebKit) текст вообще так и не появится.
2. Встраивание шрифтов с помощью Data URI для мелькания неоформленного текста (англ. flash of unstyled text — FOUT): загрузка таблицы стилей CSS асинхронно (или с помощью AJAX-запроса) с веб-шрифтами, встроенными как Data URI (и сохранение их в localStorage для повторных показов).  Этот подход устарел, поскольку может вызвать краткое мелькание невидимого текста (FOIT) на некоторых маломощных устройствах.
3. Динамический класс для мелькания неоформленного текста: использовать API загрузки CSS-шрифтов (или полифилл для той же цели, вроде FontFaceOnload или fontfaceobserver), чтобы добавить класс-ограничитель, защищающий наш контент от веб-шрифтов до того, как они загрузятся (это также подробно описано на «Filament Group Lab«). Это необходимый минимум того, что я могу признать передовым методом, или «Введение в основы загрузки шрифтов».
4. Два динамических класса для мелькания ложного жирного и ложного курсива (англ. flash of faux text — FOFT): Этот метод немного усложняет процесс и использует два разных этапа динамических классов. На первом этапе загружается только обычный шрифт, затем все другие варианты — жирный, курсив и жирный курсив — загружаются на втором этапе. Это замечательно для медленных соединений тем, что основная масса перерасчетов страницы происходит на поздних этапах ее загрузки, где они не так заметны и меньше мешают пользователям. Я бы классифицировал этот подход, как «Средняя школа загрузки шрифтов».

Следующий этап: минимально необходимые шрифты

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

Я реализовал эту технику у себя на сайте. Здесь я использую четыре веб-шрифта: Lato Roman, Lato Bold, Lato Italic, and Lato Bold Italic.

• Исходный Lato Roman весит 25KB в формате WOFF2.
• Lato Roman только с символами A-Za-z весит всего 9KB в формате WOFF2 (36% от исходного)

Это существенно сокращает первый этап.

Покадровое сравнение

Желтая рамка показывает, когда обычный шрифт (используемый для основной массы текста) загружен и отображен. Заметьте, что все эти кадры «отсняты» на сайте zachleat.com с помощью инструмента «Имитация медленного соединения (обычный 3G)» в Chrome

По умолчанию

Динамический класс для FOUT

Два динамических класса для FOFT

Два динамических класса для минимально необходимых шрифтов

Сравнение производительности

По сути мы удлиняем время полной загрузки в конце, чтобы страница меньше перестраивалась на глазах у пользователя, раздражая его. Как только font-size-adjust появится в большинстве браузеров (а не только в Firefox, как сейчас), необходимость в этой технике уменьшится, если вообще не исчезнет. Но пока что этот подход необходим, чтобы пользователю как можно меньше приходилось отвлекаться от чтения текста.

Включите имитацию 3G в любимом браузере (если у вас изначально медленное соединение, то это не понадобится) и наблюдайте за отображением страницы. Веб-шрифты и правда с виду быстрее, даже если общее время, потраченное на загрузку веб-шрифта, больше.

Код

Код с реализацией этого подхода можно увидеть на GitHub. Здесь используется FontFaceOnload в качестве полифилла для API загрузки шрифтов.

Если интересно, я также реализовал тот же подход с помощью промисов и FontFaceObserver Брэма Стейна

Для повторных просмотров можно использовать тот же механизм, что и ранее. Я использую трюк Брэма Стейна с sessionStorage, так что мне не приходится делать что-либо на стороне сервера. Вы можете увидеть реализацию в коде на GitHub в initial.js и fonts.js (также строки 15 и 37).

Предложения по улучшению

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

Можно расширить этот подход, используя нечто похожее на рабочий процесс для «Минимально необходимого CSS» и просканировать страницу, выяснив, какие символы используются в фиксированной области просмотра (grunt-criticalcss использует 1200x900), чтобы точнее выделить подмножество веб-шрифта, еще сильнее уменьшив его файл. Это отнимет больше сил, поскольку процесс пришлось бы прогнать заранее для каждого уникального URL для статического контента. Ещё его можно запустить динамически с помощью JavaScript при загрузке страницы, для чего, вероятно, пришлось бы грузить целую библиотеку и жертвовать быстродействием.

В принципе, есть ещё вариант в виде потрясающей библиотеки Plumin.js, но, к сожалению, она слишком большая (~400KB в сжатом виде) для этой задачи. Так что пока я придерживаюсь начального 9-килобайтного исходного WOFF2, который потом заменяется на 25-килобайтную полную версию. Эта библиотека не должна быть больше начального файла шрифта, чтобы от динамического шрифта был толк (но я бы не сравнивал напрямую килобайты веб-шрифта с килобайтами JavaScript — они по-разному влияют на производительность).

Также стоит упоминуть статью Эндрю Джонсона «Живая интерполяция шрифтов в вебе» на A List Apart. Следите за этим подходом — он позволит динамически генерировать жирность и стили из основных шрифтов в надежде сэкономить загружаемые байты для дизайнов, использующих широкий выбор жирностей и стилей. Мне бы очень хотелось, чтобы это стало стандартом в вебе.

P.S. Это тоже может быть интересно:

• @font-face, шрифты

Шрифты CSS — CSS: Каскадные таблицы стилей

Шрифты CSS — это модуль CSS, который определяет свойства, связанные со шрифтом, и способ загрузки ресурсов шрифта. Он позволяет вам определить стиль шрифта, например его семейство, размер и толщину, высоту строки и варианты глифов, которые следует использовать, когда для одного символа доступно несколько.

В следующем примере показано простое использование основных свойств шрифта для оформления абзаца текста.

 р {
  ширина: 600 пикселей;
  поле: 0 авто;
  семейство шрифтов: "Helvetica Neue", "Arial", без засечек;
  стиль шрифта: курсив;
  вес шрифта: 100;
  шрифт-вариант-лигатуры: нормальный;
  размер шрифта: 2rem;
  межбуквенный интервал: 1px;
}
 

 <р>
  Триста лет назад

  Я подумал, что могу немного поспать

  Я растянулся на старинной кровати

  «Мой дух сделал ползучесть полуночи

 

Результат выглядит следующим образом:

Примеры вариативных шрифтов можно найти на сайтах v-fonts. com и axis-praxis.org; см. также наше руководство по изменяемым шрифтам для получения дополнительной информации и информации об использовании.

Свойства

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

At-правила

• @font-face
• @значения-характеристик-шрифта

Основные стили текста и шрифта

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

Руководство по функциям шрифтов OpenType

Функции или варианты шрифта относятся к различным глифам или стилям символов, содержащимся в шрифте OpenType. К ним относятся такие вещи, как лигатуры (специальные глифы, которые объединяют такие символы, как «fi» или «ffl»), кернинг (корректировка интервалов между определенными парами букв), дроби, стили цифр и ряд других. Все они называются функциями OpenType и доступны для использования в Интернете через определенные свойства и низкоуровневое свойство управления — 9.0020 настройки функций шрифта

. В этой статье вы найдете все, что вам нужно знать об использовании функций шрифтов OpenType в CSS.

Руководство по изменяемым шрифтам

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

LAST MODED:

. C++|Документация

Содержание

[ Скрывать ]

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

Вы также увидите разницу между свойствами шрифта CSS и общей классификацией свойств шрифта. Эти основы описаны в разделе Что такое шрифт? статья.

Шрифты CSS

Шрифт в CSS — это ресурс, содержащий визуальное представление глифов. Для упрощения в нем есть информация, которая сопоставляет глифы с их кодами.

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

 // текст 1
. текст 1 {
    семейство шрифтов: Lobster, скоропись;
}
// текст 2
.text2 {
    семейство шрифтов: Audiowide, фэнтези;
}
// текст 3
.text3 {
    семейство шрифтов: Courier, моноширинный;
}
 

 // текст 1
.текст 1 {
    вес шрифта: 900;
}
// текст 2
.text2 {
    вес шрифта: 500;
}
// текст 3
.text3 {
    вес шрифта: 200;
}
 

 // текст 1
. текст 1 {
    font-stretch: сжатый;
}
// текст 2
.text2 {
    растяжка шрифта: нормальная;
}
// текст 3
.text3 {
    растяжка шрифта: расширена;
}
 

 // текст 1
.текст 1 {
    стиль шрифта: обычный;
}
// текст 2
.text2 {
    стиль шрифта: курсив;
}
// текст 3
.text3 {
    стиль шрифта: наклонный;
}
 

 // текст 1
. текст 1 {
    размер шрифта: 7vw;
}
// текст 2
.text2 {
    размер шрифта: 70px;
}
// текст 3
.text3 {
    размер шрифта: 2em;
}
 

 // текст 1
.текст 1 {
    шрифт: 6vw Arial;
}
// текст 2
.text2 {
    шрифт: 60pt Courier, моноширинный;
}
// текст 3
.text3 {
}
 

 // текст 1
. текст 1 {
    шрифт-синтез: вес;
    вес шрифта: 900;
}
// текст 2
.text2 {
    шрифт-синтез: стиль;
    стиль шрифта: наклонный;
}
// текст 3
.text3 {
    синтез шрифта: нет;
    вес шрифта: 900;
    стиль шрифта: наклонный;
}