Как изменить размер текста в css

Как увеличить размер шрифта?

Для увеличения или уменьшения шрифта применяется стилевое свойство font-size, значение которого определяет размер текста. В качестве единиц можно применять rem; так, 1rem соответствует размеру шрифта всей веб-страницы. Таким образом, чтобы увеличить шрифт, указываем значение больше 1, например, 1.2rem, что увеличит размер текста на 20%. Ниже показано как задать размер основного текста всей веб-страницы через CSS (пример 1).

Пример 1. Использование font-size

Аналогично определяется размер шрифта и других элементов, в частности, заголовков. В примере 2 показано как задать размер заголовка .

Пример 2. Размер заголовка

Заголовок

Пример текста

См. также

• font-size
• Единицы размера в CSS
• Размер текста
• Свойства шрифта в CSS

CSS: Стиль и размер шрифта

Свойство font-style позволяет выделить текст курсивным, наклонным начертанием или наоборот придать тексту стандартный вид. Данное свойство имеет всего три значения:

• normal — стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное
• italic — курсивное начертание
• oblique — наклонное начертание

     p.exnormal < font-style: normal; >p.exitalic < font-style: italic; >p.exoblique 
Абзац со значением normal.
 
Абзац со значением italic.
 
Абзац со значением oblique.
  

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

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

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

Для изменения размера шрифта используется свойство font-size. Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

body

Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% — 32px. Если вы определите правило, задающее всему тексту внутри элемента значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

body

EM

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

body < font-size: 14px; >h2

В примере мы задали элементу размер шрифта 14px, а для всех элементов — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков будет составлять 1,2 размера шрифта элемента , что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

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

Ключевые слова

CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.

Среднее значение medium — размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего:

     p.class1 < font-size: 120%; >p.class2 < font-size: 18px; >p.class3 
Изменение размера с помощью процентов.
 
Изменение размера с помощью пикселей.
 
Изменение размера с помощью ключевого слова x-small.
  

С этой темой смотрят:

• Отступ текста в CSS
• Выравнивание текста в CSS
• Цвет и тень текста в CSS
• Как изменить шрифт в CSS
• Стандартные (безопасные) шрифты

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

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

Управляйте размером шрифта элемента с помощью утилит text- .

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

p class="text-sm . ">Быстрая коричневая лиса . p> p class="text-base . ">Быстрая коричневая лиса . p> p class="text-lg . ">Быстрая коричневая лиса . p> p class="text-xl . ">Быстрая коричневая лиса . p> p class="text-2xl . ">Быстрая коричневая лиса . p>

Установите высоту строки элемента одновременно с установкой размера шрифта, добавив модификатор высоты строки в любую утилиту изменения размера шрифта. Например, используйте text-xl/8 , чтобы установить размер шрифта 1.25rem с высотой строки 2rem .

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

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

text-base/loose

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

p class="text-base/6 . ">So I started to walk into the water. p> p class="text-base/7 . ">So I started to walk into the water. p> p class="text-base/loose . ">So I started to walk into the water. p>

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

p class="text-sm/[17px] . ">p>

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : text-base , чтобы применять утилиту text-base только при hover .

p class="text-sm hover:text-base"> p> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: text-base , чтобы применить утилиту text-base только на экранах среднего размера и выше.

p class="text-sm md:text-base"> p> 

Размер шрифта в CSS. Единицы измерения px, %, em

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

/* в процентах: */ h1 < font-size: 100%; >/* в единицах измерения em: */ h2 < font-size: 1em; >/* в пикселях: */ h3 < font-size: 18px; >/* с помощью ключевого слова: */ p

Размер шрифта в пикселях

Наиболее простой и понятный способ задать размер шрифта – использовать единицу измерения px . Вы сами указываете высоту шрифта. Допустим, вам необходим шрифт размером 24 пикселя. Для этого запишите стиль CSS:

font-size: 24px;

Размер шрифта в процентах

Вы наверняка уже сталкивались с ситуацией, когда размер шрифта в CSS не задан, вследствие чего браузеру приходится определять размер шрифта «по своему усмотрению». Если точнее, берется предустановленное значение по умолчанию. Именно от него зависят установленные в процентах значения. Например, базовый размер основного текста p , как правило, равняется 16 пикселям. Значение 100% эквивалентно базовому размеру шрифта, который предустановлен в браузере. Поэтому:

p < font-size: 100%; >/* . то же самое, что и значение в браузере по умолчанию: */ p

Если же в этом случае задать размер шрифта 50% , то он будет равен половине базового размера. Значение 200% , наоборот, увеличит шрифт в два раза.

Важно: процентные значения размера шрифта наследуются. Например, если для родительского тега задан размер шрифта 150%, то все вложенные в него теги также унаследуют это значение.

Единица измерения em

По принципу работы единица измерения em похожа на проценты. Значение 1em эквивалентно 100% и соответствует базовому размеру шрифта по умолчанию. Соответственно, 0.6em = 60% , 3em = 300% и так далее. Пример записи:

font-size: 0.9em; /* перед точкой можно опустить ноль: */ font-size: .9em;

Значения размеров шрифтов, указанные в em , наследуются (как и проценты). Это создает некоторые трудности при работе с CSS. Например, если для родительского элемента div задан размер шрифта 2em , то для вложенного в него такого же элемента div шрифт будет увеличен еще в два раза. Наглядный пример можно увидеть на скриншоте:

В качестве альтернативы можно воспользоваться новой единицей измерения, введенной в CSS3 – rem , которая всегда отталкивается от базового размера шрифта. Если в нашем примере изменить значение div с 2em на 2rem , то размер шрифта вложенного элемента div станет таким же, так у родительского. Недостатком единицы измерения rem является то, что она не поддерживается некоторыми браузерами, а именно Internet Explorer версии 8 (и ранее), а также Opera Mini 8.

Ключевые слова

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

Ключевое слово	Размер в пикселях
xx-small	9px
x-small	10px
small	13px
medium	16px
large	19px
x-large	24px
xx-large	32px

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

Завершение

В этой подглаве вы узнали, как задать размер шрифта в CSS. Также мы рассмотрели те единицы измерения, которые наиболее часто используются для установки размера шрифта в таблицах стилей. Для этих целей могут сгодиться и другие единицы измерения CSS, такие как дюймы in , сантиметры cm , миллиметры mm . Но они не слишком хорошо подходят для определения размера текста на веб-страницах, отображаемых на мониторе.

Читайте далее: как установить жирный шрифт и курсив в CSS.