Стили шрифтов в html: Шрифты в HTML (font, font-family, font-face)

Leave a Comment / Html / By /

Выравнивание, стили шрифтов и горизонтальные разделители в документах HTML

 назад   далее   содержание   элементы   атрибуты   указатель

Содержание

  1. Форматирование
    1. Цвет фона
    2. Выравнивание
    3. Прикрепляемые объекты
      • Прикрепление объекта
      • Обтекание объекта текстом
  2. Шрифты
    1. Элементы, определяющие стиль шрифта: элементы TT, I, B, BIG, SMALL, STRIKE, S и U
    2. Элементы управления шрифтами: FONT и BASEFONT
  3. Разделители: элемент HR

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

Многие из них являются нежелательными.

15.1 Форматирование

15.1.1 Цвет фона

Определение атрибутов

bgcolor = цвет [CI]
Нежелателен. Этот атрибут устанавливает цвет фона тела документа или ячеек таблицы.

Этот атрибут устанавливает цвет фона тела документа (элемент BODY) или таблицы (элементы TABLE, TR, TH, and TD). В элементе BODY могут использоваться дополнительные атрибуты для указания цвета текста.

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

15.1.2 Выравнивание

Выравнивать блочные элементы (таблицы, изображения, объекты, абзацы и т.д.) можно с помощью атрибута

align. Хотя этот атрибут может устанавливаться для многих элементов HTML, диапазон его возможных значений в разных элементах может быть различным. Здесь обсуждается только значение атрибута align для текста.

Определения атрибутов

align = left|center|right|justify [CI]
Нежелателен. Этот атрибут задает горизонтальное выравнивание своего элемента относительно окружающего контекста. Возможные значения:
  • left: строки текста выравниваются по левому краю.
  • center: строки текста выравниваются по центру.
  • right: строки текста выравниваются по правому краю.
  • justify: строки текста выравниваются по обоим краям.

Значение по умолчанию зависит от общего направления текста. Для текста, направленного слева направо, по умолчанию используется значение

align=left, я для текста, направленного справа налево — align=right.

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В данном примере заголовок центрируется.


<h2 align="center"> How to Carve Wood </h2>

С использованием CSS, например, Вы можете достичь того же эффекта следующим образом: 


<HEAD>
 <TITLE>How to Carve Wood</TITLE>
 <STYLE type="text/css">
  h2 { text-align: center}
 </STYLE>
<BODY>
 <h2> How to Carve Wood </h2>

Обратите внимание, что будут выровнены все объявления h2

. Вы можете ограничить область действия стиля, установив атрибут class:


<HEAD>
 <TITLE>How to Carve Wood</TITLE>
 <STYLE type="text/css">
  h2.wood {text-align: center}
 </STYLE>
<BODY>
 <h2> How to Carve Wood </h2>

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Аналогично, чтобы выровнять абзац по правому краю с помощью атрибута HTML align Вы можете записать:


<P align="right">. ..Текст абзаца...

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


<HEAD>
 <TITLE>How to Carve Wood</TITLE>
 <STYLE type="text/css">
  P.mypar {text-align: right}
 </STYLE>
<BODY>
 <P>...Текст абзаца...

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:

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


<DIV align="right">
 <P>...текст первого абзаца...
 <P>...текст второго абзаца...
 <P>...текст третьего абзаца...
</DIV>

С использованием CSS свойство выравнивания текста наследуется от родительского элемента, поэтому Вы можете использовать:


<HEAD>
 <TITLE>How to Carve Wood</TITLE>
 <STYLE type="text/css">
  DIV.mypars {text-align: right}
 </STYLE>
<BODY>
 <DIV>
  <P>. ..текст первого абзаца...
  <P>...текст второго абзаца...
  <P>...текст третьего абзаца...
 </DIV>

Чтобы отцентрировать с использованием CSS весь документ:


<HEAD>
 <TITLE>How to Carve Wood</TITLE>
 <STYLE type="text/css">
  BODY {text-align: center}
 </STYLE>
<BODY>
 ...тело документа отцентрировано...
</BODY>

Использование элемента CENTER абсолютно эквивалентно использованию элемента DIV с атрибутом align, для которого установлено значение «center». Использование элемента CENTER нежелательно.

15.1.3 Прикрепляемые объекты

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

Прикрепление объекта 

Атрибут align для объектов, изображений, таблиц, фреймов и т.

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

  • left: Объект прикрепляется к текущему левому полю. Последующий текст обтекает изображение справа.
  • right: Объект прикрепляется к текущему правому полю. Последующий текст обтекает изображение слева.

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В следующем примере показано, как прикрепить элемент IMG к левому полю.


