Как подключить несколько шрифтов css
Перейти к содержимому

Как подключить несколько шрифтов css

  • автор:

Решение проблем c @font-face в медиазапросах

Соединение с интернетом на мобильных устройствах по качеству часто уступает соединению на настольных компьютерах, следовательно загрузка подключённых шрифтов может затянуться на несколько секунд. Предотвратить это можно используя правило @font-face только для ряда устройств c определенным размером экрана используя медиазапросы. К сожалению, такой подход не работает в некоторых браузерах, включая все версии Internet Explorer и Firefox старше 10 версии. В этой статье вы найдете решение проблемы, которое позволяет достичь баланса между использованием хаков и производительностью.

В чём суть проблемы?

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

скриншот

Итак, как это можно исправить? Как уже было упомянуто в предисловии, лучше всего подключить нужный шрифт через правило @font-face только для определённого ряда устройств и экранов с помощью медиазапросов. Вы можете предположить что лучшим решением будет отображать подключённый шрифт только для пользователей с быстрым подключением к интернету и вы будете абсолютно правы. К сожалению пока такой возможности нет, хотя она уже несколько раз выносилась на обсуждение в списки рассылки WHATWG.

@font-face в медиазапросе

Для простоты, создадим два файла: index.html и style.css. Первый — это образец страницы с текстом, к которому применён подключённый шрифт, второй содержит стили для этой страницы.

Наша гипотетическая страница index.html может выглядеть так:

 html> head> link rel="stylesheet" href="style.css" /> head> body> p> Это безумно красивый текст, оформленный подключённым шрифтом. p> body> html> 

Как видите, это очень простая страница с одним текстовым абзацем и ссылкой на таблицу стилей.

Дальше вы видите код нашего гипотетического файла style.css, для которого использован подход «сначала мобильные»:

p < font-family: Arial,Helvetica,sans-serif; > @media only screen and (min-width: 980px) < @font-face < font-family: "OctinSports"; src: url("fonts/octinsports.eot"); src: url("fonts/octinsports.eot?#iefix") format("embedded-opentype"), url("fonts/octinsports.woff") format("woff"), url("fonts/octinsports.ttf") format("truetype"), url("fonts/octinsports.svg#OctinSports") format("svg"); font-weight: normal; font-style: normal; > p < font-family: "OctinSports"; > > 

Согласно таблице стилей, для всех абзацев должен применяться шрифт Arial, с некоторыми исключениями. Используемый стек шрифтов состоит из популярных шрифтов, встроенных в большинство крупных операционных систем. В общем то, согласно статистике CSSFontStack, шрифт Arial присутствует на 99.84% устройствах с Windows и 98.74% устройствах на Mac. На случай если ни один из перечисленных шрифтов не доступен, в CSS указано общее семейство шрифтов без засечек.

Во второй части style.css описан медиазапрос. Он предназначен для всех устройств с шириной экрана не менее 980px (можно использовать и другую контрольную точку). В этот медиазапрос мы помещаем правило @font-face, которое будет загружать подключённый шрифт, используя устойчивый к ошибкам синтаксис @font-face от Fontspring. Затем мы просто применяем новый шрифт для всех абзацев, заменяя прописанный ранее стиль.

Поддержка браузерами

На первый взгляд это решение кажется отличным, так как позволяет применять подключённый шрифт только для пользователей с большим экраном, которые теоретически не должны столкнуться с проблемой недостаточной пропускной способности. Однако, к сожалению, оно не поддерживается Internet Explorer 10 и старше, а также Firefox 10 и старше. Вам такое поведение может показаться странным, однако на самом деле оно продиктовано спецификацией CSS 2.1, согласно которой @-правила внутри медиазапросов не работают.

Хотя и последняя версии Internet Explorer всё еще не поддерживает такое применение @-правил, компания-разработчик Firefox, Mozilla, добавила его поддержку в версиях после 10. Таким образом, по большому счёту проблема касается только Internet Explorer. Также следует помнить что Internet Explorer 8 и старше не понимают медиазапросы, так что даже если в новых версиях ситуация изменится, проблемы со старыми никуда не денутся.

Как частично решить проблему

Есть ли способ решить проблему поддержки браузером Internet Explorer правил @font-face внутри медиазапросов? Ответ: да, частично.

