Размер текста | WebReference
Размер шрифта или, как он ещё называется в типографике — кегль, определяется высотой символов, которая, в свою очередь, на веб-странице может задаваться как в относительных (em, rem), так и в абсолютных единицах (дюймы (in), миллиметры (mm), пункты (pt) и др).
На вид шрифта влияет не только заданный размер, но и выбор гарнитуры. Шрифт Arial выглядит крупнее, чем шрифт Times того же размера, а шрифт Courier New чуть меньше шрифта Arial (рис. 1). Учитывайте эту особенность при выборе шрифта и его размеров.
Рис. 1. Размеры текста на веб-странице
На рис. 1 приведены три типа шрифтов с размером 12 и 24 пункта. Легко заметить, что при одинаковых заданных размерах текст различается как по высоте, так и по насыщенности.
Размер текста устанавливается через свойство font-size, значение может быть задано несколькими способами. Набор констант (хх-small, x-small, small, medium, large, x-large, xx-large) указывает размер, который называется абсолютным.
На практике константы применяются редко, а в основном используются допустимые единицы CSS: em (высота шрифта элемента), пункты (pt), пиксели (рх) и др. Перечислим несколько популярных.
Пиксели
Пиксель — это элементарная точка устройства. Размеры элементов веб-страницы, вроде изображений и колонок преимущественно делаются именно в пикселях, поэтому имеет смысл задавать и шрифт в этих единицах.
Пункты
Пожалуй, самая распространённая единица для указания размера шрифта. Многие люди привыкли задавать размер текста в текстовых редакторах, например 12. А что это число означает, не понимают. Так это и есть пункты, пожалуй, единственная величина не из метрической системы измерения, которая используется у нас повсеместно.
em
Эта единица показывает размер шрифта текущего элемента и он всегда равен 1em независимо от реального размера текста. Зачем тогда использовать? Em связан с размером шрифта родительского элемента и мы можем легко изменять размер текста самого элемента в большую (1.2em) или меньшую сторону (0.8em) без дополнительных вычислений. В каком-то смысле это является синонимом процентной записи.
rem
При использовании множественных вложений одних элементов в другие, с em легко запутаться в вычислениях. Например, если уменьшить размер шрифта до 0.8em, а потом у дочернего элемента увеличить до 1.2em, то будет ли текст одного размера? Единица rem привязана только к корневому элементу и таким образом не зависит от уровня вложения элементов.
В примере 1 задействовано сразу несколько единиц измерений.
Пример 1.
Изменение размеров текста
Результат данного примера показан на рис. 2.
Рис. 2. Задание размера для заголовка и основного текста
- <big>
- font-size
Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Свойство font-size, размер шрифта — Оформление текста — HTML Academy
Загрузка…
Через несколько секунд всё будет готово
- index.html
- style.
css
cssHTML
<!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;
}
.
Что в задании вам не понравилось?
Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)
Другое (сейчас напишу)
Спасибо! Мы скоро всё исправим)
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
- Для заголовка
h2изменитеfont-sizeна24px, - затем добавьте абзацу
<p>Блог</p>классpage-title - и создайте правило для этого класса с заданием размеру шрифта значения
36px.
Размер шрифта — Tailwind CSS
Основное использование
Установка размера шрифта
Управляйте размером шрифта элемента с помощью утилит text-{size} .
текст-см
Быстрая коричневая лиса прыгает через ленивую собаку.
текстовая база
Быстрая коричневая лиса прыгает через ленивую собаку.
текст-lg
Быстрая коричневая лиса прыгает через ленивую собаку.
текст-xl
Быстрая коричневая лиса прыгает через ленивую собаку.
текст-2xl
Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса...
Быстрая коричневая лиса...
Быстрая коричневая лиса...
Быстрая коричневая лиса...
Быстрая коричневая лиса...
Применение условно
Наведение, фокус и другие состояния
Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов.
Например, используйте text-base .
Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.
Точки останова и медиа-запросы
Вы также можете использовать модификаторы вариантов для таргетинга медиа-запросов, таких как чувствительные точки останова, темный режим, предпочтения с уменьшенным движением и т. д. Например, используйте md:text-base для применения утилиты text-base только на экранах среднего размера и выше.
Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.
Использование пользовательских значений
Настройка вашей темы
Вы можете настроить свой собственный набор утилит размера шрифта, используя раздел theme. файла 
fontSize tailwind.config.js 9файл 0008.
tailwind.config.js
module.exports = {
тема: {
размер шрифта: {
см: «0,8 бэр»,
база: '1рем',
xl: «1,25 бэр»,
«2xl»: «1,563 бэр»,
«3xl»: «1,953 бэр»,
«4xl»: «2,441 бэр»,
«5xl»: «3,052 бэр»,
}
}
}
Дополнительные сведения о настройке темы по умолчанию см. в документации по настройке темы.
Предоставление высоты строки по умолчанию
Тема Tailwind по умолчанию настраивает разумную высоту строки по умолчанию для каждой утилиты text-{size} . Вы можете настроить собственную высоту строки по умолчанию при использовании нестандартных размеров шрифта, определив каждый размер с помощью кортежа формы [fontSize, lineHeight] в файле tailwind.config.js .
tailwind.config.js
module.exports = {
тема: {
размер шрифта: {
см: ['14px', '20px'],
база: ['16px', '24px'],
LG: ['20px', '28px'],
xl: ['24px', '32px'],
}
}
} Вы также можете указать высоту строки по умолчанию, используя синтаксис объекта, который также позволяет указать значение по умолчанию letter-spacing и font-weight значения.
Вы можете сделать это, используя кортеж вида [fontSize, {lineHeight?, letterSpacing?, fontWeight? }] .
tailwind.config.js
module.exports = {
тема: {
размер шрифта: {
'2xl': ['1.5rem', {
lineHeight: '2rem',
letterSpacing: '-0.01em',
fontWeight: '500',
}],
'3xl': ['1.875rem', {
lineHeight: '2.25rem',
letterSpacing: '-0.02em',
Вес шрифта: '700',
}],
}
}
} Произвольные значения
Если вам нужно использовать одноразовое значение размера шрифта , которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства на лету, используя любое произвольное значение.
Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.
Текст: Размер текста - Учебник по HTML
Текст HTML : РАЗМЕР ТЕКСТА |
| | | |
|