<IMG align="left" src="http://foo.com/animage.gif" alt="моя лодка">

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

Обтекание объекта текстом 

Другой атрибут, определенный для элемента BR, управляет обтеканием текста вокруг прикрепленных объектов.

Определения атрибутов

clear = none|left|right|all [CI]
Нежелателен. Определяет, где в визуальном браузере должна появиться следующая за переводом строки, вызванном этим элементом, строка. Этот атрибут учитывает прикрепляемые объекты (изображения, таблицы и т.д.). Возможные значения:
  • none: Следующая строка начинается обычным образом. Это значение используется по умолчанию.
  • left: Следующая строка начнется на ближайшей строке под прикрепленным объектом у левого поля.
  • right: Следующая строка начнется на ближайшей строке под прикрепленным объектом у правого поля.
  • all: Следующая строка начнется на ближайшей строке под прикрепленным объектом у любого поля.

Рассмотрим следующий визуальный сценарий, в котором обтекание текстом производится справа от изображения до разрыва строки с помощью BR:


****************  -------
|              |  -------
| изображение  |  --<BR>
|              |
****************

Если для атрибута clear установлено значение none, строка, следующая за BR, начнется сразу же за ним справа от изображения:


***************  -------
|             |  -------
| изображение |  --<BR>
|             |  ------
***************

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Если для атрибута

clear установлено значение left или all, следующая строка будет отображаться так:


***************  -------
|             |  -------
| изображение |  --<BR clear="left">
|             |  
***************
-----------------

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


<STYLE type="text/css">
BR { clear: left }
</STYLE>

Чтобы определить такое поведение только для определенных экземпляров элемента BR, следует использовать атрибут id:


<HEAD>

 
...
<STYLE type="text/css">
BR.mybr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
***********  -------
|         |  -------
| таблица |  --<BR>
|         |  
***********
-----------------
...
</BODY>

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

15.2.1 Элементы, определяющие стиль шрифта: элементы

TT, I, B, BIG, SMALL, STRIKE, S и U 

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">
<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Начальный тег: обязателен, Конечный тег: обязателен

Атрибуты, определяемые в другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown onkeyup (внутренние события)

Представления элементов, определяющих стиль шрифта, зависит от агента пользователя. Далее приведено только информативное описание.

TT: Представляется как моноширинный шрифт (шрифт пишущей машинки).
I: Представляет курсивом.
B: Представляется полужирным шрифтом.
BIG: Представляется «крупным» шрифтом.
SMALL: Представляется «малым» шрифтом.
STRIKE и S: Нежелательны. Представляет перечеркнутым шрифтом.
U: Нежелателен. Представляется подчеркнутым шрифтом.

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


<P><b>полужирный</b>,
<i>курсив</i>, <b><i>полужирный курсив</i></b>, <tt>моноширинный</tt> и 
<big>большой</big> и <small>малый</small> текст.

Слова будут представлены следующим образом:

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


<HEAD>
<STYLE type="text/css">
P.mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P>...Текст синим курсивом...

Элементы стиля шрифта должны корректно вкладываться. Представление вложенных элементов стиля зависит от агента пользователя.

15.2.2 Элементы управления шрифтами:

FONT и BASEFONT

Использование элементов FONT и BASEFONT нежелательно.

Формальное определение см. в Transitional DTD.

Определения атрибутов

size  = cdata [CN]
Нежелателен. Устанавливает размер шрифта. Возможные значения:
  • Целое число от 1 до 7. Устанавливает фиксированный размер шрифта, представление которого зависит от агента пользователя. Не все агенты пользователей могут представлять все семь размеров.
  • Относительное изменение размера шрифта. Значение «+1» означает на один размер больше. Значение «-3» означает шрифт на три размера меньше. Все размеры относятся к шкале от 1 до 7.
color = цвет [CI]
Нежелателен. Этот атрибут устанавливает цвет текста.
face = cdata [CI]
Нежелателен. Этот атрибут определяет список разделенных запятыми названий шрифтов, поиск которых агент пользователя должен выполнить в порядке приоритета.

Атрибуты, определяемые в другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)

Элемент FONT изменяет размер и цвет шрифта для текста его содержимого.

Элемент BASEFONT устанавливает базовый размер шрифта (с помощью атрибута size). Изменения размера шрифта с помощью элемента FONT производятся относительно базового размера, установленного элементом BASEFONT. Если элемент BASEFONT не используется, по умолчанию используется размер 3.

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В следующем примере показана разница между семью размерами шрифтов, устанавливаемых с помощью элемента FONT:


<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>

Это может представляться следующим образом:

Далее показан пример установки относительного размера шрифта с использованием базового размера 3:

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

15.3 Разделители: элемент

HR 

<!ELEMENT HR - O EMPTY - горизонтальный разделитель -->
<!ATTLIST HR
  %coreattrs;                          -- id, class, style, title --
  %events;
  >

Начальный тег: обязателен, Конечный тег: запрещен

Определения атрибутов

align = left|center|right [CI]
Нежелателен. Этот атрибут определяет горизонтальное выравнивание разделителя относительно окружающего контекста. Возможные значения:
  • left: разделитель выровнен по левому краю.
  • center: разделитель выровнен по центру.
  • right: разделитель выровнен по правому краю.

По умолчанию используется align=center.

noshade [CI]
Нежелателен. Если этот атрибут установлен, он предлагает агенту пользователю представлять разделитель сплошным цветом, а не обычным двухцветным стилем.
size = пикселы [CI]
Нежелателен. Этот атрибут задает высоту разделителя. Значение по умолчанию зависит от агента пользователя.
width = length [CI]
Нежелателен. Этот атрибут задает ширину разделителя. По умолчанию используется 100%, т.е. вся ширина страницы.

Атрибуты, определяемые в другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)
  • align (выравнивание)

Элемент HR приводит к генерации горизонтального разделителя визуальными агентами пользователей.

Высота пустого пространства между разделителем и текстом зависит от агента пользователя.

ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ:
В этом примере разделители центрируются, а их размер устанавливается в половину ширины между полями. Верхний разделитель имеет толщину по умолчанию, а для нижнего установлена толщина 5 пикселов. Нижний разделитель должен представляться сплошным цветом без тени: 


<HR align="center">
<HR size="5" align="center">
<HR noshade size="5" align="center">

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

назад   далее   содержание   элементы   атрибуты   указатель

html — Как в верстке использовать два стиля одного шрифта?

Вопрос задан

Изменён 3 года 3 месяца назад

Просмотрен 410 раз

Я новичок, и во время верстки столкнулся проблемой. Нужно сверстать страницу со 100% точностью с макетом. Но есть проблема. Нужно использовать два разных стиля одного шрифта в тексте и заголовке. В html через link обьявить оба стиля легко, но в css поставить в нужную часть нужный стиль невозможно. Пример: нужно использовать шрифт lato со стилями regular и light. В html будет так:

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,300&display=swap" rel="stylesheet">

С этим понятно. Но в css коде стиль не указывается, и код будет таким:

h2 {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
}

Тут используется тот стиль, который был обьявлен первее в html.

  • html
  • css
  • вёрстка
  • шрифты
1

Как вариант. Или нет?

* {
  font-family: 'Lato', sans-serif;
}

h2 {
  font-weight: bold;
}

. ital {
  font-style: italic;
}

.wght {
  font-weight: bold;
}
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,300&display=swap" rel="stylesheet">
<h2>Заголовок</h2>
<h3>Заголовок</h3>
<p>Текст Текст Текст Текст Текст Текст</p>
<p>Текст Текст Текст Текст Текст Текст</p>
<p>Текст Текст Текст Текст Текст Текст</p>
<p>Текст Текст Текст Текст Текст Текст</p>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

стилей HTML-шрифтов | Шесть лучших стилей шрифтов HTML с примерами

Обновлено 14 марта 2023 г.

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

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

Стили шрифтов HTML

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

Тег используется для придания всему тексту, присутствующему на вашем веб-сайте или внутри элемента

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

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

Давайте рассмотрим некоторые основные стили HTML-шрифтов:

Существуют некоторые основные функции и характеристики, связанные со стилями HTML-шрифтов, а именно:

1.
Настройка размера шрифта

Размер шрифта содержимого можно задать с помощью атрибутов размера. Принятое значение диапазона лежит от 1, что является наименьшим числом, и идет до 7, что является наибольшим числом. Размер по умолчанию для любого типа шрифта равен 3.

Пример, 

 

<голова>
Установка основного размера шрифта

<тело>
Размер шрифта = "1"

Размер шрифта = "2"

Размер шрифта = "3"

Размер шрифта = "4"

Размер шрифта = "5"

Размер шрифта = "6"

Размер шрифта = "7"
2. Относительный размер шрифта

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

  или написав