Как я упомянул в предисловии, с этой проблемой я столкнулся в процессе разработки моего сайта. Мне не было известно о проблеме совместимости с Internet Explorer, так что как и любой добросовестный веб-разработчик я первым делом обратился к Google. Проводя расследование, я наткнулся на статью «Не помещайте @font-face в медиазапрос», из которой я узнал в чём причина проблемы, но не узнал как её решить. Так как найти готовое решение я не смог, пришлось придумать его самостоятельно.

Избавляемся от проблемы в Internet Explorer 9 и старше

Из того, что уже было сказано, получается что проблема состоит только в Internet Explorer, так что можно сосредоточиться на поиске решения, которое будет подходить только для этого браузера. Первым на ум приходит создать отдельный файл CSS, например fonts.css, с всеми правилами @font-face без медиазапросов и использовать условный комментарий. Итак, содержимое fonts.css будет выглядеть так:

@font-face < font-family: "OctinSports"; src: url("fonts/octinsports.eot"); src: url("fonts/octinsports.eot?#iefix") format("embedded-opentype"), url("fonts/octinsports.woff") format("woff"), url("fonts/octinsports.ttf") format("truetype"), url("fonts/octinsports.svg#OctinSports") format("svg"); font-weight: normal; font-style: normal; > 

Этот подход даёт нам преимущество: для всех браузеров кроме Internet Explorer вес страницы остаётся прежним, если не считать нескольких байтов добавленных условным комментарием. Для IE затраты на загрузку страницы увеличатся вследствие добавления дополнительной таблицы стилей. Так как она содержит всего несколько строчек правила @font-face , после сжатия средний размер файла должен стать всего лишь на 1-2Кб больше. В большинстве случаев это приемлемый компромисс.

Вот сжатая версия кода для реализации этого подхода:

Это простое решение, но его нельзя считать исчерпывающим, ведь, как вам наверное известно, Internet Explorer 10 не поддерживает условные комментарии, так что он наш код с условным комментарием просто проигнорирует. Проблема еще не решена.

Решение для проблемы с Internet Explorer 10

Для Internet Explorer 10 мы используем менее изящный подход, нам придётся применить хак. Если точнее, мы будем использовать хак построенный на JavaScript; он описан в статье CSS-хаки для IE10. Он определяет что используется IE10 и проверяет является ли ширина окна браузера равной или большей 980px. Если эти условия соблюдены, в элемент страницы добавляется всё та же таблица стилей fonts.min.css. Помните что поскольку хак работает благодаря JavaScript, он, само собой, не будет работать если JavaScript отключён.

 


Пользователи мобильных устройств

Прежде всего посмотрим на самую свежую статистику (июнь, 2013) использования браузеров на мобильных устройствах, предоставленную StatCounter. На странице по ссылке можно увидеть следующую статистику:

  1. Android: 29.06%
  2. iPhone: 22.77%
  3. Opera: 16.06%
  4. UC Browser: 9.89%
  5. Nokia: 7.38%
  6. Chrome: 3.23%
  7. BlackBerry: 3.11%
  8. NetFront: 2.40%
  9. iPod Touch: 2.21%
  10. Другие: 3.9%

Важным моментом в этой статистике является то, что Internet Explorer в ней отсутствует, он входит в пункт «Другие». Тем не менее, благодаря Крейгу Баклеру (Craig Buckler) из SitePoint, я узнал что согласно данным StatCounter, на IEMobile (всех версий) приходится 1.4% пользователей. Значит используя правило @font-face в медиазапросе мы достигаем нашей цели отображать базовый шрифт как минимум для 98.6% пользователей мобильных устройств.

Крейг мне также написал что по данным NetMarketShare 1.31% использования мобильных браузеров приходится на IE9, а на IE10 — 1.0%. Статистика, конечно же, может отличаться в зависимости от сайта, однако общее впечатление у нас сложилось.

Теперь давайте рассмотрим две самые популярные мобильные версии Internet Explorer: 9 и 10.

Как мы увидели в предыдущем разделе, для IE10 мы используем код JavaScript, который определяет ширину окна браузера. Если на устройстве включена поддержка JavaScript и окно браузера меньше 980px, файл fonts.min.css не будет добавлен. В противном случае, если JavaScript не поддерживается, код не сработает и подключённый шрифт не будет загружен и применён.

С IE9 ничего не поделаешь: таблица стилей будет загружена и подключённый шрифт будет применён в любом случае. Однако с этим столкнется только половина пользователей IEMobile.

Подведём итог: подключённый шрифт не применяется в 99.5% случаев, и только в IE9 ничего нельзя поделать. Мне кажется это отличный результат.

