Как сделать размер шрифта в css
Перейти к содержимому

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

  • автор:

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

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

Одним нравится читать мелкий шрифт , другие предпочитают читать крупный .

Есть и такие, которым мелкий шрифт не позволяет читать зрение. Им нужен очень крупный шрифт.

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

Так, например, в браузере Internet Explorer такая настройка выполняется через меню Вид/Размер шрифта . Аналогичная операция в браузере Mozilla Firefox может быть выполнена при помощи клавиатурных аккордов Ctrl + + и Ctrl + — .

Когда разработчик сайта задаёт на своих страницах фиксированный размер шрифта, закрывая изменение размера в браузере, он выступает в роли Карабаса Барабаса, заставляющего марионеток плясать под свою дудку.

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

В качестве исключения из общего правила (“не фиксировать шрифт на сайте”) допускается задание шрифта в абсолютных единицах для небольших фрагментов текста в областях фиксированной ширины, например, для меню на вертикальной полосе. Однако и здесь лучшим решением будет автоматическое расширение полосы при увеличении размера шрифта. Такое подстраивание под размер шрифта можно достичь, если ширину полосы указывать в em ( 1 em примерно равно размеру текущего шрифта).

  • Типографские значения: pt (пункты), pc (пики);
  • Экранное значение: px (пикселы).
  • Геометрические значения: in (дюймы), cm (сантиметры), mm (миллиметры).

Например, текст следующего абзаца выводится при помощи кода “ < P style="font-size:6pt">Текст с размером 6 пунктов. ”.

Текст с размером 6 пунктов.

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

Не кодируйте размер шрифта в абсолютных единицах на своих сайтах.

Самое лучшее, вообще не задавать размер. Тогда браузер будет выводить на страницу текст среднего размера, который пользователь при желании может легко изменить (в нужную сторону).

Для размерных выделений можно безопасно использовать теги SMALL и BIG .

  • Мнемонические размеры: xx-small , x-small , small , medium , large x-large , xx-large .
  • Относительные указания: smaller , larger .
  • Указание в процентах по отношению к размеру шрифта родителя (например, font-size:150% ).

Текст следующего абзаца выводится при помощи кода “ < P style="font-size:75%">Размер шрифта на 25% меньше. ”.

Размер шрифта на 25% меньше.

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

В классическом HTML для управления размером шрифта можно использовать атрибут size тега FONT . Этот приём кодирования также чувствителен к управлению размером шрифта в браузере.

В качестве значений атрибута можно задавать целые числа от 1 до 7:

size=1 size=2 size=3 size=4 size=5 size=6 size=7

Или числа со знаком от -2 до +4 (за 0 принимается “нормальный” размер, то есть размер, который браузер использует по умолчанию; сам 0 задавать нельзя):

size=-2 size=-1 size=+1 size=+2 size=+3 size=+4

Самое правильное — управлять размером шрифта (как и другими визуальными свойствами элементов) при помощи CSS.

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

Для установки размера шрифта используется свойство font-size :

В данном случае высота шрифта составит 18 пикселей. Пиксели представляют наиболее часто используемые единицы измерения. Чтобы задать значение в пикселях, после самого значения идет сокращение «px».

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

Базовый стиль для разных элементов текста отличается: если для параграфов это 16 пикселей, то для заголовков h1 это 32 пикселя, для заголовков h2 — 24 пикселя и т..д.

Для измерения шрифта также можно использовать самые разные единицы измерения.

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

В CSS имеется семь ключевых слов, которые позволяют назначить размер шрифта относительно базового:

  • medium : базовый размер шрифта браузера (16 пикселей)
  • small : 13 пикселей
  • x-small : 10 пикселей
  • xx-small : 9 пикселей
  • large : 18 пикселей
  • x-large : 24 пикселя
  • xx-large : 32 пикселя
font-size: x-large;

Проценты

Проценты позволяют задать значение относительно базового или унаследованного шрифта. Например:

font-size: 150%;

В данном случае высота шрифта будет составлять 150% от базового, то есть 16px * 1,5 = 24px

Наследование шрифта может изменить финальное значение. Например, следующую ситуацию:

    Шрифты в CSS3 div p  

Однажды в студеную зимнюю пору

Здесь элемент p наследует от контейнера — блока div шрифт высотой в 10 пикселей. То есть 10 пикселей теперь будет базовым для параграфа.

Далее для элемента p определяется новая высота шрифта в 150%. Это значит, что финальная высота будет равна 10px * 1,5 = 15px.

Единица еm

Единица измерения еm во многом эквивалентна процентам. Так, 1em равен 100% , .5em равно 50% и т.д.

Размер шрифта в 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.

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

Управляйте размером шрифта элемента с помощью утилит 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> 

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

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