Пример, 

 

<голова>
Относительный размер шрифта

<тело>
Размер шрифта = "-1"

Размер шрифта = "+1"

Размер шрифта = "+2"

Размер шрифта = "+3"

Размер шрифта = "+4"
3. Настройка начертания шрифта

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

Пример, 

 

<голова>
Шрифт

<тело>
Times New Roman

Verdana

Comic Sans MS

WildWest
Коренная порода
4. Указать альтернативные начертания шрифта
  • Используется для указания различных видов начертаний шрифта только в том случае, если в системе пользователя установлен этот конкретный шрифт; в противном случае будет виден установленный по умолчанию шрифт. Можно упомянуть более одного, в частности, два или более двух вариантов начертания шрифта, перечислив названия начертаний шрифта, которые специально разделены запятой.
  • Когда веб-страница загружается, браузер будет нести ответственность за отображение первого шрифта, который будет сгенерирован. Если ни один из предоставленных шрифтов не установлен в системе, то шрифт по умолчанию, которым является Times New Roman, будет успешно отображаться.

Пример,
5. Настройка цвета шрифта

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

Пример, 

 

<голова>
Настройка цвета шрифта

<тело>
Этот текст выделен розовым цветом

Этот текст красного цвета
6. Элемент
  • Этот элемент специфичен для языка HTML и должен предоставить веб-странице размер шрифта, гарнитуру и цвет по умолчанию для всех частей и компонентов документов, которые не содержатся внутри тег <шрифт>.
  • Тег можно легко использовать для переопределения настроек.
  • Этот тег также использует атрибуты цвета, начертания и размера, которые относительно поддерживают все настройки шрифта, обеспечивая размер со значением +1 для увеличения на один размер или -2 для уменьшения на два размера.

Пример, 

 

<голова>
Настройка цвета базового шрифта

<тело>


Это шрифт страницы по умолчанию.

 
Пример тега <basefont> Элемент

Заключение

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

Рекомендуемые статьи

Это руководство по стилям HTML-шрифтов. Здесь мы обсудили введение и подробное объяснение некоторых основных шрифтов HTML с примерами. Вы также можете просмотреть другие рекомендуемые статьи, чтобы узнать больше:

  1. Таблицы стилей HTML
  2. Атрибуты HTML
  3. Стили списка HTML
  4. HTML-блоков

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

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


  • Семейство шрифтов
  • Стиль шрифта
  • Вариант шрифта
  • Толщина шрифта
  • Размер шрифта
  • Шрифт
Синтаксис: семейство шрифтов: [[<имя семейства> | <родовое-семейство>],]* [<семейство> | <общее-семейство>]
Возможные значения: <название семейства>
  • Можно использовать любое имя семейства шрифтов
  • serif ( например , раз)
  • без засечек ( например , Arial или Helvetica)
  • курсив ( например , Zapf-Chancery)
  • фантастика ( например , вестерн)
  • моноширинный ( например, , курьер)
Исходное значение: Определяется браузером
Применимо к: Все элементы
По наследству: Да

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

Образец 9Объявление 0027 font-family может выглядеть так:

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

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

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

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

Синтаксис: стиль шрифта: <значение>
Возможные значения: обычный | курсив | косой
Исходное значение: обычный
Применимо к: Все элементы
Унаследовано: Да

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

 h2 {стиль шрифта: наклонный}
P {стиль шрифта: обычный}
Синтаксис: вариант шрифта: <значение>
Возможные значения: обычный | малые капиталы
Исходное значение: обычный
Применимо к: Все элементы
По наследству: Да

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

.
 SPAN {вариант шрифта: маленькие прописные}
Синтаксис: вес шрифта: <значение>
Возможные значения: обычный | жирный | смелее | зажигалка | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Исходное значение: обычный
Применимо к: Все элементы
По наследству: Да

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

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

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

Например, font-weight назначений:

 h2 { вес шрифта: 800 }
P {начертание шрифта: нормальный}
Синтаксис: размер шрифта: <абсолютный размер> | <относительный размер> | <длина> | <процент>
Возможные значения:
  • <абсолютный размер>
    • xx-маленький | х-маленький | маленький | средний | большой | х-большой | xx-большой
  • <относительный размер>
    • больше | меньше
  • <длина>
  • <процент> (относительно родительского элемента)

Исходное значение: средний
Относится к: Все элементы
По наследству: Да

Свойство 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 может использоваться как сокращение для различных свойств шрифта, а также высоты строки.

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

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