Css жирный шрифт: font-weight | CSS | WebReference

Жирность текста на CSS | Трепачёв Дмитрий

В данном уроке мы с вами изучим свойство font-weight, которое позволяет сделать текст жирным или наоборот — отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует указать значение bold, а чтобы отменить жирность — значение normal.

Это свойство работает аналогично тегу b, который мы с вами уже разобрали. Разница в том, что через CSS управлять жирностью гораздо удобнее — я могу заставить все абзацы стать жирными, а все заголовки — нежирными, сделав всего пару записей в CSS файле.

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

В следующем примере мы сделаем все абзацы жирными, а все заголовки

<h3>Заголовок</h3> <p> абзац с текстом </p> h3 { font-weight: normal; } p { font-weight: bold; }

:

Скопируйте следующий HTML код себе на страницу:

<table border="1"> <tr> <th>Имя</th> <th>Фамилия</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>Иванов</td> <td>200$</td> </tr> <tr> <td>Николай</td> <td>Петров</td> <td>300$</td> </tr> </table>

Установите таблице ширину в 500px, а высоту в 300px. Сделайте ячейки td жирными и по центру, а ячейки th — нежирными.

Узнаем как изготовить в CSS жирный шрифт?

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

Присваивание

Жирный шрифт CSS присваиваете с помощью простого правила: font-weight. В качестве значения можно указать различные комбинации. Например, можно написать свойство «font-weight: bold», что означает полужирное начертание. В качестве стандартного значения используется запись «normal». Помимо ключевых слов можно использовать обычные цифры. Условные единицы колеблются от 100 до 900, где 400 соответствует команде «normal». А это означает, что если установить значение меньше 400, то шрифт будет терять свою насыщенность, а если более, то приобретет жирный вид. Это позволяет производить ручную настройку начертания.

В CSS жирный шрифт может присваиваться, исходя из родительского элемента. В каскадных таблицах существует две команды («bolder» и «lighter»), которые могут увеличивать или уменьшать насыщенность начертания. Значения будут изменяться в зависимости от родительского элемента. Свойство «font-weight» может записываться в краткой форме – «font», куда можно записать все характеристики шрифта.

Цель

Присваивать такой CSS-шрифт можно любому элементу HTML или XHTML. Эффект будет виден только в том случае, если тег содержит в себе текст. В HTML существует аналог свойству «font-weight». Если поместить текст между тегами <strong>, то он станет более насыщенным. Его свойство полностью идентично значению «bold». Некоторые разработчики не видят разницы между тегом <strong> и CSS жирный шрифт. А различия есть. Тег имеет свою собственную смысловую нагрузку, используется для действительно важной информации. А CSS-свойство – это всего лишь декоративное значение, употребляемое для украшения текста. Пускай данная разница и не ощущается при чтении, но, как советует консорциум всемирной паутины, все должно стоять на своих местах. Такой порядок в коде увеличит жизнь вашим страницам. Ведь не за горами то время, когда браузеры научатся использовать другой способ визуализации текста, где будет выделяться смысловое и декоративное значение. Не стоит об этом забывать при создании своих страниц.

Заключение

Существующий в CSS жирный шрифт позволяет уменьшить исходный код страницы. Ведь нет необходимости использоваться тег <strong>. Достаточно просто заключить необходимый текст в определенный класс. А если нужно отменить жирное начертание, то нужно всего лишь исправить один файл с каскадными таблицами. Но не забывайте, что нельзя злоупотреблять данным свойством, так как излишнее использование различных декоративных приемов может испортить текст. Желательно применять жирный шрифт только тогда, когда это действительно нужно, например, для выделения заголовков или названия определенного раздела.

CSS — работаем со шрифтом — Как создать сайт

В данной статье рассмотрим CSS-свойства, форматирующие шрифт контента сайта.

Всего их существует 5 штук, относятся они к семейству font:
1. font-family — отвечает за имя шрифта
2. font-size — отвечает за размер шрифта
3. font-style — отвечает за стиль начертания шрифта
4. font-variant — отвечает за возможность создания капители
5. font-weight — отвечает за толщину шрифта

Рассмотрим эти CSS-свойства и их значения, с помощью примеров :

