Как задать размер текста в css: Как увеличить шрифт в css

Размер шрифта — Tailwind CSS

​Основы использования

​Установка размера шрифта

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

text-sm

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

text-base

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

text-lg

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

text-xl

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

text-2xl

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

<p>Быстрая коричневая лиса ...</p>
<p>Быстрая коричневая лиса ...</p>
<p>Быстрая коричневая лиса ...</p>
<p>Быстрая коричневая лиса . ..</p>
<p>Быстрая коричневая лиса ...</p>

​Установка высоты строки

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

text-base/6

So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

text-base/7

So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

text-base/loose

So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I

<p>So I started to walk into the water...</p>
<p>So I started to walk into the water...</p>
<p>So I started to walk into the water...</p>

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

<p></p>

​Применяя условно

​Наведение, фокус и другие состояния

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

<p>
  <!-- ... -->
</p>

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

​Контрольные точки и медиа-запросы

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

<p>
  <!-- ... -->
</p>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

​Использование пользовательских значений

​Настройка вашей темы

Вы можете настроить свой собственный набор утилит для изменения размера шрифта, используя раздел theme. fontSize

tailwind.config.js

module.exports = {
  theme: {
    fontSize: {
      sm: '0.8rem',
      base: '1rem',
      xl: '1.25rem',
      '2xl': '1.563rem',
      '3xl': '1.953rem',
      '4xl': '2.441rem',
      '5xl': '3.052rem',
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Предоставление высоты строки по умолчанию

Тема Tailwind по умолчанию настраивает разумную line-height по умолчанию для каждой утилиты text-{size}. Вы можете настроить свою собственную высоту строки по умолчанию при использовании пользовательских размеров шрифта, определив каждый размер с помощью кортежа формы [fontSize, lineHeight]

tailwind.config.js

module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    }
  }
}

Вы также можете указать высоту строки по умолчанию, используя синтаксис объекта, что позволяет также указать значения по умолчанию для letter-spacing и font-weight. Вы можете сделать это, используя кортеж вида [fontSize, { lineHeight?, letterSpacing?, fontWeight? }].

tailwind.config.js

module.exports = {
  theme: {
    fontSize: {
      '2xl': ['1.5rem', {
        lineHeight: '2rem',
        letterSpacing: '-0.01em',
        fontWeight: '500',
      }],
      '3xl': ['1.875rem', {
        lineHeight: '2.25rem',
        letterSpacing: '-0.02em',
        fontWeight: '700',
      }],
    }
  }
}

​Произвольные значения

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

<p>
  <!-- ... -->
</p>

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

CSS/Свойство font-size

Синтаксис

CSS 1

CSS 2‒2.2

CSS 3

font-size: <абсолютный-размер> | <относительный-размер> | <длина> | <проценты> | inherit;

Описание

Свойство font-size устанавливает размер шрифта.

Условия использования

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

JavaScript

[объект].style.fontSize="[значение]";

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

CSS	Раздел
1	5. 2.6 ‘font-size’	Перевод
2	15.2.4 Font size: the ‘font-size’ and ‘font-size-adjust’ properties
2.1	15.7 Font size: the ‘font-size’ property	Перевод
2.2	15.7 Font size: the ‘font-size’ property
3	3.5 Font size: the font-size property	Перевод

Значения

<абсолютный-размер>

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

xx-small

Устанавливает самый мелкий размер текста. (Эквивалентен HTML размеру шрифта равному «1» или размеру шрифта h6. )

font-size: xx-small;

x-small

Устанавливает мелкий размер текста, чуть больший чем «xx-small ».

font-size: x-small;

small

Устанавливает маленький размер текста. (Эквивалентен HTML размеру шрифта равному «2» или размеру шрифта h5.)

font-size: small;

medium

устанавливает средний размер текста. (Эквивалентен HTML размеру шрифта равному «3» или размеру шрифта h5.)

font-size: medium;

large

Устанавливает крупный размер текста. (Эквивалентен HTML размеру шрифта равному «4» или размеру шрифта h4. )

font-size: large;

x-large

Устанавливает очень крупный размер текста. (Эквивалентен HTML размеру шрифта равному «5» или размеру шрифта h3.)

font-size: x-large;

xx-large

Устанавливает самый крупный размер текста. (Эквивалентен HTML размеру шрифта равному «6» или размеру шрифта h2.)

font-size: xx-large;

<относительный-размер>

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

smaller

Уменьшает размер шрифта элемента относительно размера шрифта родительского элемента.

font-size: smaller;

larger

Увеличивает размер шрифта элемента относительно размера шрифта родительского элемента.

font-size: larger;

Прочие значения

<длина>

Указывает размер шрифта в определённых единицах измерения.

font-size: 28pt;

<проценты>

Указывает размер шрифта в процентах относительно базового значения. (За базовое значение принимается значение родительского элемента равное 100%.)

font-size: 190%;

inherit

Указывает, что элемент должен унаследовать параметры родительского элемента.

Начальное значение: «medium».

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство font-size</title>
<style type=»text/css»>
. abs { font-size: x-small; }
.em { font-size: 0.75em; }
.px { font-size: 25px; }
.in { font-size: 0.5in; }
.pt { font-size: 18.8pt; }
.pc { font-size: 0.8pc; }
.per { font-size: 59%; }
</style>
</head>
<body>
<h2>Размер шрифта</h2>
<p>Случайные размеры: <span>x-small</span> | <span>0.75em</span> | <span>25px</span> | <span>0.5in</span> | <span>18.8pt</span> | <span>0.8pc</span> | <span>59%</span>.</p>
</body>
</html>

Свойство font-size

Размер шрифта CSS — javatpoint

Размер шрифта CSS (с примерами)

В этом уроке вы узнаете о размере шрифта CSS с помощью примеров.

CSS font-size Свойство регулирует размер текста на веб-странице. Например,

 р {
    размер шрифта: 36 пикселей;
} 

Вывод браузера

Здесь font-size: 36px устанавливает размер шрифта p элемент на 36px .

Синтаксис размера шрифта CSS

Свойство размер шрифта имеет следующий синтаксис:

 размер шрифта: предопределенное ключевое слово|длина|начальный|наследовать; 

Здесь,

• предопределенное ключевое слово : относится к ключевому слову, которое имеет предопределенный размер шрифта , например маленький , средний , большой , и т. д.
• длина : Относится к размер шрифта с использованием определенной единицы длины, такой как px , em или point.like 24px , 2em и т. д.

Возможные значения для размер шрифта :

Абсолютные и относительные значения

Размер шрифта CSS может быть указан как

1. Абсолютное значение
2. Относительное значение

1. Размер шрифта с использованием абсолютного значения

Абсолютное значение устанавливает фиксированное заданное значение размера. Они указываются в конкретных значениях длины, таких как пиксели ( px ), точки ( pt ) и т. д. Например,

HTML

CSS

 

    <голова>
        <метакодировка="UTF-8" />
        
        <ссылка rel="stylesheet" href="style.css" />
        
    
    <тело>
        
размер шрифта 24 пункта
        
размер шрифта 16 пикселей
        
размер шрифта 10 миллиметров
    
 

 п. первый_параграф {
    /* устанавливает размер шрифта в 24 пункта */
    размер шрифта: 24pt;
}
p.second_paragraph {
    /* устанавливает размер шрифта 16 пикселей */
    размер шрифта: 16px;
}
п.третий_параграф {
    /* устанавливает размер шрифта 10 миллиметров */
    размер шрифта: 10 мм;
} 

Вывод браузера

Примечание . Пиксели ( px ) обычно используются в качестве абсолютной единицы размера шрифта в Интернете. Пиксели обеспечивают согласованный и точный способ указания размера шрифта, на который не влияют предпочтения пользователя или разрешение устройства.

2. Размер шрифта с использованием относительного значения

Относительное значение задает размер относительно его родительских элементов.

Относительные значения указываются с помощью ключевого слова и процентных значений. Например,

HTML

CSS

 

    <голова>
        <метакодировка="UTF-8" />
         0" />
        <ссылка rel="stylesheet" href="style.css" />
        
    
    <тело>
         
Обычный заголовок
 
        <дел>
             
Заголовок с em
 
            
Это пример текста.