Как изменить размер текста в 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 – 2023 © puzzleweb.ru | razumnikum.ru

Как изменить размер текста в 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.

font-size

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант ( xx-small , x-small , small , medium , large , x-large , xx-large ) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Другой набор констант ( larger , smaller ) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.

Рис. 1. Размер шрифта

Синтаксис

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

Значения

Для задания абсолютного размера используются следующие значения: xx-small , x-small , small , medium , large , x-large , xx-large . Их соответствие с размером шрифта в HTML приведено в табл. 1.

Табл. 1. Размер шрифта в CSS и HTML

CSS	xx-small	x-small	small	medium	large	x-large	xx-large
HTML	1	2	3	4	5	6	7

Относительный размер шрифта задается значениями larger и smaller .

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты ( pt ), пикселы ( px ), проценты ( % ) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.

inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Duis te feugifacilisi
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

Результат данного примера показан на рис. 1.

Рис. 2. Применение свойства font-size

Объектная модель

[window.]document.getElementById(» elementID «).style.fontSize

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .