Увеличить размер текста css

Увеличить размер текста css

Свойство font-size позволяет указывать размер текста CSS . Оно влияет не только на шрифт, к которому применяется, но и используется для вычисления единиц измерения em , rem и ex .

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

Значения длины ( px , em , rem , ex и т. д. ), используемые в свойстве font-size , не могут быть отрицательными.

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

Свойство, которое устанавливает в CSS размер текста, принимает следующие ключевые слова:

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

Среди других абсолютных значений можно выделить mm ( миллиметры ), cm ( сантиметры ), in ( дюймы ), pt ( пункты ) и pc ( пики ). Один pt равен 1/72 дюйма, или одна пика равна 12 пунктам. Обычно эти единицы используются в печатных документах.

Относительные ключевые обозначения

  • larger ;
  • smaller .

Например, если свойство font-size у родительского элемента имеет значение small , то у дочернего элемента с относительным значением larger размер текста HTML CSS будет больше.

Процентные обозначения

Процентные значения, как font-size со значением 110%, также являются относительными, и зависят от размера шрифта, указанного в родительском элементе. Предлагаем вам взглянуть на демо .

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

Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:

В приведенном выше примере у абзаца будет установлено значение font-size 16p x, так как 1 x 16 = 16px , а в качестве размера текста HTML CSS заголовка будет использоваться 32px , так как 2 x 16 = 32px . Есть некоторое преимущество в том, чтобы указывать размер, ориентируясь на родительский элемент. Так мы можем оборачивать элементы в контейнеры и быть уверенными в том, что все дочерние элементы всегда будут относительны друг другу:

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

Что касается единиц измерения rem , то здесь font-size всегда зависит от значения корневого элемента ( или элемента html ).

В приведенном выше примере rem равен 16px ( так как это значение наследуется у html -элемента ) и, следовательно, размер текста CSS для всех элементов paragraph будет составлять 24px (1.5 x 16 = 24). В отличие от em-единиц параграф будет игнорировать стилизацию всех родительских элементов, кроме корневого.

Читайте также:  Samsung мобильная сеть недоступна

Эта единица измерения поддерживается следующими браузерами:

Chrome Safari Firefox Opera IE Android iOS
Работает Работает Работает Работает 10+ Работает Работает

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

1ex равен высоте строчной буквы x в используемом шрифте. В примере, приведенном ниже, html-элемент установлен на 20px , а все остальные размеры определяются высотой x определенного шрифта.

Поэкспериментируйте с приведенным выше демо, заменяя семейства шрифтов в html-элементе и таким образом изменяя размер текста CSS .

Единицы изменения viewport (окно просмотра)

Viewport-единицы , такие как vw и vh , позволяют устанавливать размер шрифта относительно длины или ширины окна просмотра:

  • 1vw = 1% от ширины окна просмотра;
  • 1vh = 1% от высоты окна просмотра.

То есть, если мы посмотрим на следующий пример:

то увидим, что размер текста CSS всегда должен находиться на отметке в 100% ширины окна просмотра ( 50vh будет означать 50%, 15vh — 15% и так далее ). В приведенном ниже демо попробуйте изменить высоту, и посмотрите, как растягивается шрифт:

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

Эти единицы измерения поддерживаются следующими браузерами:

Chrome Safari Firefox Opera IE Android iOS
31+ 7+ 31+ 27+ 9+ 4.4+ 7.1+

В нашем распоряжении имеются еще две единицы измерения, основанные на размере окна просмотра. Первая позволяет вычислять значения vh и vw , и устанавливать свойству font-size минимальное значение, а vmax позволяет определить и установить, наоборот, максимальное значение.

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

Единица измерения ch чем-то похожа на ex , и позволяет устанавливать размер текста CSS относительно нулевой ширины глифа:

Эта единица измерения поддерживается следующими браузерами:

Chrome Safari Firefox Opera IE Android iOS
27+ Работает 10+ Работает 9+ Работает Работает

Данная публикация представляет собой перевод статьи « Font-size » , подготовленной дружной командой проекта Интернет-технологии.ру

Стиль шрифта

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

  • normal — стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное
  • italic — курсивное начертание
  • oblique — наклонное начертание
Читайте также:  Попали ногтем в глаз что делать

Попробовать »

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

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

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

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

Пиксели

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

Проценты

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

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

В примере мы задали элементу размер шрифта 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% больше предыдущего:

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию medium
Наследуется Да
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант ( 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

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

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

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

[window.]document.getElementBy >elementID ").style.fontSize

Браузеры

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

Ссылка на основную публикацию
Тор браузер андроид 4pda
Браузер Тор доступен не только для компьютеров и ноутбуков под управлением различных операционных систем. Разработчики обеспокоились и его выпуском для...
Телефон греется и тормозит что делать
Почему тормозит устройство на Andro >Прежде чем перейти непосредственно к решению проблем, стоит указать на их причины. Зная о том,...
Телефон завис на загрузке андроид
В результате поломки аппаратной части или сбоя в работе ОС любой Android-смартфон может перестать реагировать на кнопку включения. Частой можно...
Тор браузер без установки
Tor Browser (ранее он назывался Tor Browser Bundle) – наиболее защищенный интернет-обозреватель из представленных в настоящий момент. Ввиду высокой популярности...
Adblock detector