font-family

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

Назначим элементам страницы, например абзацам p, имя шрифта 'Times New Roman':

<style>
 p {
  font-family: 'Times New Roman';
 }
</style>
<p>
 Капитель - это когда строчные буквы выглядят как заглавные,
 но размером меньше их.</p>

Результат:

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

font-size

font-size — CSS-свойство, назначает размер шрифту, в качестве значений принимает единицы измерения CSS.

Присвоим абзацам страницы, размер шрифта 22px.

<style>
 p {
  font-family: 'Times New Roman';
  font-size: '22px';
 }
</style>
<p>
 Капитель - это когда строчные буквы выглядят как заглавные,
 но размером меньше их.</p>

Результат:

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

font-style

font-style — CSS-свойство, назначает стиль шрифту, в качестве значений принимает следующие ключевые слова:

• normal — обычное начертание
• italic — курсивное начертание
• oblique — наклонное начертание

Изначально вам может показаться, что значения italic и oblique одинаковы и что оба они просто делают шрифт наклонным. Однако между ними, всё же имеется разница.

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

<style>
 p {
  font-family: 'Times New Roman';
  font-size: '22px';
  font-style: italic;
 }
</style>
<p>
 Капитель - это когда строчные буквы выглядят как заглавные,
 но размером меньше их.</p>

Результат:

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

font-variant

font-variant — CSS-свойство, отвечает за создание капители. Капитель — это когда строчные буквы выглядят как заглавные (прописные), но размером меньше их, в качестве значений принимает следующие ключевые слова: normal или small-caps.

<style>
 p {
  font-family: 'Times New Roman';
  font-size: '22px';
  font-style: italic;
  font-variant: small-caps;
 }
</style>
<p>
 Капитель - это когда строчные буквы выглядят как заглавные,
 но размером меньше их.</p>

Результат:

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

font-weight

<style>
 p {
  font-family: 'Times New Roman';
  font-size: '22px';
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
 }
</style>
<p>
 Капитель - это когда строчные буквы выглядят как заглавные,
 но размером меньше их.</p>

Результат:

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

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 25 октября 2014

Навигация по записям

CSS шрифты (шрифт)

Свойства CSS шрифта определить шрифт, жирный, размер, стиль текста.

Разница между засечками и без засечек шрифты между

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

CSS шрифт

В CSS существует два типа имен семейств шрифтов:

• Родовой семейство шрифтов — имеет аналогичные комбинации системы внешний вид шрифта (например, «засечками» или «MONOSPACE»)
• Конкретные семейство шрифтов — специфический семейство шрифтов (например, «Таймс» или «Курьер»)

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

семейство шрифтов свойство семейства шрифта текста.

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

Примечание: Если имя семейства шрифтов больше , чем одно слово, оно должно быть заключено в кавычки, например, Font Family: «Times New Roman» .

Множественный семейство шрифтов задается разделенных запятыми:

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

стиль шрифта

Главным образом атрибут определяет стиль шрифта курсива.

Это свойство имеет три значения:

• Normal — нормальный текстовый дисплей
• Курсив — текст отображается курсивом
• Асимметричный характер — одна сторона склонна к тексту (и очень похож на курсив, но менее поддерживается)

примеров

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Размер шрифта

Размер имущества размер шрифта текста.

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

Обязательно используйте правильный HTML-теги в <h2> — <h6> представляет заголовок и <р> представляет абзац:

Шрифт значение размера может быть абсолютным или относительным размером.

Абсолютный размер:

• Установите текст указанного размера
• Мы не можем изменить размер текста во всех браузерах
• Определить физический размер выходного абсолютного размера полезного

Относительный размер:

• Что касается окружающих элементов, чтобы установить размер
• Это позволяет пользователю изменять размер текста в браузере

Если вы не укажете размер шрифта, размер по умолчанию, а также обычные текстовые пункты, это 16 пикселей (16px = 1em).

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

Установка размера текста с пикселей, дает вам полный контроль над размер текста:

В приведенном выше примере 9, Firefox, Chrome, Opera, Safari и, настроить размер текста путем расширения браузера Internet Explorer.