Пользователи настольных компьютеров

Как и в предыдущем разделе, давайте взглянем на самую свежую статистику (за июнь, 2013) использования браузеров на настольных компьютерах. Статистика по настольных компьютерах следующая:

  • Google Chrome: 42.71%
  • Firefox: 20.01%
  • Internet Explorer 10: 9.88%
  • Safari: 8.39%
  • Internet Explorer 8: 8.04%
  • Internet Explorer 9: 6.79%
  • Opera: 1.03%
  • Internet Explorer 7: 0.49%
  • Internet Explorer 6: 0.22%
  • Другие: 2.44%

Так как мы оставили правило @font-face внутри медиазапроса, наш веб-сайт оптимизирован под все браузеры, которые поддерживают и медиазапросы (сюда не входит IE8 и старше) и @font-face в медиазапросах. Как мы увидели, в этот диапазон входят все браузеры кроме Internet Explorer. То есть, мы получаем достаточную оптимизацию для 74.58% пользователей, неплохо для начала.

Для Internet Explorer 6-9 подключённый шрифт по нашему желанию будет загружаться с помощью условного комментария. Значит к предыдущему количеству пользователей можно добавить ещё 15.54%, в результате получаем 90.12%.

Что касается Internet Explorer 10, так как таблица стилей загружается с помощью JavaScript, подключённый шрифт загрузится у тех, у кого активирован JavaScript. Я не могу привести статистику для этого случая, но количество пользователей с отключённым JavaScript не должно превышать 0.5%.

Итого, шрифт применяется грубо говоря в 99.5% случаев. Ещё один отличный результат.

Заключение

Подключённые шрифты могут сделать сайт более привлекательным, их использует все большее количество разработчиков и дизайнеров. Однако не следует забывать об оптимизации под мобильные устройства, ведь на них приходится всё большее количество трафика. Как видно из этой статьи, можно использовать подход «сначала мобильные» для веб-шрифтов и поместить @font-face в медиазапрос параллельно с несколькими хитростями для Internet Explorer. Этому приёму можно доверять, ведь она надёжен и позволяет обеспечить хорошую поддержку для 99.5% пользователей мобильных устройств и настольных компьютеров.

Aurelio De Rosa

© 2013 Frontender Magazine

Шрифты и работа с ними — Основы верстки контента

Страшным сном дизайнера и верстальщика является фраза заказчика «Поиграйся со шрифтами». Многие эту фразу слышали, но а как же поиграть со шрифтами? CSS предоставляет много правил для стилизации шрифтов. С некоторыми из таких свойств вы уже знакомы — это свойство font-weight и font-size .

Помимо насыщенности, CSS позволяет управлять следующими настройками:

  • Семейство шрифтов;
  • Стиль шрифта;
  • Стиль строчных символов;
  • Размер шрифта;
  • Межстрочный интервал.

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

Семейство шрифтов

CSS позволяет указывать шрифты, которые будут использованы на сайте. Для этого используется свойство font-family . Оно принимает список шрифтов, которые могут быть загружены на сайте. Это может быть одно семейство шрифтов или сразу несколько. Если указано несколько шрифтов, то браузер будет считывать их слева направо до первого шрифта, который он сможет использовать. Остальные шрифты будут игнорироваться. Например:

.font  font-family: Georgia, "Times New Roman"; > 

Если у пользователя в системе есть шрифт Georgia, то будет применен он. В противном случае браузер будет искать шрифт Times New Roman. Теперь возможны две ситуации:

  • У пользователя в системе установлен шрифт Times New Roman — шрифт применится к странице.
  • У пользователя в системе не установлен шрифт Times New Roman — браузер подставит шрифт из основных настроек браузера. Это необходимо для возможности отобразить контент на странице.

А какой шрифт именно выберет браузер? Тут все зависит от настроек. Может случиться так, что стандартный шрифт будет из другого типа. Это может «сломать» визуальную часть сайта. Все шрифты можно разделить на три большие группы:

  • Антиква или шрифты с засечками. Такие шрифты чаще всего используются в книгах и новостных сайтах. В CSS обозначается serif .
  • Гротеск или шрифты без засечек. Основной тип шрифтов на сайтах. Прямо сейчас вы читаете именно такой шрифт. В CSS обозначается sans-serif .
  • Моноширинный шрифт. У этого семейства все символы имеют одинаковую ширину. Вы можете увидеть такой шрифт в терминалах или редакторах кода. В CSS обозначается monospace .

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

.font  font-family: Georgia, "Times New Roman", serif; > 

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

Установка новых шрифтов

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

  • .woff/.woff2 — шрифт формата Web Open Font Format. Распространенный формат, который поддерживается большинством современных браузеров.
  • .ttf — шрифт формата TrueType. Данный формат был придуман в 80-е года 20 века и сейчас используется для поддержки старых браузеров. Совместим с современными браузерами. Золотая середина форматов.
  • .eot — шрифт формата Embedded OpenType. Это наиболее старый формат. Его использование необходимо только в случае поддержки старых браузеров, например, Internet Explorer 6.0. Ситуация редкая, поэтому его использование почти не встречается.

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

Пусть наш проект имеет директорию fonts/, внутри которой находятся файлы шрифтов.

Хорошим тоном является указание @font-face в самом начале CSS файла, а не перед первым использованием шрифта. Это позволит правильнее структурировать CSS. Есть два основных свойства, которые принимает @font-face :

  • font-family — Имя подключаемого шрифта. Именно по нему можно обратиться после подключения.
  • src — Путь к файлу со шрифтом.

После указания этих свойств уже можно пользоваться шрифтом. Подключим Roboto-Regular.

@font-face  font-family: "Roboto Regular"; src: url("../fonts/Roboto-Regular.ttf"); > body  font-family: "Roboto Regular", sans-serif; > 

Следующий шаг — подключить другие два начертания. Можно воспользоваться примером выше. Тогда наш CSS приобретет следующий вид:

@font-face  font-family: "Roboto Regular"; src: url("../fonts/Roboto-Regular.ttf"); > @font-face  font-family: "Roboto Bold"; src: url("../fonts/Roboto-Bold.ttf"); > @font-face  font-family: "Roboto Light"; src: url("../fonts/Roboto-Light.ttf"); > body  font-family: "Roboto Regular", sans-serif; > h1  font-family: "Roboto Bold", sans-serif; > h2  font-family: "Roboto Light", sans-serif; > 

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

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

@font-face  font-weight: 400; /* Соответствует значению normal */ font-family: "Roboto"; src: url("../fonts/Roboto-Regular.ttf"); > @font-face  font-weight: 700; /* Соответствует значению bold */ font-family: "Roboto"; src: url("../fonts/Roboto-Bold.ttf"); > @font-face  font-weight: 300; font-family: "Roboto"; src: url("../fonts/Roboto-Light.ttf"); > body  font-family: "Roboto", sans-serif; > h1  font-weight: bold; > h2  font-weight: 300; > 

Пара слов об особенностях использования свойства font-family внутри конструкции @font-face . Указывая имя шрифта, не нужно дополнительно указывать семейство шрифтов. Это делается при указании шрифта у элемента. То есть, вот такая запись является некорректной:

@font-face  /* Приведет к ошибке и шрифт не будет подключен */ font-family: Roboto, sans-serif; > 

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

@font-face  /* В названии нет кавычек */ font-family: Roboto; src: url("../fonts/Roboto-Regular.ttf"); > @font-face  /* В названии кавычки */ font-family: "Hexlet Regular"; src: url("../fonts/hexlet.ttf"); > body  font-family: Roboto, sans-serif; > .logo  font-family: "Hexlet Regular", monospace; > 

Стиль шрифта

Помимо обычного начертания, CSS позволяет задать и другой вариант отображения шрифта — курсивный. Для этого используется свойство font-style , которое может принимать одно из трех значений:

  • normal — стандартное значение. Соответствует нормальному отображению шрифта. Именно такой стиль вы читаете прямо сейчас.
  • italic — курсивное начертание. Данное начертание имеет наклонные буквы, в отличие от нормального стиля. Вот так выглядит курсивный шрифт.
  • oblique — тоже курсивное начертание. Зачастую оно не отличается от значения italic .

Но почему существует два похожих значения для курсива? На самом деле они не очень похожи. Курсив, который задается значением italic , является самостоятельным шрифтом, для которого есть отдельный файл в системе или на сервере. Он относится больше к рукописному тексту, тогда как oblique искусственно наклоняет символы текущего шрифта.

.italic  font-style: italic; > 

Строчные символы

С помощью CSS можно задать такой вид строчных символов как «Капитель».

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

Текст с использованием капители

По своей высоте эта фраза не отличается от простого набора строчными символами, но стилистически они подстраиваются под заглавные символы.

