Атрибуты: Параметры шрифта.

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

Формат:

  • font-family:
      Перечень шрифтов
      |initial
      |inherit
      |unset

Значения:

  • Перечень шрифтов - Список узаконенных имен шрифтов, разделенных запятыми.
      Если имя шрифта составное, то оно должно задаваться как CSS значение string, не составные имена могут указываться непосредственно (например Verdana, Arial, "Times New Roman").
      Шрифты указываются списком для того, чтобы повысить вероятность нахождения шрифта на устройстве пользователя.
      В списке имен могут присутствовать и имена шрифтов введенные разработчиком с помощью CSS-правила @font-face.
      Существуют универсальные имена для видов шрифтов, которые могут быть указаны последними в списке для того, чтобы в любом случае предусмотреть хоть какую-то возможность стилевого выделения текста. Они задаются ключевыми словами:

    • serif - Универсальный шрифт serif.
    • sans-serif - Универсальный шрифт sans-serif.
    • monospace - Универсальный шрифт monospace.
    • cursive - Универсальный шрифт cursive.
    • fantasy - Универсальный шрифт fantasy.

      Универсальные имена могут указываться непосредственно (например - sans-serif).
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям если таковые есть, в противном случае - к значениям по умолчанию.
  font-size - Устанавливает размер символов шрифта пользовательского представления текстового контента.

Формат:

  • font-size:
      Размер
      |xx-small
      |x-small
      |small
      |medium
      |large
      |x-large
      |xx-large
      |larger
      |smaller
      |initial
      |inherit
      |unset

Значения:

  Нормализованный размер это размер, понятный браузеру в соответствии со стандартом HTML.
Всего нормализовано 7 (от xx-small до xx-large) размеров шрифта. Точный размер нормализованных значений зависит от настроек браузера и от значений остальных атрибутов стилей шрифта. Нормализованные значения предпочтительны, поскольку дают возможность пользователю самому настраивать вид Web-страницы.
  font-style - Устанавливает вид начертания символов шрифта пользовательского представления текстового контента.

Формат:

  • font-style:
      italic
      |oblique
      |normal
      |initial
      |inherit
      |unset

Значения:

  • italic - Наклонное начертание.
  • oblique - Особое декоративное начертание, похожее на курсив.
  • normal - Приводит значение атрибута в "нормальное" состояние, устанавливая его таким, каким оно наследуется от тега HTML (inherit на самом верхнем возможном уровне).
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  font-variant - Устанавливает вид строчных символов шрифта пользовательского представления текстового контента.

Формат:

  • font-variant:
      small-caps
      |normal
      |initial
      |inherit
      |unset

Значения:

  • small-caps - Строчные буквы будут выглядеть как прописные (верхний регистр клавиатуры), но иметь несколько меньший размер.
  • normal - Приводит значение атрибута в "нормальное" состояние, устанавливая его таким, каким оно наследуется от тега HTML (inherit на самом верхнем возможном уровне).
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  font-weight - Устанавливает уровень насыщенности ("жирность") символов шрифта пользовательского представления текстового контента.

Формат:

  • font-weight:
      100
      |200
      |300
      |400
      |500
      |600
      |700
      |800
      |900
      |bold
      |bolder
      |lighter
      |normal
      |initial
      |inherit
      |unset

Значения:

  • 100|200|300|400|500|600|700|800|900 - "Нормализованное" числовое значение, от минимального - 100, до максимального - 900.
      Значение normal совпадает с числовым значением - 400.
      Насыщенность "нормализованных" значений зависит от настроек браузера и от значений остальных атрибутов стилей шрифта.
  • bold - Полужирная "нормализация" шрифта.
  • bolder - "Нормализация" шрифта следующим в бóльшую сторону уровнем насыщенности от элемента "родительского" тега.
  • lighter - "Нормализация" шрифта следующим в меньшую сторону уровнем насыщенности от элемента "родительского" тега.
  • normal - Приводит значение атрибута в "нормальное" состояние, устанавливая его таким, каким оно наследуется от тега HTML (inherit на самом верхнем возможном уровне).
      Необходимо различать нормализованный уровень насыщенности и нормальное состояние (normal) уровня.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Нормализованные значения предпочтительны, поскольку дают возможность пользователю самому настраивать вид Web-страницы.
  line-height - Устанавливает межстрочный интервал (расстояние между базовыми линиями шрифта) пользовательского представления текстового контента.

Формат:

  • line-height:
      Размер
      |Коэффициент
      |normal
      |initial
      |inherit
      |unset

Значения:

  • Размер - Линейная величина с единицей измерения. Отрицательное значение не допустимо.
  • Коэффициент - Положительное число. Коэффициент умножения текущего размера шрифта.
  • normal - Приводит значение атрибута в "нормальное" состояние, устанавливая его таким, каким оно наследуется от тега HTML (inherit на самом верхнем возможном уровне).
      Значение normal устанавливает межстрочный интервал автоматически в соответствии со стилями установленными другими атрибутами стилей текста.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  font - Устанавливает общий стиль для шрифта пользовательского представления контента.

Формат:

  • font:
      [Начертание] [Строчные символы] [Жирность] Размер[/Интервал] Шрифт
      |initial
      |inherit
      |unset

Значения:

  • Начертание – Значение атрибута font-style.
      При наличии указывается перед значением Размер.
  • Строчные символы – Значение атрибута font-variant.
      При наличии указывается перед значением Размер.
  • Жирность – Значение атрибута font-weight.
      При наличии указывается перед значением Размер.
  • Размер – Значение атрибута font-size.
      Обязательное значение.
  • Интервал – Значение атрибута line-height.
      При наличии указывается через символ / после значения Размер.
  • Шрифт – Значение атрибута font-family.
      Обязательное значение.
      Указывается после значения Размер.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Окраска символов шрифта
  Атрибуты:
  color - Устанавливает окраску символов шрифта пользовательского представления текстового контента.

Формат:

  • color:
      Цвет
      |transparent
      |currentcolor
      |initial
      |inherit
      |unset

Значения:

  • Цвет - CSS значение цвета.
  • transparent - Прозрачная окраска.(Может быть изменено скриптом.)
  • currentcolor - Значение атрибута вычисляется браузером.
      Обычно это значение, унаследованное от элемента "родительского" тега.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Декорирование символов шрифта
  Атрибуты:
  font-stretch - Устанавливает ширину начертания символов пользовательского представления текстового контента.

Формат:

  • font-stretch:
      ultra-condensed
      |extra-condensed
      |condensed
      |semi-condensed
      |semi-expanded
      |expanded
      |extra-expanded
      |ultra-expanded
      |normal
      |initial
      |inherit
      |unset

Значения:

  • ultra-condensed|extra-condensed|condensed|semi-condensed - Более сжатое, чем обычно, начертание шрифта.
      Вид зависит от конкретных шрифтов и браузеров.
  • semi-expanded|expanded|extra-expanded|ultra-expanded - Более расширенное, чем обычно, начертание шрифта.
      Вид зависят от конкретных шрифтов и браузеров.
  • normal - Приводит значение атрибута в "нормальное" состояние, устанавливая его таким, каким оно наследуется от тега HTML (inherit на самом верхнем возможном уровне).
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  letter-spacing - Устанавливает расстояние между символами пользовательского представления текстового контента.

Формат:

  • letter-spacing:
      Размер
      |normal
      |initial
      |inherit
      |unset

Значения:

  • Размер - Линейная величина с единицей измерения.
      Допустимы отрицательные значения.
  • normal - Приводит значение атрибута в "нормальное" состояние, устанавливая его таким, каким оно наследуется от тега HTML (inherit на самом верхнем возможном уровне).
      Значение normal устанавливает расстояние между символами автоматически в соответствии со стилями установленными другими атрибутами стилей текста.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  text-decoration - Устанавливает некую дополнительную декорацию шрифта пользовательского представления текстового контента.

Формат:

  • text-decoration:
      underline
      |overline
      |line-through
      |none
      |initial
      |inherit
      |unset

Значения:

  • underline - Подчеркивание символов.
  • overline - Надчеркивание символов.
  • line-through - Зачеркивание символов.
  • none - Отменяет декорацию шрифта, возможно унаследованную от элемента "родительского" тега.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения underline, overline, line-through, blink можно комбинировать через пробел.
  text-shadow - Устанавливает "тень" в символах пользовательского представления текстового контента.

Формат:

  • text-shadow:
      Окраска
      Горизонтальное смещение
      Вертикальное смещение
      [Радиус]
      |none
      |initial
      |inherit
      |unset

Значения:

  • Окраска - Окраска "тени". CSS значение цвета.
  • Горизонтальное смещение - Смещение "тени" относительно символа текста по горизонтали. Линейная величина с единицей измерения.
      Если указано положительное число, то "тень" смещается правее символа, если отрицательное – левее.
      Если указан 0, то "тень" окажется прямо под символом. Нулевое смещение имеет смысл только если определен радиус.
  • Вертикальное смещение - Смещение "тени" относительно символа текста по вертикали. Линейная величина с единицей измерения.
      Если указано положительное число, то "тень" смещается ниже символа, если отрицательное – выше.
      Если указан 0, то "тень" окажется прямо под символом. Нулевое смещение имеет смысл, только если определен радиус.
  • Радиус - Радиус "размытия" "тени". Линейная величина с единицей измерения.
      По умолчанию величина радиуса "размытия" равна 0 и "тень" не имеет эффекта "размытия".
  • none - Отменяет тень возможно унаследованную от элемента "родительского" тега.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  text-transform - Устанавливает регистр символов шрифта пользовательского представления текстового контента.

Формат:

  • text-transform:
      capitalize
      |uppercase
      |lowercase
      |none
      |initial
      |inherit
      |unset