Хотя вы можете настроить размер текста с помощью инструмента масштабирования браузера, однако, эта корректировка является вся страница, а не только текст

Используйте EM, чтобы установить размер шрифта

Для того чтобы избежать Internet Explorer не может быть отрегулирована в тексте, многие разработчики используют EM единиц, а не пикселей.

блок эм-размер рекомендуется W3C.

1em равен текущему размеру шрифта. В браузере по умолчанию размер текста 16px.

Поэтому, по умолчанию размер 1em является 16px. Следующая формула может быть преобразована в пикселах ЕМ: ПВ / 16 = EM

примеров

h2 {font-size:2.5em;} /* 40px/16=2.5em */
h3 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

В приведенном выше примере, размер ЕМ текста такой же, как и в предыдущем примере в пикселях. Тем не менее, если вы используете EM единиц, вы можете настроить размер текста во всех браузерах.

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

Использование комбинации процентов и EM

Во всех браузерах решений, набор <тело> элемент размер шрифта по умолчанию в процентах:

примеров

body {font-size:100%;}
h2 {font-size:2.5em;}
h3 {font-size:1.875em;}
p {font-size:0.875em;}

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

Другие примеры

Установить шрифт полужирный
Этот пример показывает, как установить шрифт жирным шрифтом.

Вы можете установить изменение шрифта
Этот пример показывает, как установить изменения шрифта.

Все свойства шрифта в одной декларации
Этот пример демонстрирует, как использовать сокращённое свойство для установки свойств шрифта в одной декларации.

Все свойства CSS шрифта

Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSS

1. Font-family — задаем тип и гарнитуру шрифта в CSS
2. Font-size — задаем в CSS размер для шрифта
3. Свойства font-weight, line-height и font-style
4. Сборные правила Font в языке стилей CSS

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня будет очередная статья, вносящая свой вклад в составление справочника по Css.

Речь в ней пойдет уже не о селекторах, а о свойствах таблиц каскадных стилей, а именно о свойствах, которые используются для оформления шрифтов в Html коде: font-family (weight, size, style, variant) и line-height. Постараюсь при этом максимально наглядно показать их работу, рассказать о синтаксисе и способах использования.

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

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

CSS шрифты

На заре Интернета у вас было только несколько шрифтов, из которых вы могли выбирать.

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

За прошедшие годы CSS приобрел много хороших возможностей в отношении шрифтов.

Вfontсвойство — это сокращение для ряда свойств:

• font-family
• font-weight
• font-stretch
• font-style
• font-size

Давайте посмотрим на каждого из них, а затем мы рассмотримfont.

Затем мы поговорим о том, как загружать пользовательские шрифты, используя@importили же@font-face, или загрузив таблицу стилей шрифта.

Устанавливает шрифтсемьячто элемент будет использовать.

Почему «семья»? Потому что то, что мы знаем как шрифт, на самом деле состоит из нескольких подшрифтов. которые обеспечивают необходимый нам стиль (жирный, курсив, светлый ..).

Вот пример из приложения Font Book для моего Mac — семейство шрифтов Fira Code содержит несколько выделенных шрифтов:

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

body {
  font-family: Helvetica;
}

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

body {
  font-family: Helvetica, Arial;
}

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

Мы делим их на шрифты с засечками, без засечек и моноширинные. Вот список самых популярных из них:

Засечки— Грузия — Палатино — Times New Roman — Times

Без засечек— Arial — Helvetica — Verdana — Geneva — Tahoma — Lucida Grande — Impact — Trebuchet MS — Arial Black

Моноширинный— Courier New — Courier — Lucida Console — Монако

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

Вы также можете использовать общие имена:

• sans-serifшрифт без лигатур
• serifшрифт с лигатурами
• monospaceшрифт, особенно подходящий для кода
• cursiveиспользуется для имитации рукописных произведений
• fantasyИмя говорит само за себя

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

body {
  font-family: Helvetica, Arial, sans-serif;
}

Это свойство устанавливает ширину шрифта. Вы можете использовать эти предопределенные значения:

• нормальный
• смелый
• жирнее (относительно родительского элемента)
• светлее (относительно родительского элемента)

Или используя числовые ключевые слова

• 100
• 200
• 300
• 400, сопоставлен сnormal
• 500
• 600
• 700 сопоставлено сbold
• 800
• 900

где 100 — самый светлый шрифт, а 900 — самый жирный.

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

Позволяет выбрать узкую или широкую грань шрифта, если таковая имеется.

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

Допустимые значения: от более узкого к более широкому:

• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• normal
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

Позволяет применить к шрифту курсив:

p {
  font-style: italic;
}

Это свойство также допускает значенияobliqueиnormal. Существует очень небольшая разница между использованиемitalicиoblique. Первый вариант для меня проще, поскольку HTML уже предлагаетiэлемент, что означает курсив.

Это свойство используется для определения размера шрифтов.

Вы можете передавать 2 вида значений:

1. значение длины, напримерpx,em,remи т. д. или в процентах
2. ключевое слово с предопределенным значением

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

• xx-маленький
• x-small
• маленький
• средний
• большой
• x-большой
• xx-большой
• меньше (относительно родительского элемента)
• больше (относительно родительского элемента)

Использование:

p {
  font-size: 20px;
}
li {
font-size: medium;
}

Это свойство изначально использовалось для изменения текста на маленькие заглавные буквы, и у него было всего 3 допустимых значения:

• normal
• inherit
• small-caps

Маленькие заглавные буквы означают, что текст отображается «меньшими заглавными буквами» рядом с прописными буквами.

ВfontСвойство позволяет применять разные свойства шрифта в одном, уменьшая беспорядок.

Мы должны установить как минимум 2 свойства,font-sizeиfont-family, остальные необязательны:

body {
  font: 20px Helvetica;
}

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

Это порядок:

font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;

Пример:

body {
  font: italic bold 20px Helvetica;
}
section {
font: small-caps bold 20px Helvetica;
}

Загрузка пользовательских шрифтов с помощью

@font-faceпозволяет добавить новое имя семейства шрифтов и сопоставить его с файлом, содержащим шрифт.

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

Мы можем добавить@font-faceобъявления прямо в наш CSS или ссылку на CSS, предназначенный для импорта шрифта.

В нашем файле CSS мы также можем использовать@importчтобы загрузить этот файл CSS.

А@font-faceобъявление содержит несколько свойств, которые мы используем для определения шрифта, в том числеsrc, URI (один или несколько URI) шрифта. Это соответствует политике одного и того же происхождения, что означает, что шрифты могут быть загружены только из текущего источника (домен + порт + протокол).

Шрифты обычно в форматах

• woff(Формат открытого веб-шрифта)
• woff2(Формат открытых веб-шрифтов 2.0)
• eot(Встроенный открытый тип)
• otf(Шрифт OpenType)
• ttf(Шрифт TrueType)

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

• font-family
• font-weight
• font-style
• font-stretch

Примечание о производительности

Конечно, загрузка шрифта влияет на производительность, что вы должны учитывать при создании дизайна своей страницы.

Больше руководств по css:

Учебник CSS — Урок 3 — Свойства background-color, font-style, font-weight, text-align, text-decoration, text-transform.

За время существования HTML придумали много тегов и теперь с повсеместным применением css от некоторых придется отказаться, среди таких тегов <font>, <b>, <i>, <center>. Позже мы рассмотрим другие «запрещенные» теги. Также эти свойства помогут вам избежать лишнего кода в HTML-коде страницы и вынести его в css-файлы.

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

Итак, первое свойство в этом уроке background-color.

Background-color

 Это свойство мы можем использовать не только для задания фона блоков, но и обычного текста и ссылок. Например так:

span{
  background-color: yellow;
}

Или для ссылки:

a{
  background-color: blue;
}

Цвета как и в свойстве color можно задавать и цифрами, например так #ff0000 (что будет красным цветом).

Font-style

Возможно вам уже попадались теги <b> или <strong> (выделение жирным), <i> (курсив), font («злой» тег, делает что угодно с текстом). И что не использовать кучу этих и других тегов, придумали свойство css font-style. Среди распространенных значений этого свойства можно выделить следующие:

p{
  font-style: italic; /* курсив */
}

Тем самым мы заменяем тег <i> на свойство font-style со значением italic.

Font-weight

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

body{
  font-weight: normal; /* обычный шрифт */
}
 
p{
 font-weight: 400; /* обычный шрифт */
}
 
span{
  font-weight: 700; /* жирный шрифт */
}
 
a{
  font-weight: bold; /* жирный шрифт */
}

Для свойства font-weight возможны следующие значения 400 или normal — это нормальный шрифт и 700 или bold жирный шрифт.

Text-align

Свойство text-align пришло на смену тегу <center> и HTML атрибуту align. Использовать text-align можно так:

body{
  text-align: left; /* по левому краю */
}
 
p{
  text-align: center; /* по ширине */
}
 
span{
  text-align: right; /* по правому краю */
}
 
div{
  text-align: center; /* по центру */
}

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

Text-decoration

Также вместо тегов <strike> (зачеркивание), <u> (подчеркивание) мы можем использовать теперь в css свойство text-decoration:

.underline{
  text-decoration: underline; /* подчеркивание */
}
 
.line-through{
  text-decoration: line-through; /* перечеркивание */
}

Text-transform

Еще одно иногда нужное CSS свойство text-transform. Оно позволяет написать все буквы прописными или наоборот все буквы маленькие.

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

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

Пример

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

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

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

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

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

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

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

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

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

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

Синтаксис CSS

font: font-style font-variant font-weight font-size / line-height семейство шрифтов | caption | icon | menu | message-box | small-caption | status-bar | initial | наследовать;

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

Другие примеры

Пример

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

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

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

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

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

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

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

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

CSS: Шрифт CSS

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

Сделать шрифт жирным в CSS: лучшие способы

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

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

Но не волнуйтесь — к концу этого поста вы будете знать все, что вам нужно знать! Начнем …

Семантика полужирного текста HTML

Прежде чем мы углубимся в CSS, нам нужно сделать небольшой крюк в мир семантики HTML.В конце концов, вы должны применить свой CSS-код к чему-то .

Для выделения шрифтов полужирным доступны два специальных элемента — и . У них немного другое использование:

• используется для обозначения визуального стиля . Вы используете , чтобы привлечь внимание читателей к чему-то, что не имеет большего значения для другого текста вокруг него. Например, чтобы выделить в статье названия продуктов или людей.Другой пример — те сайты, которые всегда выделяют первое предложение статьи жирным шрифтом — это еще одно использование b .
• используется для обозначения , означающего . Вы используете , чтобы выделить часть текста, которая имеет более высокую важность или срочность, чем остальной. Это может быть предупреждение или важная часть сообщения.

Вот пример. Возьмите следующее сообщение:

«Мы обнаружили две интересные цели в ледяном мире Хот: Хана Соло, разыскиваемого за контрабанду украденных товаров и за различные другие серьезные преступления, и Люка Скайуокера, который является первой целью Империи.Обе цели считаются очень опасными — подходите с особой осторожностью ».

Имена «Хан Соло» и «Люк Скайуокер» были бы хорошими кандидатами для тега b . Любой штурмовик, просматривающий это сообщение, может быстро и легко определить имена своих целей.

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

Ваша окончательная разметка может выглядеть так:

«Мы обнаружили две представляющие интерес цели в ледяном мире Хот: Хан Соло , который разыскивается за контрабанду украденных товаров и за различные другие серьезные преступления, и Люк Скайуокер , который является приоритетной целью 1 Империи. . Обе цели считаются очень опасными — подходите с особой осторожностью. «

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

Почему эти два подхода к выделению жирных шрифтов?

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

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

Насколько я могу судить, используя свой Google Fu, программы чтения с экрана пока не делают это хорошо и постоянно. Многие из них просто читают разделы b и strong , как и любой другой текст.Однако технологии становятся все лучше и лучше.

Хорошо, теперь, когда вы знаете, какие теги использовать и как лучше их использовать, давайте перейдем к CSS-части уравнения.

Создание жирных шрифтов в CSS

Используемое свойство CSS — font-weight , которое принимает следующие значения:

• полужирный
• нормальный
• смелее
• зажигалка
• <номер> — мы выясним, какие числа вы можете использовать ниже

Значение по умолчанию — нормальный , который является начертанием шрифта текста, который вы читаете прямо сейчас.Если вы хотите сделать свой шрифт жирным в CSS, вы просто присваиваете font-weight значение bold :

  .keyword {
 font-weight: жирный; 
}  

Во многих случаях это все, что вам нужно. Фактически, если вы используете b или strong , вам даже не придется этого делать, потому что у них обоих по умолчанию применяется шрифт font-weight: bold !

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

Для большинства шрифтов у вас есть где-то от 1 до 9 различных весов для игры, которые помечены с шагом 100, от 100 до 900. Они соответствуют спецификациям OpenType, разработанным Microsoft и Adobe — возможно, вы знакомы с некоторыми из этих терминов:

См. Перо на CodePen.

Как видите, font-weight: 400; совпадает с font-weight: normal; и font-weight: 700; совпадает с font-weight: bold; .

Обратите внимание на строку @import вверху:

  @import url ('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');  

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

Резервные варианты толщины шрифта

Но вам может быть интересно, что произойдет, если вы установите font-weight на значение, которое вы не импортировали? Это сломает ваш сайт или приведет к ошибке?

Нет — браузер просто вернется к установленному у вас весу шрифта.Многие шрифты не имеют веса, охватывающего весь диапазон от 100 до 900. Скажем, вы используете Arial, который по умолчанию имеет только 400 (нормальный) и 700 (жирный). Вот что происходит с этим шрифтом:

См. Перо на CodePen.

Браузер просто переходит к ближайшему доступному весу.

Относительный вес шрифта в CSS

Помимо установки явного веса шрифта, вы можете установить вес шрифта относительно родительского элемента:

 .жирнее {
 font-weight: жирнее; 
} 
 .lighter {
 font-weight: светлее; 
}  

При применении относительного веса учитываются только 4 значения: 100 , 400 , 700 и 900 . Вот что вы получите, если примените более светлый и более жирный к разным родительским font-weight :

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

См. Перо на CodePen.

Что лучше — явный вес шрифта или относительный вес?

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

Некоторые думают, что смелее — более безопасный вариант.Например, представьте, что у вас установлен вес шрифта p на 400 , а для вашего b — font-weight: 700; . Что произойдет, если придет другой разработчик и изменит начертание шрифта p , скажем, на 600 ? Теперь вы не увидите большой разницы между обычным и жирным шрифтом. Однако, если вы установили b на font-weight: bolder; , жирный текст автоматически увеличится до font-weight: 900; .

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

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

Изменяемый вес шрифта в CSS

Некоторые из вас могут подумать: «Эй, мне недостаточно 9 различных шрифтов. Я хочу 1000!»

Что ж, тебе повезло, друг мой! Особый вид шрифтов, известный как вариативные шрифты, на самом деле поддерживает вес от 1 до 1000. Таким образом, вы можете сделать что-то вроде этого:

  вес шрифта: 371;  

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

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

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

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

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

Как лучше всего выбрать толщину шрифта?

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

Например, взгляните на этот пример с Монсеррат (текст просто заполнитель от JeffSum, он ничего не значит). Здесь используются 400 и 700 , значения по умолчанию:

  
 Глава 1.  Правильное использование сильного элемента  

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

  
  Примечание:  не используйте & lt; strong & gt; просто чтобы сделать слово  жирным . Вместо этого используйте & lt; b & gt; тег или тег & lt; span & gt; элемент и CSS, чтобы  сделать шрифт полужирным . 
 
  Используйте & lt; strong & gt; для обозначения важности, срочности или серьезности. 
   

  
  Опасно: купание в этой области запрещено.  Не входите в воду.   
  

math, math [mode = "inline"] {
  дисплей: встроенный;
  семейство шрифтов: CMSY10, CMEX10, Symbol, Times;
  стиль шрифта: нормальный;
}

math [mode = "display"] {
  дисплей: блок;
  выравнивание текста: центр;
  семейство шрифтов: CMSY10, CMEX10, Symbol, Times;
  стиль шрифта: нормальный;
}

@media screen {/ * скрыть от старых браузеров * /


/ * Правила, касающиеся различных значений атрибута "mathvariant": * /

math *. [mathvariant = "normal"] {
  семейство шрифтов: "Times New Roman", Courier, Garamond, serif;
  шрифт: нормальный;
  стиль шрифта: нормальный;
}

математика *.[mathvariant = "жирный"] {
  семейство шрифтов: "Times New Roman", Courier, Garamond, serif;
  font-weight: жирный;
  стиль шрифта: нормальный;
}

math *. [mathvariant = "italic"] {
  семейство шрифтов: "Times New Roman", Courier, Garamond, serif;
  шрифт: нормальный;
  стиль шрифта: курсив;
}

math *. [mathvariant = "bold-italic"] {
  семейство шрифтов: "Times New Roman", Courier, Garamond, serif;
  font-weight: жирный;
  стиль шрифта: курсив;
}

math *. [mathvariant = "double-strike"] {
  семейство шрифтов: msbm;
  шрифт: нормальный;
  стиль шрифта: нормальный;
}

математика *.[mathvariant = "script"] {
  семейство шрифтов: eusb;
  шрифт: нормальный;
  стиль шрифта: нормальный;
}

math *. [mathvariant = "bold-script"] {
  семейство шрифтов: eusb;
  font-weight: жирный;
  стиль шрифта: нормальный;
}

math *. [mathvariant = "fraktur"] {
  семейство шрифтов: eufm;
  шрифт: нормальный;
  стиль шрифта: нормальный;
}

math *. [mathvariant = "bold-fraktur"] {
  семейство шрифтов: eufm;
  font-weight: жирный;
  стиль шрифта: курсив;
}

math *. [mathvariant = "sans-serif"] {
  семейство шрифтов: Arial, "Lucida Sans Unicode", Verdana, без засечек;
  шрифт: нормальный;
  стиль шрифта: нормальный;
}

математика *.[mathvariant = "bold-sans-serif"] {
  семейство шрифтов: Arial, "Lucida Sans Unicode", Verdana, без засечек;
  font-weight: жирный;
  стиль шрифта: нормальный;
}

math *. [mathvariant = "sans-serif-italic"] {
  семейство шрифтов: Arial, "Lucida Sans Unicode", Verdana, без засечек;
  шрифт: нормальный;
  стиль шрифта: курсив;
}

math *. [mathvariant = "sans-serif-bold-italic"] {
  семейство шрифтов: Arial, "Lucida Sans Unicode", Verdana, без засечек;
  font-weight: жирный;
  стиль шрифта: курсив;
}

math *. [mathvariant = "monospace"] {
  семейство шрифтов: моноширинный
}


/ * Правила, касающиеся атрибута "mathsize" * /

математика *.[mathsize = "small"] {
  размер шрифта: 80%
}

math *. [mathsize = "normal"] {
/ * font-size: 100% - в этом нет необходимости * /
}

math *. [mathsize = "big"] {
  размер шрифта: 125%
}

/ * Устанавливаем значения размера для "базовых" потомков скрипта и ограничиваем схему до
  отличить их от сценария или ограничить детей:
* /

msub> *: первый ребенок [mathsize = "big"],
msup> *: первый ребенок [mathsize = "big"],
msubsup> *: первый ребенок [mathsize = "большой"],
munder> *: first-child [mathsize = "big"],
mover> *: first-child [mathsize = "big"],
munderover> *: first-child [mathsize = "большой"],
mmultiscripts> *: first-child [mathsize = "big"],
mroot> *: first-child [mathsize = "big"] {
  размер шрифта: 125%
}

msub> *: первый ребенок [mathsize = "small"],
msup> *: первый ребенок [mathsize = "small"],
msubsup> *: первый ребенок [mathsize = "small"],
munder> *: first-child [mathsize = "small"],
mover> *: first-child [mathsize = "small"],
munderover> *: first-child [mathsize = "small"],
mmultiscripts> *: first-child [mathsize = "small"],
mroot> *: first-child [mathsize = "small"] {
  размер шрифта: 80%
}

msub> *: первый ребенок,
msup> *: первый ребенок,
msubsup> *: первый ребенок,
munder> *: первенец,
mover> *: первенец,
munderover> *: первенец,
mmultiscripts> *: первый ребенок,
mroot> *: first-child {
  размер шрифта: 100%
}

/ * Устанавливаем значения размера для других дочерних элементов скрипта и ограничиваем схему (
  script и limit children) - включить атрибут приращения уровня сценария?
* /

msub> * [mathsize = "большой"],
msup> * [mathsize = "большой"],
msubsup> * [mathsize = "большой"],
munder> * [mathsize = "большой"],
mover> * [mathsize = "большой"],
munderover> * [mathsize = "большой"],
mmultiscripts> * [mathsize = "big"],
math [display = "inline"] mfrac> * [mathsize = "big"],
math * [scriptlevel = "+ 1"] [mathsize = "big"] {
  размер шрифта: 89% / * (.71 умножить на 1,25) * /
}

msub> * [mathsize = "small"],
msup> * [mathsize = "small"],
msubsup> * [mathsize = "small"],
munder> * [mathsize = "small"],
mover> * [mathsize = "small"],
munderover> * [mathsize = "small"],
mmultiscripts> * [mathsize = "small"],
math [display = "inline"] mfrac> * [mathsize = "small"],
math * [scriptlevel = "+ 1"] [mathsize = "small"] {
  font-size: 57% / * (0,71 умножить на 0,8) * /
}

msub> *,
msup> *,
msubsup> *,
munder> *,
движитель> *,
munderover> *,
mmultiscripts> *,
math [display = "inline"] mfrac> *,
math * [scriptlevel = "+ 1"] {
  размер шрифта: 71%
}

mroot> * [mathsize = "big"] {
  размер шрифта: 62% / * (.50 умножить на 1,25) * /
}

mroot> * [mathsize = "small"] {
  font-size: 40% / * (0,50 раз на 0,80) * /
}

mroot> * {
  размер шрифта: 50%
}

/ * Устанавливаем значения размера для других атрибутов приращения уровня скрипта * /

math * [scriptlevel = "+ 2"] [mathsize = "big"] {
  font-size: 63% / * (0,71 умножить на 0,71 умножить на 1,25) * /
}

math * [scriptlevel = "+ 2"] [mathsize = "small"] {
  font-size: 36% / * (0,71 умножить на 0,71 умножить на 0,71) * /
}

math * [scriptlevel = "+ 2"] {
  font-size: 50% / * 0,71 умножить на 0,71 * /
}

math *. [mathcolor = "green"] {
  цвет: зеленый
}

математика *.[mathcolor = "black"] {
  черный цвет
}

math *. [mathcolor = "red"] {
  красный цвет
}

math *. [mathcolor = "blue"] {
  цвет синий
}

math *. [mathcolor = "оливковый"] {
   цвет: оливковый
}

math *. [mathcolor = "purple"] {
   цвет: фиолетовый
}

math *. [mathcolor = "бирюзовый"] {
   цвет: бирюзовый
}

math *. [mathcolor = "aqua"] {
   цвет: морской
}

math *. [mathcolor = "gray"] {
   цвет: серый
}

math *. [mathbackground = "blue"] {
   цвет фона: синий
}

math *. [mathbackground = "green"] {
   цвет фона: зеленый
}

math *. [mathbackground = "white"] {
   цвет фона: белый
}

математика *.[mathbackground = "yellow"] {
   цвет фона: желтый
}

math *. [mathbackground = "aqua"] {
   цвет фона: аква
}

} / * Закрываем область "@media screen" * /

@media aural {
}


 

нормальный | жирный | смелее | зажигалка | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | наследовать
 

 font-weight: normal; 
 font-weight: жирный; 
 font-weight: полужирный; 
 font-weight: lighter; 
 font-weight: 100; 
 font-weight: 200; 
 font-weight: 300; 
 font-weight: 400; 
 font-weight: 500; 
 font-weight: 600; 
 font-weight: 700; 
 font-weight: 800; 
 font-weight: 900; 
 
 

  #one {
font-weight: 100;
семейство шрифтов: «Myriad Pro Light», «Myriad Pro»; }  

  #one {
font-weight: 100;
семейство шрифтов: "MyriadPro-Light", "Myriad Pro Light",
«Мириад Про»; }