Капитель устанавливается с помощью свойства font-variant . У него возможны два значения:

  • normal — стандартная стилистика строчных символов.
  • small-caps — капитель.
p  font-variant: small-caps; > 

Межстрочный интервал

Межстрочный интервал (интерлиньяж) — это расстояние по вертикали между базовыми линиями одного и другого символа в соседних строках. Так создается расстояние между этими строками. Важным элементом при создании дизайна является использование достаточного межстрочного интервала. Чаще всего это 150% от значения размера шрифта. Например, если шрифт имеет размер 16 пикселей, то межстрочный интервал должен быть не менее 24 пикселей. Такое значение не является необходимым правилом и от него всегда можно отступить.

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

p  font-size: 16px; line-height: 1.5; > 

Может показаться, что значения 1.5em и 1.5 будут работать одинаково. Это правда, но только для одного элемента. Сравним вот такие блоки:

 class="news"> Важная новость Текст важной новости  
.news  font-size: 16px; line-height: 1.5; > .news h2  font-size: 18px; > 

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

  • У блока news межстрочный интервал будет равен 16 * 1.5 = 24px
  • Заголовок второго уровня получит интервал 18 * 1.5 = 27px

Заменим line-height: 1.5 на line-height: 1.5em :

.news  font-size: 16px; line-height: 1.5em; > .news h2  font-size: 18px; > 

При указании единицы измерения свойство line-height будет посчитано один раз и это значение применится ко всем элементам внутри:

  • У блока news межстрочный интервал будет равен 16 * 1.5 = 24px
  • Заголовок второго уровня тоже получит интервал в 24px , так как оно будет наследовано от блока news

Обобщенное правило

Теперь, для работы со шрифтами, вы знаете все основные правила. Это:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

Их можно указывать не только по отдельности, но и все вместе с помощью одного CSS правила font . Шесть разных правил внутри одного! Это может быть удобно, если действительно нужны все значения. При этом вы не обязаны указывать все значения. Единственное ограничение — наличие значений для font-size и font-family . Остальные значения можно не указывать. Укажем значения для всех этих свойств внутри правила font :

p  font: italic small-caps bold 16px/24px Roboto, sans-serif; > 

Важно обратить внимание на запись 16px/24px . Внутри правила font так обозначаются свойства font-size и line-height .

Использование одного правила или нескольких

Этот раздел относится не только к правилу font , но и ко всем обобщенным правилам, которые вы изучите в процессе прохождения курсов. С одной стороны, использование одного правила сокращает количество строк, которые используются в CSS. Это действительно так, но есть две основные проблемы использования таких свойств:

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

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

font-family

Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берётся следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif , sans-serif , cursive , fantasy или monospace . Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщённым именем, которое задаёт вид начертания.

Краткая информация

Значение по умолчанию Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.
Наследуется Да
Применяется Ко всем элементам
Анимируется Нет

Синтаксис

 font-family: [, [, . ]]
Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

  • serif — шрифты с засечками (антиквенные), типа Times;
  • sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель Arial;
  • cursive — курсивные шрифты;
  • fantasy — декоративные шрифты;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Arial Georgia Courier serif sans-serif cursive fantasy monospace

Пример

font-family h1 < font-family: Geneva, Arial, Helvetica, sans-serif; >p

Танцы

Венгры страстно любят танцевать, особенно ценятся национальные танцы

Результат данного примера показан на рис. 1.

Применение свойства font-family

Рис. 1. Применение свойства font-family

Объектная модель

Объект.style.fontFamily

Спецификация

Спецификация Статус
CSS Fonts Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

3 12 1 3.5 1 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • font-family в CSS
  • Загрузка своего шрифта
  • Установка шрифта

Практика

  • Шрифт заголовка
  • Шрифт иллюстрации
  • Шрифт на веб-странице

