Свойство font-size, размер шрифта — Оформление текста — HTML Academy
Загрузка…
Через несколько секунд всё будет готово
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>Дневник начинающего верстальщика</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<header>
<p>Блог</p>
<nav>
<a href=»index.html»>На главную</a>
</nav>
</header>
<main>
<article>
<h2>День второй. Хочу быть верстальщиком</h2>
<p>Сегодня весь вечер просидел в интернете. Читал про преимущества работы верстальщиком. Часто отвлекался на видео с котиками, конечно, но кое-что я запомнил:</p>
<ul>
<li>ты делаешь полезное дело</li>
<li>можешь работать удалённо</li>
<li>интересные люди</li>
<li>хорошая зарплата</li>
</ul>
<p>Желания учиться резко прибавилось.
CSS
body {
padding: 0 30px;
font-size: 16px;
line-height: 26px;
font-family: «Arial», sans-serif;
color: #222222;
background: #ffffff url(«img/bg-page.png») no-repeat top center;
}
h2 {
font-size: 36px;
line-height: normal;
}
h3 {
font-size: 20px;
line-height: normal;
}
a {
color: #0099ef;
text-decoration: underline;
}
.avatar {
border-radius: 50%;
}
.blog-navigation {
margin-bottom: 30px;
padding: 20px;
color: #ffffff;
background-color: #4470c4;
border: 5px solid #2d508f;
}
.blog-navigation h3 {
margin-top: 0;
}
.blog-navigation ul {
padding-left: 0;
list-style: none;
}
.blog-navigation li {
margin-bottom: 5px;
}
.blog-navigation a {
color: #ffffff;
}
.skills dd {
margin: 0;
margin-bottom: 10px;
background-color: #e8e8e8;
}
.
Что в задании вам не понравилось?
Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)
Другое (сейчас напишу)
Спасибо! Мы скоро всё исправим)
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
- Для заголовка
h2font-sizeна24px, - затем добавьте абзацу
<p>Блог</p>классpage-title - и создайте правило для этого класса с заданием размеру шрифта значения
36px.
font ⚡️ HTML и CSS с примерами кода
Свойство font универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.
Демо
Шрифт и Цвет- @font-face
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- line-height
- color
- opacity
- print-color-adjust
Синтаксис
/* size | family */ font: 2em 'Open Sans', sans-serif; /* style | size | family */ font: italic 2em 'Open Sans', sans-serif; /* style | variant | weight | size/line-height | family */ font: italic small-caps bolder 16px/3 cursive; /* style | variant | weight | stretch | size/line-height | family */ font: italic small-caps bolder condensed 16px/3 cursive; /* The font used in system dialogs */ font: message-box; font: icon; /* Global values */ font: inherit; font: initial; font: unset;
Значения
В качестве обязательных значений свойства font указывается размер шрифта и его семейство.
Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.
Допускается в качестве значения использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя.
caption- Шрифт для текста элементов форм вроде кнопок.
icon- Шрифт для текста под иконками.
menu- Шрифт применяемый в меню.
message-box- Шрифт для диалоговых окон.
small-caption- Шрифт для подписей к небольшим элементам управления.
status-bar- Шрифт для строки состояния окон.
Значение по-умолчанию: зависит от использования
Применяется ко всем элементам
Спецификации
- CSS Fonts Module Level 3
- CSS Level 2 (Revision 1)
- CSS Level 1
Описание и примеры
p {
font: 12pt/10pt sans-serif;
}
Из типографики пошла запись указывать через слэш размер шрифта и высоту строки.
Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — высоту строки. В качестве семейства указывается рубленый шрифт (sans-serif).
p {
font: bold italic 110% serif;
}
Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задаётся в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).
p {
font: normal small-caps 12px/14px fantasy;
}
Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение font-style и font-weight.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font</title>
<style>
.
layer1 {
font: 12pt sans-serif;
}
h2 {
font: 2em serif;
}
</style>
</head>
<body>
<div>
<h2>Экзистенциальный либерализм</h2>
<p>
Карл Маркс исходил из того, что типология средств
массовой коммуникации неизбежна.
</p>
</div>
</body>
</html>
layer1 {
font: 12pt sans-serif;
}
h2 {
font: 2em serif;
}
</style>
</head>
<body>
<div>
<h2>Экзистенциальный либерализм</h2>
<p>
Карл Маркс исходил из того, что типология средств
массовой коммуникации неизбежна.
</p>
</div>
</body>
</html>
Тег в HTML — Темы масштабирования
Обзор
Тег шрифта в HTML играет важную роль в создании эффективных, удобочитаемых и привлекательных веб-страниц. Тег font в HTML использовался в HTML 4, но устарел в HTML5. Тег font в HTML используется для установки размера шрифта, цвета и начертания текста в HTML-документе. Тег font в HTML используется внутри тега
.Scope
- В этой статье мы узнали о теге шрифта в HTML.
- Мы рассмотрели, как работает тег font, и рассказали о его важных глобальных и локальных атрибутах.
- Наконец, мы попробовали несколько примеров, чтобы лучше понять различные способы использования тега шрифта.
Синтаксис
Синтаксис тега шрифта в html очень прост. Нам нужно открыть тег шрифта и указать размер, цвет и номинал.
Наш текст
Содержимое между тегами шрифта в HTML получает указанный размер, цвет и начертание.
Обратитесь к указанной ниже статье, чтобы узнать больше о различных HTML-тегах. Синтаксис шрифта
Атрибуты тега шрифта
Тег шрифта в HTML поддерживает все глобальные атрибуты, такие как ключ доступа, класс, редактируемое содержимое, контекстное меню, данные-*, каталог, перетаскиваемый, dropzone, скрытый, идентификатор, проверка орфографии, стиль и tabindex , заголовок.
Давайте подробно узнаем об атрибутах тегов шрифта в HTML.
| Имя атрибута | Описание |
|---|---|
| цвет | Атрибут цвета тега шрифта в HTML используется для установки цвета текста с использованием либо шестнадцатеричных значений формата #GGBeB. предоставление названия цвета (например, черный, красный, белый). |
| размер | Атрибут размера тега шрифта в HTML используется для установки размера тега. Размер выражается числовым или относительным значением. |
| face | Атрибут face тега font в HTML используется для установки шрифта для текста. Мы можем упомянуть одно или несколько имен шрифтов, используя запятую. |
Примечание: В атрибуте face тега font в HTML числовые значения находятся в диапазоне от 1 до 7. С другой стороны, относительные значения могут быть такими, как +1 или -2, увеличиваясь на один размер шрифта или уменьшаясь на 2 размера шрифта. , соответственно.
Как использовать тег шрифта в HTML?
Как мы уже говорили выше, тег font в HTML используется для установки размера шрифта, цвета и начертания текста в HTML-документе. Тег базового шрифта используется для установки для всего текста одинакового размера, цвета и начертания.
Примечание: Тег шрифта в HTML больше не используется. Тег font устарел в HTML5, поэтому мы можем использовать свойства CSS для изменения размера шрифта, начертания, цвета, шрифта, семейства шрифтов, размера шрифта и т. д.
См. тег шрифта в HTML.
Примеры тегов шрифта
Как мы теперь знаем, атрибуты и варианты использования тега шрифта в HTML. Давайте возьмем несколько примеров, чтобы увидеть работу тега шрифта в HTML.
Тег шрифта с размером шрифта x
Атрибут размера шрифта тега шрифта в HTML используется для настройки размера текста в документе HTML. Диапазон размера шрифта в HTML — от 1 до 7.
Примечание: Размер атрибута font-size по умолчанию равен 3.
Пример:
<голова>
<мета-кодировка="UTF-8">
0">
тег шрифта в html
<тело>
Добро пожаловать на платформу!
Текст, написанный без использования тега font в html!
Выход:
Тег шрифта, в котором указаны разные размеры шрифта
Давайте теперь предоставим различные размеры шрифта в теге шрифта в HTML, чтобы увидеть работу разных размеров шрифта.
<голова>
<мета-кодировка="UTF-8">
тег шрифта в html
<тело>
Добро пожаловать на платформу!
<час>
Добро пожаловать на платформу!
<час>
Добро пожаловать на платформу!
<час>
Добро пожаловать на платформу!
<час>
Добро пожаловать на платформу!
<час>
Добро пожаловать на платформу!
<час>
Добро пожаловать на платформу!
<час>
Выход:
Тег шрифта с другим типом и размером шрифта
Давайте возьмем еще один пример и попробуем использовать более одного атрибута тега шрифта в HTML.
В следующем примере мы используем тег font с разными типами и размерами шрифта.
<голова>
<мета-кодировка="UTF-8">
тег шрифта в html
<тело>
Добро пожаловать на платформу!
<час>
Добро пожаловать на платформу!
<час>
Добро пожаловать на платформу!
<час>
Добро пожаловать на платформу!
<час>
Добро пожаловать на платформу!
<час>
Вывод:
Поддержка браузеров
Тег шрифта в HTML поддерживается следующими браузерами:
- Chrome
- Андроид
- Сафари
- Сафари Мобильный
- Edge (ранее известный как Internet Explorer)
- Пограничный мобильный
- Опера
- Опера Мобайл
- Фаерфокс
- Firefox Mobile
Заключение
- Тег font в HTML используется для установки размера шрифта, цвета и начертания текста в документе HTML. Тег font в HTML используется внутри тега.
- Синтаксис тега шрифта в html очень прост: Наш текст .
- Тег шрифта в HTML поддерживает все глобальные атрибуты. Помимо глобальных атрибутов, тег шрифта в HTML имеет три атрибута, а именно: размер, цвет и начертание.
- Тег шрифта в HTML больше не используется. Тег font устарел в HTML5, поэтому мы можем использовать свойства CSS для изменения размера шрифта, начертания, цвета, шрифта, семейства шрифтов, размера шрифта и т. д.
- Тег font в HTML поддерживается такими браузерами, как Chrome, Android, Safari, Safari Mobile, Edge, Edge Mobile, Opera, Opera Mobile, Firefox и Firefox Mobile.
Тег font в HTML используется внутри тега.Узнайте больше о связанных тегах в HTML:
- Тег HTML
- бирка для головы
- тег заголовка
- бирка для тела
- тег p (тег абзаца)
- тег ссылки
- тег img (тег изображения)
- тег (тег привязки)
- тег формы
Хотите узнать больше о вышеупомянутых тегах и многом другом? Обратитесь к статье: Теги HTML
Код шрифта HTML
<голова>
example1 {
шрифт: 16px/22px Garamond, Georgia, с засечками;
оранжевый цвет;
}
.смелый {
вес шрифта: полужирный;
}
.курсив {
стиль шрифта: курсив;
} <тело> <дел>Этот шрифт имеет размер 16 пикселей, высота строки — 22 пикселя, оранжевый цвет и семейство шрифтов «Garamond».
Если на компьютере пользователя нет «Гарамонд», будет использоваться «Грузия». В противном случае он будет использовать шрифт «serif» по умолчанию на компьютере пользователя (часто это «Times» или «Times Roman» — просто оставьте его как «serif»).
Вы также можете указать жирный текст и курсив, если хотите!