Значения:

  • uppercase - Верхний регистр.
  • lowercase - Нижний регистр.
  • capitalize - Верхний регистр первой буквы каждого слова.
  • none - Отменяет регистр шрифта, возможно унаследованный от элемента "родительского" тега.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Акцент-декорация шрифта
  Атрибуты:
  [-webkit-]text-emphasis - Устанавливает акцент-декорацию шрифта пользовательского представления текстового контента.
  Акцент-декорация выполняется проставлением над или под декорируемым символом заданного символа-декоратора с заданным цветом. Декорируются все символы (за некоторым исключением) декорируемого контента, даже, к примеру, верхние или нижние индексы. Размер символов-декораторов составляет примерно 50% от размера декорируемого шрифта, поэтому акцент-декорация увеличивает высоту декорируемой строки.

Формат:

  • [-webkit-]text-emphasis:
      |dot
      |circle
      |double-circle
      |triangle
      |sesame
      |Символ
      [Заполнение]
      [Окраска]
      |none
      |initial
      |inherit
      |unset

Значения:

  • dot - Устанавливает точку в качестве символа-декоратора акцент-декорации. (Умолчание если задана окраска и(или) заполнение.)
  • circle - Устанавливает круг в качестве символа-декоратора акцент-декорации.
  • double-circle - Устанавливает двойной круг в качестве символа-декоратора акцент-декорации.
  • triangle - Устанавливает треугольник в качестве символа-декоратора акцент-декорации.
  • sesame - Устанавливает кунжут ('﹅' или '﹆') в качестве символа-декоратора акцент-декорации.
  • Символ - Устанавливает любой символ в качестве символа-декоратора акцент-декорации. CSS значение string (только один символ).
  • Заполнение - Устанавливает заполнение символа-декоратора акцент-декорации. Одно из ключевых слов:
    • filled - Полное заполнение. (Умолчание если задан хоть какой-то символ акцент-декорации.)
    • open - Только контур.
        Только для символов-декораторов dot, circle, double-circle, triangle, sesame. Для других символов соответствует значению none.
  • Окраска - Устанавливает окраску символа-декоратора акцент-декорации. CSS значение цвета. (По умолчанию - чёрная.)
  • none - Отменяет акцент-декорацию шрифта, возможно унаследованную от элемента "родительского" тега.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Акцент-декорация применяется для каждого символа текстового контента кроме всегда невидимых символов (например, пробелов и управляющих символов). Однако, к примеру, мягкий дефис также акцентируется, даже если он и невидим в текущий момент.
  Надо иметь в виду, что для акцент-декорации каждый литерал считается одним символом, даже если этот литерал, к примеру, обозначает многоточие. Также дополнительно не декорируются модификаторы символов.
  [-webkit-]text-emphasis-position - Устанавливает положение символов-декораторов акцент-декорации шрифта пользовательского представления текстового контента.
  Имеет смысл только при одновременном использовании атрибута стиля text-emphasis.

Формат:

  • [-webkit-]text-emphasis-position:
      |over
      |under
      |initial
      |inherit
      |unset

Значения:

  • over - Устанавливает положение символов-декораторов акцент-декорации над символами декорируемого шрифта (умолчание).
  • under - Устанавливает положение символов-декораторов акцент-декорации под символами декорируемого шрифта.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  CSS-правило @Font-Face
  @font-face - Инициирует загрузку вместе с документом шрифта и устанавливает имя этого шрифта для использования в значении атрибута font-family.
  @Font-Face - не является атрибутом CSS-стиля, а формирует отдельное CSS-правило, которое затем используется атрибутом font-family.

Формат:

  • @font-face
    {
      font-family: Имя;
      src: url(Адрес1) [format(Формат1)],...url(АдресN) [format(ФорматN)];
      [font-style: Значение;]
      [font-stretch: Значение;]
      [font-variant: Значение;]
      [font-weight: Значение;]
      [unicode-range: "диапазон";]
    }

Значения:

  • Имя - Допустимый символьный код, назначенный именем шрифта.
      Используется в качестве значения атрибута стиля font-family.
  • url(Адрес) - Обращение к CSS функции url для получения шрифта.
  • Формат - формат шрифта.
      Формат должен поддерживаться браузером (например TrueType или OpenType).
      Существуют специальные конверторы форматов шрифтов.
      Список ссылок и форматов повышает вероятность достичь желаемого результата на платформе с любым браузером.
  • font-style - Значения как у атрибута font-style. По умолчанию - normal По умолчанию - normal.
  • font-stretch - Значения как у атрибута font-stretch. По умолчанию - normal По умолчанию - normal.
  • font-variant - Значения как у атрибута font-variant. По умолчанию - normal.
  • font-weight - Значения как у атрибута font-weight. По умолчанию - normal.
  • unicode-range - Устанавливает диапазон поддерживаемых символов UNICODE для этого шрифта. По умолчанию - U+0-10FFFF