Справочник CSS

  • !important
  • ::after
  • ::backdrop
  • ::before
  • ::first-letter
  • ::first-line
  • ::marker
  • ::placeholder
  • ::selection
  • :active
  • :blank
  • :buffering
  • :checked
  • :default
  • :dir
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :focus-within
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :link
  • :muted
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :paused
  • :placeholder-shown
  • :playing
  • :read-only
  • :read-write
  • :required
  • :root
  • :seeking
  • :stalled
  • :target
  • :valid
  • :visited
  • :volume-locked
  • @charset
  • @document
  • @font-face
  • @import
  • @keyframes
  • @media
  • @page
  • @supports
  • @viewport
  • accent-color
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • aspect-ratio
  • backdrop-filter
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size
  • block-size
  • border
  • border-block
  • border-block-color
  • border-block-end
  • border-block-end-color
  • border-block-end-style
  • border-block-end-width
  • border-block-start
  • border-block-start-color
  • border-block-start-style
  • border-block-start-width
  • border-block-style
  • border-block-width
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-start-end-radius
  • border-start-start-radius
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-decoration-break
  • box-shadow
  • box-sizing
  • caption-side
  • caret-color
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • font-family
  • font-kerning
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • gap
  • height
  • hyphenate-character
  • hyphenate-limit-chars
  • hyphens
  • image-rendering
  • justify-content
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-block-size
  • min-height
  • min-width
  • mix-blend-mode
  • object-fit
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-block
  • padding-block-end
  • padding-block-start
  • padding-bottom
  • padding-inline
  • padding-inline-end
  • padding-inline-start
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • pointer-events
  • position
  • quotes
  • resize
  • right
  • row-gap
  • scroll-behavior
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-skip-ink
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-fill-color
  • text-indent
  • text-orientation
  • text-overflow
  • text-shadow
  • text-stroke
  • text-stroke-color
  • text-stroke-width
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index
  • zoom

Подключение шрифта к странице: как правильно и актуально подключать сейчас

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

Как правильно сейчас подключить шрифт

@font-face < font-family: 'SomeFont'; font-style: normal; font-weight: normal; src: url('somefont.woff2') format('woff2'), url('somefont.ttf') format('truetype'), /* Старые Safari, Android, iOS (если не нужно, то убираем .ttf) */ url('somefont.woff') format('woff'); >

Как подключить несколько начертаний шрифта и использовать их через одно название

Можно столкнуться с ситуацией, когда нужно использовать разные начертания одного и того-же шрифта, но в CSS не хочется искать и прописывать каждый раз свое название. Выход есть - подключать файлы шрифтов, применяя одно название font-family, а переключаться между шрифтами с помощью font-weight:

@font-face < font-family: 'SomeFont'; font-style: normal; font-weight: 300; src: url('somefont_light.woff2') format('woff2'), url('somefont_light.ttf') format('truetype'), /* Старые Safari, Android, iOS (если не нужно, то убираем .ttf) */ url('somefont_light.woff') format('woff'); >@font-face < font-family: 'SomeFont'; font-style: normal; font-weight: 500; src: url('somefont_medium.woff2') format('woff2'), url('somefont_medium.ttf') format('truetype'), /* Старые Safari, Android, iOS (если не нужно, то убираем .ttf) */ url('somefont_medium.woff') format('woff'); >@font-face < font-family: 'SomeFont'; font-style: normal; font-weight: 700; src: url('somefont_bold.woff2') format('woff2'), url('somefont_bold.ttf') format('truetype'), /* Старые Safari, Android, iOS (если не нужно, то убираем .ttf) */ url('somefont_bold.woff') format('woff'); >

В последствии указываем разные плотности и у нас разные шрифты. Значения для разных плотностей, указаны ниже. Помогает не запутыватся.

Плотности шрифта от 100 до 900

100 - Thin 200 - Extra Light (Ultra Light) 300 - Light 400 - Normal 500 - Medium 600 - Semi Bold (Demi Bold) 700 - Bold 800 - Extra Bold (Ultra Bold) 900 - Black (Heavy)

Как подключать шрифты для старых браузеров

Сейчас уже такое подключение не актуально, но по прежнему можно встретить на сайтах.

@font-face < font-family: 'SomeFont'; font-style: normal; font-weight: normal; src: url('somefont.eot'); /* IE9 Compat Modes */ src: url('somefont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('somefont.woff2') format('woff2'), /* Для новейших браузеров */ url('somefont.woff') format('woff'), /* Новые браузеры и IE9+ */ url('somefont.ttf') format('truetype'), /* Safari, Android, iOS */ url('somefont.svg#SomeFont') format('svg'); /* Legacy iOS */ >

Полезные сервисы для шрифтов

google-webfonts-helper - даст скачать шрифты из google fonts и покажет как их лучше всего подключить.

transfonter.org - сервис позволяет создавать набор шрифтов разных форматов, и на выходе выдает как встроить шрифты на сайт. Очень удобно, не нужно подписывать семейство для разных начертаний, он умеет объединять начертания под одним названием шрифта.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *