Свойство font: font-family | htmlbook.ru

Font-family — задаем тип и гарнитуру шрифта в CSS

Нужно будет предварительно сказать, что все свойства, используемые для оформления шрифтов (Font и Line Height) в Html коде, наследуются:

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

Позволю себе напомнить вам синтаксис написания CSS правил:

Т.е. сначала пишется свойство, а через двоеточие — значение для него. Правила, прописанные для каждого селектора, отделяются друг от друга точкой с запятой (после последнего ее можно не ставить):

Теперь давайте перейдем непосредственно к синтаксису font-family, ибо тут есть небольшие нюансы. В этом CSS свойстве нужно перечислить гарнитуры шрифтов в порядке убывания их приоритета (если на компьютере пользователя не будет установлен первый, то применен будет второй из списка, ну и т.д. по списку), а в конце нужно будет дописать семейство, например, sans-serif (если ни одного из перечисленных шрифтов на компьютере пользователя не обнаружится, то будет применен один из указанного семейства).

В приведенном примере браузер сначала поищет на компьютере пользователя установленный Arial, и если его найдет, то данный Html элемент им и будет в результате отрисован. А если Arial на компьютере пользователя найден не будет? Тогда браузер поищет Geneva, а в случае неудачи — Helvetica, ибо он идет следующим по убыванию приоритета в font-family. Понятно?

Ну, а если пользователь окажется настолько экзальтированным, что ничего из перечисленного в этом свойстве на его компе найдено не будет, то данный элемент будет отрисован тем шрифтом, который у этого пользователя выбран по умолчанию для семейства sans-serif (без засечек или, по другому, рубленные). Существуют еще семейства Serif (с засечками) и monospace (моноширинные), которые вы также можете использовать в Font-family для указания типа.

Да чего я объясняю?! Ведь это все в точности повторяет задание шрифтов в теге Font через атрибут Face, который сейчас считается не рекомендуемым (не валидным) и которому на смену как раз и пришло CSS свойство Font.

Тамже вы можете более подробно почитать про то, как пользователь может назначить умолчательные фонты различных типов:

Еще, кстати, написано, что существует проблема использования на сайте абсолютно любых фонтов, ибо они должны быть обязательно установлены на компьютерах пользователей. Считается, что с большой долей вероятности на компьютере пользователя будут установлены только около десятка (Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS), а значит именно их вы можете без опаски использовать в правилах с Font-family.

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

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

Названия шрифтов, не содержащие пробелов в семействе Font-family, в кавычки заключать не обязательно:

Font-size — задаем в CSS размер для шрифта

Следующее свойство Font-size служит для задания размера шрифта для какого-либо элемента в Html коде. У него есть свои особенности. Размер можно задавать как в абсолютных, так и в относительных единицах:

1. Можно задать размер жестко, используя для этого пиксели:

   font-size:10px;

2. Можно использовать относительные единицы em и ex. Подробнее о них вы можете прочитать по ссылке, но если говорить кратко, то «em» — это высота шрифта, заданная для данного элемента по умолчанию или унаследованная, а «ex» — это высота латинской буквы «x» в нужной вам гарнитуре.

   Но размер «Ex» для разных браузеров может отличаться по отношению к «Em», поэтому в CSS свойствах font-size гораздо чаще используют относительные единицы размера шрифта в виде «Em». Например, если для заголовка задать:

   font-size:2em;

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

3. Также относительные размеры в font size можно задавать и с помощью процентов, которые будут считаться от размера гарнитуры, который данный элемент получил по наследству. «Em», кстати, делает тоже самое. Один «Em» и 100% — это одно и то же:

   font-size:200%;

   Кстати, гарнитура по умолчанию определяется используемым браузеров и эту информацию всегда можно посмотреть. В Firefox, например, вам достаточно для этого выбрать из верхнего меню «Настройки» — «Настройки» — вкладка «Содержимое»:

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

   В любом случае вы вольны будете с помощью font-size задавать в относительных единицах уменьшение или увеличение этого унаследованного размера. То же самое можно сказать и об умолчательной гарнитуре (которая в CSS задается через font-family) — она тоже передается по наследству тегу из настроек браузера пользователя.

   Все шрифтовые правила наследуются. Т.е., если вы написали в каком-то элементе правило Font-size, то этот размер будет передаваться во все вложенные в него теги (наследоваться). Это можно перебить уже прописанным для вложенного элемента правилом «Font-size» и т. д.

4. Можно еще в качестве значений для этого свойства использовать одно из семи обозначений: xx-small, x-small, small, medium, large, x-large или xx-large. Что это такое?

   А это полный аналог того, как мы задавали размеры в чистом Html с помощью тега Font и атрибута Size. Но только там мы использовали числа от 1 до 7, а здесь используются названия, но суть осталась прежней, и размеры, заданные таким образом и через возможности чистого html, будут коррелироваться между собой:

5. Ну и последний способ задания относительных размеров заключается в использовании «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного (примерно на 17 процентов, но зависит от конкретного браузера). Этот способ тоже имеет аналог в чистом Html, т.к. ранее для этого использовались теги Small и Big.

Свойства font-weight, line-height и font-style

«Font-weight» в Css позволяет задавать нормальное (normal) или жирное (bold) начертание шрифта для того элемента, которому это свойство адресовано. Но на самом деле у него могут быть и другие значения. Их всего четыре буквенных плюс цифровая шкала:

1. Для «font weight» можно использовать значения: normal, bold, bolder (чуть более жирный) или lighter (чуть более тонкий). Причем, реально работают во всех браузерах только значения normal (в него же будет переключать и lighter) и bold (bolder также даст просто жирное начертание).

2. Либо цифровые значения от 100 до 900 с шагом в 100 (от сверхтонкого до сверхжирного). Т.е. по этой шкале шрифт мог использовать много начертаний разной степени жирности. Изначально значение normal соответствовало 400, а значение bold — 700.

   Но на практике пока ни один браузер для «Font-weight» этого не поддерживает в полной мере. А жаль, иногда хочется использовать чуть более жирный или чуть более тонкий фонт, чем тот, что нам могут дать значения «normal» и «bold». Увы и ах, сейчас все цифры менее 400 дадут вам в итоге нормальный, а все что больше — жирный.

Кстати, в одной из последних статей мы рассматривали такое понятие, как Css стили принятые по умолчанию, для оформления элементов в Html коде, если в файле таблиц каскадных стилей для этих элементов ничего не задано. Так вот там, например, для заголовков h2-H6 и тегов логического и физического выделения жирным (strong и B) определен стиль font weight со значением bolder:

Т.е. разработчики стандарта языка стилевой разметки предполагали, что это будет работать и полностью поддерживаться браузерами, но пока что «Font-weight: bolder» интерпретируется большинством браузеров как «bold» и не более того. По умолчанию, свойство «font weight» имеет значение «normal» (посмотреть это можно для любого свойства в спецификации в столбце «Initial value»).

Следующее правило, которое у нас стоит на очереди и которое позволяете задать оформление шрифтов для имеющихся у вас Html элементов, это «Line-height», что означает — высота линии. Смысл этого правила в том, чтобы отодвинуть строчки текста на веб-странице друг от друга по высоте, ибо слепленные друг с другом строки становятся не читаемыми. В полиграфии это называется интер-линьяж.

С помощью «Line-height» можно добавить или уменьшить пространство над и под строкой с текстом, изменяя таким образом всю высоту линии с текстом:

Расстояние от текста (его размер задается через «font-size») откладывается симметрично (вверх и вниз одновременно). По умолчанию Css свойство «line height» для всех Html элементов с текстом будет иметь значение Normal (посмотреть это можно для любого свойства в спецификации в столбце «Initial value»), которое зависит от типа используемого шрифта и вычисляется браузером автоматически.

Например, для Arial высота линии равна примерно 120%, т.е. размер по вертикали всей строки (литеры плюс свободное пространство над и под ней) будет на 120% больше высоты шрифта. А для Times New Roman значение этого свойства по умолчанию будет уже примерно 125%.

Для увеличения и уменьшения расстояния между строками текста можно использовать относительные значения для «Line-height» в виде процентов или «Em». Например, для сильного разрежения строк (увеличения высоты линии) можно написать:

line-height:300%;
или
line-height:3em;

А если написать так:

line-height:30%;
или
line-height:0.3em;

то высота линии станет меньше, чем высота шрифта (font-size), и строки текста попросту наедут друг на друга.

В качестве значений для «Line-height» можно также использовать и любые абсолютные значения, которые принято использовать для шрифтов в таблицах каскадных стилей — пикселы (px), дюймы (in), пункты (pt). Либо можно использовать безразмерный множитель (любое число больше нуля). Например, для задания полуторного интервала между строками можно написать так:

line-height: 1.5;

Следующее Css свойство — это «font-style», с его помощью можно задать наклонный шрифт (курсив). Для него по спецификации предусмотрено три варианта значений: normal, italic и oblique. Но на практике используются только первые два. Причем, значение «normal» является значением по умолчанию.

Когда вы задаете для какого-либо элемента Html кода значение font-style:italic, то браузер будет искать нужную гарнитуру, помеченную как «italic» (т.е. курсивное начертание). Если сами вы зайдете через панель управления на своем компьютере в «шрифты» , то увидите там, что многие из них имеют вариант с «italic» или «курсив» в названии.

Но есть шрифты (например, всем известный Tahoma), у которых разработчиками не было предусмотрено наклонного начертания. Что же сделает в этом случае браузер (если вы в font-style прописали italic)? А он будет сам пытаться наклонить буквы этого шрифта, раз об этом заблаговременно не позаботились его разработчики. Выглядеть это будет, конечно же, хуже.

Ну, а значение oblique для font-style будет вынуждать браузер всегда наклонять шрифт своими средствами, даже если для него имеется курсивное начертание. Выглядеть это будет зачастую просто ужасно, поэтому значение «oblique» практически не используется.

Ну и последнее из рассмотренных сегодня свойств таблиц каскадных стилей — font-variant, которое очень редко используется при верстке с учетом Html и CSS.

По умолчанию в шрифтах начертание строчных букв отличается от заглавных не только размером, но и внешним видом самих литер. А вот «font-variant» позволяет, не изменяя размера строчных букв, сделать их начертание точно таким же, как и начертание заглавных.

Соответственно, у этого свойства имеется всего два значения: normal (по умолчанию) и small-caps (начертание строчных будет таким же, как и у заглавных букв). Для русского языка это свойство используется крайне редко.

Font — сборные правила в языке стилей CSS

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

В большинстве случае порядок значений свойств в сборных правилах не важен, но вот в Font это не так. Здесь важен порядок следования значений и он должен быть именно таким, как показано на приведенном чуть выше скриншоте (кстати, скриншот сделан в snagit).

Т.е. писать нужно будет примерно так:

font: italic small-caps bold 12px/12px verdana;

Но на самом деле, в сборном CSS правиле Font обязательны только два последних значения (font-family и font-size, даже без указания через слеш значения line-height). А какие же значения тогда браузер будет использовать для не указанных в нем свойств? Ну, очевидно, что значения, принятые для них по умолчанию (посмотреть это можно для любого свойства в спецификации в столбце «Initial value»).

А знаете почему обязательно указывать в этом сборном правиле значения для «font-family» и «font-size»? Да потому, что они не имеют как таковых значений по умолчанию (ибо они берутся из настроек браузера пользователя, как мы узнали чуть выше по тексту). Поэтому, если вы не хотите переопределять гарнитуру или размер шрифта, то сборное правило Font использовать не стоит (лучше использовать отдельные).

Т.о. его в основном используют для тегов Html или Body, а для внутренних элементов, у которых гарнитура и размер фонта должны будут наследоваться, чаще всего используют отдельные Css свойства (font-weight, size, style).

Если для внутренних элементов использовать это составное правило, то придется обязательно прописывать гарнитуру и размер. А если вы потом захотите их поменять? Что, будете лазить по всем составным сборным правилам Font в коде? Это неудобно. Поэтому оно и используется в основном только для внешних контейнеров. Но это так, размышления на тему.

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

font:bold 4em/3em arial, "comic sans ms", sans-serif;

Т.е. здесь задается жирное начертание, указывается размер, высота линии и гарнитура. Ну, или еще проще:

font: 10px arial, sans-serif;

Это минимально возможная форма написания, в которой присутствуют только обязательные свойства «font-family» и «font-size». Все остальные будут использоваться браузером со значениями принятыми по умолчанию (normal). Описанный выше синтаксис сборного правила Font взят из спецификации:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Управляем поведением font-face в CSS

Когда вы загружаете шрифт через font-face, браузер решает что отобразить пока шрифт загружается. Браузеры ждут некоторое время, перед тем как решить что делать дальше.

• Chrome и Firefox ждут 3 секунды перед тем, как отобразить текст запасным шрифтом. В дальнейшем, когда шрифт загрузится элементы использующие этот шрифт перерисуются с новым шрифтом. Возможно вы замечали как некоторые страницы “мерцали” при смене шрифта.
• Internet Explorer не ждет трех секунд, а сразу отрисовывает текст: если браузер еще не загрузил шрифт, то используется запасной. После загрузки шрифта элементы перерисуются.
• В Safari нет времени ожидания

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

Временная шкала отображения шрифта

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

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

При перерисовке запасным шрифтом браузер находит первый шрифт, объявленный в font-family, который уже готов к использованию, и отрисовать текст им.

При перерисовке невидимым запасным шрифтом для элемента, браузер ищет шрифт так же как и при “перерисовке запасным шрифтом”. Создает анонимный шрифт с похожими метриками как у выбранного шрифта, но с невидимыми символами, и отрисовывает текст им.

Контролируем отображение шрифта

Свойство font-display определяет как шрифт отобразится, в зависимости от того, когда шрифт загрузят.

‘auto’

Использует поведение браузера по умолчанию. Обычно это поведение ‘block’.

‘block’

Устанавливает короткий период блокировки (3 секунды) и бесконечный период замены.

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

‘swap’

Устанавливает период блокировки в 0 секунд и бесконечный период замены.

Браузер сразу отрисовывает текст безопасным шрифтом и пользователь не видит пустого экрана дожидаясь загрузки шрифта. Но когда шрифт загрузится, он сразу заменится.

‘fallback’

Устанавливает очень короткий период блокировки (100 мс или меньше) и короткий период замены (3 секунды).

Работает так-же как и swap, но если шрифт не загрузился в течении 3-х секунд, то браузер отрисует текст запасным шрифтом. Подходит для текста предназначенного для вдумчивого чтения. В таком случае шрифт играет второстепенную роль. Если он быстро не загрузился, то не стоит отвлекать пользователя мерцанием от замены шрифта.

‘optional’

Устанавливает очень короткий период блокировки (100 мс или меньше) и период замены в 0 секунды.

Похоже на ‘fallback’, но по истечению 3-х секунд, браузер может или прервать загрузку (при медленном интернете) или понизить приоритет загрузки. Когда браузер загрузит шрифт, он все равно продолжит отображать текст запасным шрифтом, но если вы обновите текущую или перейдете на другую страницу, для которой установлено значение ‘optional’ и используется тот-же шрифт, то браузер отрисует текст загруженным шрифтом.

Видео пример работы свойства font-display

Как протестировать

Свойство пока работает только в Chrome Canary. Чтобы посмотреть на его работу нужно:

• Запустить Chrome Canary
• Открыть флаги chrome://flags
• Включить “enable-experimental-web-platform-features”
• Перезапустить Canary

Когда использовать

В Canary это свойство появилось 1 декабря 2015 года, поэтому думаю что в течении 3-6 месяцев оно заработает в стабильной версии. Но уже можно добавить одну строчку CSS кода, чтобы в будущем сайт отображал шрифты выбранным вами способом. Я бы ставил по умолчанию font-display: swap.

Дополнительно

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

• Спецификация
• WebPageText
• Демо

⌘ ⌘ ⌘

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.

Свойство шрифта CSS

❮ Назад Полное руководство по CSS Далее ❯

Пример

Установите некоторые свойства шрифта с помощью сокращенного объявления:

в год {
шрифт: 15px Arial, без засечек;
}

п.б. {
шрифт: курсив малый полужирный 12px/30px Georgia, с засечками;
}

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

Другие примеры «Попробуйте сами» ниже.

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

Свойство шрифта является сокращенным свойством для:

• стиль шрифта
• вариант шрифта
• вес шрифта
• размер шрифта/высота строки
• семейство шрифтов

Требуются значения font-size и font-family. Если одно из других значений отсутствует, используются их значения по умолчанию.

Примечание: Свойство line-height устанавливает расстояние между строками.

Показать демо ❯

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

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Примечание. См. поддержку отдельных браузеров для каждого значения ниже.

Синтаксис CSS

шрифт: стиль шрифта вариант шрифта вес шрифта размер шрифта/высота строки семейство шрифтов |заголовок|значок|меню|окно сообщения|маленький заголовок|строка состояния| первоначальный|наследовать;

Значения свойств

Свойство/значение	Описание	Демо
стиль шрифта	Задает стиль шрифта. Значение по умолчанию — «нормальный»	Демонстрация ❯
вариант шрифта	Указывает вариант шрифта. Значение по умолчанию — «нормальный»	Демонстрация ❯
вес шрифта	Указывает толщину шрифта. Значение по умолчанию — «нормальный»	Демонстрация ❯
размер шрифта/высота строки	Задает размер шрифта и высоту строки. Значение по умолчанию — «нормальный»	Демонстрация ❯
семейство шрифтов	Указывает семейство шрифтов. Значение по умолчанию зависит от браузера	Демонстрация ❯
заголовок	Использует шрифт, используемый элементами управления с заголовками (например, кнопки, выпадающие списки и т.д.)
значок	Использует шрифт, используемый метками значков
меню	Использует шрифты, используемые раскрывающимися меню
ящик сообщений	Использует шрифты, используемые диалоговыми окнами
малый заголовок	Уменьшенная версия шрифта подписи
строка состояния	Использует шрифты, используемые в строке состояния
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Дополнительные примеры

Пример

Демонстрация некоторых других значений свойств шрифта.

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

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

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

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

Уменьшенная версия шрифта заголовка.

Шрифт браузера, используемый в строке состояния.

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

Связанные страницы

Учебник CSS: шрифт CSS

Ссылка HTML DOM: свойство шрифта

❮ Предыдущая Полное руководство по CSS Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Top Tutorials

902 902 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

шрифт | CSS-трюки — CSS-трюки

Свойство font в CSS — это сокращенное свойство, которое объединяет все следующие подсвойства в одном объявлении.

 корпус {
  шрифт: обычный, маленькие, обычный, 16px/1.4, Georgia;
}

/* такой же как:

тело {
  семейство шрифтов: Грузия;
  высота строки: 1,4;
  вес шрифта: нормальный;
  растяжка шрифта: нормальная;
  вариант шрифта: капитель;
  размер шрифта: 16px;
}
 */ 

Имеется семь шрифтов подсвойства, в том числе:

• font-stretch : это свойство устанавливает ширину шрифта, например, сжатый или расширенный.
  • обычный
  • ультраконденсированный
  • сверхконденсированный
  • уплотненный
  • полуконденсированный
  • полурасширенный
  • расширенный
  • расширенный
  • сверхрасширенный
• стиль шрифта : делает текст выделенным курсивом или наклонным.
  • обычный
  • курсив
  • косой
  • унаследовать
• вариант шрифта : изменяет целевой текст на маленькие заглавные буквы.
  • обычный
  • мелкие капитальные
  • унаследовать
• вес шрифта : устанавливает вес или толщину шрифта.
  • обычный
  • полужирный
  • жирнее
  • зажигалка
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
  • унаследовать
• размер шрифта : устанавливает высоту шрифта.
  • хх-маленький
  • х-маленький
  • маленький
  • средний
  • большой
  • большой
  • xx-большой
  • меньше, больше
  • процент
  • унаследовать
• line-height : определяет количество пространства над и под встроенными элементами.
  • обычный
  • номер (множитель размера шрифта)
  • процент
• font-family : определяет шрифт, применяемый к элементу.
  • без засечек
  • с засечками
  • моноширинный
  • курсив
  • фантастика
  • заголовок
  • значок
  • меню
  • ящик сообщений
  • малый заголовок
  • строка состояния
  • "строка"

Сокращение шрифта Gotchas

Свойство font не так прямолинейно, как другие сокращенные свойства, отчасти из-за требований к его синтаксису, а отчасти из-за проблем с наследованием.

Вот краткое изложение некоторых вещей, которые вы должны знать при использовании этого сокращенного свойства.

Обязательные значения

Два значения в сокращении font являются обязательными: font-size и font-family . Если какой-либо из них не включен, все объявление будет проигнорировано.

Кроме того, font-family должен быть объявлен последним из всех значений, иначе, опять же, все объявление будет проигнорировано.

Дополнительные значения

Все пять других значений являются необязательными. Если вы включаете любой из font-style , font-variant и font-weight , они должны стоять перед font-size в объявлении. Если это не так, они будут игнорироваться, а также могут привести к игнорированию обязательных значений.

 корпус {
    шрифт: курсив малый полужирный 44px Georgia, без засечек;
} 

В приведенном выше примере включены три опции. Пока они определены до font-size , их можно размещать в любом порядке.

Включение line-height также необязательно, но может быть объявлено только после font-size и только после косой черты:

 body {
    шрифт: 44px/20px Georgia, без засечек;
} 

В приведенном выше примере высота строки равна «20px». Если вы опустите line-height , вы также должны опустить косую черту, иначе вся строка будет проигнорирована.

Использование font-stretch

Свойство font-stretch является новым в CSS3, поэтому, если оно используется в старом браузере, который не поддерживает font-stretch в сокращении font , это вызовет всю строку игнорировать.

Спецификация рекомендует включить запасной вариант без font-stretch , например:

 body {
    шрифт: курсив малый полужирный 44px Georgia, без засечек; /* запасной вариант для старых браузеров */
    шрифт: сверхсжатый курсив, маленькие заглавные, полужирный, 44 пикселя, Georgia, без засечек;
} 

Наследование для опционалов

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

Например:

 тело {
    шрифт: курсив малый полужирный 44px/50px Georgia, без засечек;
}

п {
    шрифт: 30px Georgia, без засечек;
} 

В этом случае необязательные значения (курсив, прописные и полужирный) помещаются на 9Объявление шрифта 0025 в элементе . Они также будут применяться к большинству дочерних элементов.

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

Ключевые слова для определения системных шрифтов

В дополнение к приведенному выше синтаксису свойство font также позволяет использовать ключевые слова в качестве значений. Их:

• заголовок
• значок
• меню
• ящик сообщений
• малый заголовок
• строка состояния

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

Одно ключевое слово содержит все значение:

 body {
    шрифт: меню;
} 

Другие упомянутые ранее свойства недействительны в сочетании с этими ключевыми словами. Эти ключевые слова могут использоваться только с сокращенным шрифтом и не могут быть объявлены с использованием каких-либо отдельных свойств сокращенного написания.

Связанные свойства

• font-stretch
• вариант шрифта
• стиль шрифта
• вес шрифта
• высота строки
• размер шрифта
• семейство шрифтов
• Специальные шрифты ОС в CSS

Дополнительная информация

• Спецификация W3C
• Статья CSS-Tricks: px – em – % – pt – ключевое слово
• Джонатан Снук: размер шрифта с rem
• Учебник по свойству сокращенного шрифта CSS
• Шпаргалка по свойствам сокращенных шрифтов CSS

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

Свойства шрифта

• Семейство шрифтов
• Стиль шрифта
• Вариант шрифта
• Толщина шрифта
• Размер шрифта
• Шрифт

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

Пример объявления семейства шрифтов может выглядеть следующим образом:

 P { семейство шрифтов: «Учебник нового века», Times, serif } 

Обратите внимание, что первые два задания относятся к определенным шрифтам: New Century Schoolbook и Times. Однако, поскольку оба они являются шрифтами serif , универсальное семейство шрифтов указано в качестве резервного на тот случай, если в системе нет ни одного из них, но есть другой шрифт serif , отвечающий требованиям.

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

Семейство шрифтов также может быть указано вместе со шрифтом свойство.

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

 h2 {стиль шрифта: наклонный}
P {стиль шрифта: обычный} 

Свойство font-variant определяет, должен ли шрифт отображаться в обычном или маленьком заглавном . Маленькие заглавные отображаются, когда все буквы слова написаны заглавными, а прописные символы немного крупнее строчных. Более поздние версии CSS могут поддерживать дополнительные варианты, такие как сжатые, расширенные, маленькие заглавные цифры или другие пользовательские варианты. Примером назначения варианта шрифта может быть:

 SPAN {вариант шрифта: маленькие прописные} 

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

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

• 500 можно заменить на 400 и наоборот
• 100 — 300 может быть отнесен к следующему более легкому весу, если таковой имеется, или к следующему более темному весу в противном случае
• 600 — 900 может быть отнесен к следующему более темному весу, если таковой имеется, или к следующему более легкому весу в противном случае

Некоторые примеры шрифтов могут быть такими:

 h2 { вес шрифта: 800 }
P {начертание шрифта: нормальный} 

Свойство font-size используется для изменения размера отображаемого шрифта. Абсолютная длина (с использованием таких единиц, как pt, и в ) следует использовать с осторожностью из-за их слабости в адаптации к различным средам просмотра. Шрифты с абсолютной длиной могут очень легко оказаться слишком маленькими или слишком большими для пользователя.

Некоторые примеры назначений размера:

 h2 {размер шрифта: большой}
P {размер шрифта: 12pt}
LI {размер шрифта: 90%}
СИЛЬНЫЙ {размер шрифта: больше} 

Авторы должны знать, что Microsoft Internet Explorer 3.x неправильно интерпретирует единицы em и ex как пиксели, что может легко сделать текст, использующий эти единицы, нечитаемым. Браузер также неправильно применяет процентные значения относительно размера шрифта по умолчанию для селектора, а не относительно размера шрифта родительского элемента. Это делает такие правила, как

 h2 { font-size: 200% } 

опасно тем, что размер будет в два раза больше размера шрифта IE по умолчанию для заголовков первого уровня, а не в два раза больше размера шрифта родительского элемента. В этом случае BODY , скорее всего, будет родительским элементом, и он, вероятно, будет определять размер шрифта medium , тогда как размер шрифта заголовка первого уровня по умолчанию, установленный IE, вероятно, будет считаться xx-large .

Учитывая эти ошибки, авторы должны соблюдать осторожность при использовании процентных значений для font-size , и, вероятно, следует избегать em и ex единиц для этого свойства.

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

 P { шрифт: жирный курсив 12pt/14pt Times, serif } 

определяет абзацы, выделенные полужирным и курсивным шрифтом Times или шрифтом с засечками размером 12 пунктов и высотой строки 14 пунктов.

Индекс CSS ~ Структура CSS ~ CSS-свойства

Дом, Форумы, Ссылка, Инструменты, Часто задаваемые вопросы, Статьи, Дизайн, Ссылки

Copyright © 1996 — 2006. Все права защищены.

Основные свойства CSS

Назад на страницу третьего класса »

Вот некоторые основные свойства CSS, с которыми можно работать.

• Свойства текста
• Список свойств
• Свойства границы
• Свойства шрифта

Свойства текста

Для получения дополнительной информации посетите страницу w3schools. com в CSS Text.

Список свойств

Для получения дополнительной информации посетите страницу w3schools. com в списках CSS

Свойства границы

Для получения дополнительной информации посетите страницу w3schools. com на CSS Borders

Свойства шрифта

Недвижимость	Описание	Значения
шрифт	Задает все свойства шрифта в одном объявлении	стиль шрифта, вариант шрифта, вес шрифта, размер шрифта/высота строки, семейство шрифтов, подпись, значок, меню, окно сообщения, маленький заголовок, статус бар, унаследовать
семейство шрифтов	Указывает семейство шрифтов для текста	фамилия, родовое семейство, унаследовать
размер шрифта	Задает размер шрифта текста	xx-маленький, х-маленький, маленький, средний, большой, х-большой, хх-большой, меньше, больше , длина, %, унаследовать
стиль шрифта	Задает стиль шрифта для текста	нормальный, курсив, косой, унаследовать
вариант шрифта	Указывает, должен ли текст отображаться шрифтом с маленькими заглавными буквами.	нормальный, маленькие заглавные буквы, унаследовать
вес шрифта	Указывает толщину шрифта	нормальный, смелый, смелее, зажигалка, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit Осторожно, многие из них не поддерживаются!

Для получения дополнительной информации посетите страницу w3schools.com, посвященную шрифту CSS

Назад на страницу третьего класса »

Шрифт CSS Свойство

❮ Пред. Следующий ❯

Свойство font является сокращенным свойством для следующих свойств:

• стиль шрифта
• вариант шрифта
• вес шрифта
• размер шрифта
• высота строки
• семейство шрифтов

Вы можете установить все свойства в следующем порядке: 1. стиль шрифта, 2. вариант шрифта, 3. вес шрифта, 4. размер шрифта/высота строки, 5. семейство шрифтов. Свойство line-height используется для установки расстояния между строками.

Требуется определить значения свойств font-size и font-family. Если одно из значений отсутствует, используется его значение по умолчанию.

Все отдельные значения свойства font-size, которые не указаны, будут установлены в исходное значение.

При использовании этого сокращенного свойства вы должны знать некоторые важные вещи о нем:

Обязательные значения

Значения «font-size» и «font-family» считаются обязательными. Все объявление будет проигнорировано, если одно из этих значений отсутствует.

Дополнительные значения

Остальные пять значений являются необязательными. В случае использования одного из этих значений учтите, что они должны стоять перед значением «font-size» в объявлении, иначе они будут проигнорированы.

Свойства шрифта и font-stretch

Свойство font-stretch является новым в CSS3, и если вы используете его в старом браузере, вся строка будет проигнорирована.

Наследование необязательных значений

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

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

• заголовок
• значок
• меню
• ящик сообщений
• малый заголовок
• строка состояния

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

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

 шрифт: стиль шрифта вариант шрифта вес шрифта размер шрифта/высота строки семейство шрифтов | подпись | значок | меню | окно сообщений | мелкий заголовок | строка состояния | начальная | наследовать; 

Пример свойства шрифта:

 

  <голова>
    
    <стиль>
      . шрифт {
        шрифт: курсив обычный полужирный 1em/140% "Lucida Grande", без засечек;
      }
    
  
  <тело>
     
Пример свойства шрифта
 
    
Это обычный абзац.
    
Это абзац с указанным значением шрифта.
  
 

Попробуй сам »

Результат

Пример свойства шрифта, определенного для курсивных шрифтов:

 

  <голова>
    
    <стиль>
      .шрифт1 {
        шрифт: курсив, заглавные, полужирный, 20px/1 курсив;
      }
      .шрифт2 {
        шрифт: курсив 1.2em "Fira Sans", с засечками;
      }
      .font3 {
        шрифт: 1.2em "Fira Sans", без засечек;
      }
      .font4 {
        шрифт: прописные полужирный 28px/1.5 без засечек;
      }
      .font5 {
        шрифт: подпись;
        /* шрифт: меню | значок | окно сообщений | мелкий заголовок | статус бар;*/
      }
    
  
  <тело>
     
Пример свойства шрифта
 
    
Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста. 
    
Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста.
    
Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста.
    
Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста.
    
Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста.
  
 

Попробуй сам »

Пример свойства шрифта, где размер шрифта, толщина шрифта и высота строки являются анимируемыми:

 

  <голова>
    
    <стиль>
      .элемент {
        граница: 2px сплошная #666;
        ширина: 350 пикселей;
        высота: 150 пикселей;
        шрифт: 20px "Fira Sans", без засечек;
        -webkit-анимация: элемент 4s бесконечен;
        анимация: элемент 4s бесконечен;
      }
      /* Хром, Сафари, Опера */
      Элемент @-webkit-keyframes {
        50% {
          шрифт: 50px полужирный;
        }
      }
      /* Стандартный синтаксис */
      элемент @keyframes {
        50% {
          шрифт: 50px полужирный;
        }
      }
    
  
  <тело>
     
Пример анимации шрифта
 
    <дел>
      
Некоторый абзац