Как поменять размер текста в css
Перейти к содержимому

Как поменять размер текста в css

  • автор:

КОМПЬЮТЕРНЫЕ КУРСЫ «ПОИСК»

Размер шрифта в CSS задается с помощью свойства font-size, например:

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

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

Идентификатор Единицы измерения
pt пункты
pc пики
px пикселы
em относительная единица измерения, равная значению свойства font-size заданного шрифта
ex относительная единица измерения, равная высоте строчной буквы «x» заданного шрифта
% проценты

Рассмотрим применение каждого из них более подробно.

Следует избегать использования пунктов и пик для оформления текста, предназначенного для отображения на экране. Эти единицы идеально подходят для задания размера шрифта для печати; измерение в пунктах пришло из полиграфии. Пункт составляет 1/72 часть дюйма, а пика – шестую часть дюйма. После печати текстовые документы, шрифт в которых задан в данных единицах, будут в точности соответствовать намерениям автора – в конечном счете шестая часть дюйма остается шестой частью дюйма как на листе формата А4, так и на ватмане. Однако компьютеры не в состоянии отобразить физические размеры с такой точностью, и они пытаются угадать – причем не слишком успешно – размер пункта или пики, из-за чего под различными платформами один и тот же документ может отображаться по-разному.

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

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

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

Em – относительная единица измерения размеров шрифта. Ее название пришло из области типографии, где оно соответствует размеру заглавной буквы М, которая, как правило, является самым широким символом шрифта. В CSS 1em соответствует размеру шрифта, используемому в системе пользователя по умолчанию, или размеру шрифта родительского элемента, если он отличается от используемого по умолчанию.

Если вы используете em (или другие относительные единицы) для задания размера всех шрифтов, пользователи смогут изменять размер символов текста в соответствии с настройками размера символов, установленными в их броузере. Для примера создадим описание стиля, задающее размер шрифта внутри элемента p равным 1em:

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

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

Чтобы текст стал на 10 процентов крупнее, чем при использовании значения по умолчанию или унаследованного значения, можно использовать следующее правило:

Еx – относительная единица измерения размеров, соответствующая высоте строчной буквы «х» шрифта по умолчанию. Теоретически, если присвоить свойству font-size абзаца значение 1ex, его заглавные буквы будут той же высоты, какую имела бы строчная буква x, если бы размер шрифта не был задан (при этом размер строчных букв рассчитывался бы относительно заглавных).

Как и в случае с em и ex, при задании размеров в процентах размеры будут соотноситься с настройками пользовательского броузера, и пользователь сможет самостоятельно изменять размер шрифта. Значение 100% размера шрифта для элемента p соответствует размеру шрифта, заданному настройками по умолчанию (так же, как и при задании значения 1em). При уменьшении процентного значения размер текста уменьшается:

При увеличении процентного значения размер текста увеличивается:

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

Ключевые слова с абсолютными значениями

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

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

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

Измерения с помощью ключевых слов называются абсолютными, поскольку при этом отсутствует наследование от родительского элемента. Тем не менее в отличие от применения абсолютных значений, например в пикселах или пунктах, использование абсолютных ключевых слов позволяет посетителю сайта изменять размер шрифта вручную, а также не переопределяет пользовательские настройки броузера. Основной проблемой при применении абсолютных ключевых слов становится несоответствие отображения текста, оформленного с их помощью, в разных броузерах – текст с размером xx-small может быть отчетливо виден в одном броузере и совершенно нечитаем в другом.

Ключевые слова с относительными значениями

При задании размера шрифта с помощью относительных ключевых слов – larger и smaller – он определяется по отношению к размеру, установленному для родительского элемента, подобно тому, как это происходит при использовании em и %. Таким образом, если размер элемента p задан с помощью абсолютного ключевого слова small, и вы хотите, чтобы выделенный фрагмент текста отображался более крупным шрифтом, можно использовать следующую таблицу стилей:

p font-size: small;
>
em font-size: larger;
>

Данная разметка будет отображена, поскольку текст между тегами и отображается более крупным шрифтом, чем текст родительского элемента p:

Пример:

В данном примере размер шрифта устанавливается в классе copy. Текст, заключенный в тег , печатается с отступом 2em. Размер заголовка третьего уровня больше, чем размер основного текста, установленный браузером по умолчанию.

    Пример .copy < font-size:12px >blockquote < font-size:2em >h3 

CHAPTER II
The Pool of Tears

After Word has been installed on a network server, workstation users can select one of three options.

THE FOLLOWING TABLES DETAIL HOW WORD FILES AND DIRECTORIES
ARE DISTRIBUTED IN A NETWORK ENVIRONMENT—ON A SERVER, AT
A SINGLE-USER WORKSTATION, AND AT A SHARED-VERSION WORKSTATION.

Результат:

CHAPTER II
The Pool of Tears

After Word has been installed on a network server, workstation users can select one of three options.

THE FOLLOWING TABLES DETAIL HOW WORD FILES AND DIRECTORIES ARE DISTRIBUTED IN A NETWORK ENVIRONMENT — ON A SERVER, AT A SINGLE-USER WORKSTATION, AND AT A SHARED-VERSION WORKSTATION.

Как изменить user agent stylesheet? Размер шрифта в CSS

Добрый вечер! Недавно начал заниматься CSS и HTML. Я столкнулся с проблемой в CSS, что не могу изменить размер шрифт текста. Могу изменить цвет, а размер шрифта нет. Подскажите какая может причина? Может user agent stylesheet? Если да, то как лучше его изменить? Заранее спасибо!

  • После изменения ЧПУ начал падать трафик в гугл
  • Как убрать пробел под шапкой?
  • Изменение User-Agent робота РСЯ

На сайте с 30.03.2008
24 января 2016, 11:40

Allwin:
Добрый вечер! Недавно начал заниматься CSS и HTML. Я столкнулся с проблемой в CSS, что не могу изменить размер шрифт текста. Могу изменить цвет, а размер шрифта нет. Подскажите какая может причина? Может user agent stylesheet? Если да, то как лучше его изменить?
Заранее спасибо!

Покажите пример, где не получается изменить размер.

Чтобы верстка одинаково смотрелась в разных браузерах придумали сброс стандартных стилей, есть разные варианты, я рекомендую normalize.css.

Магазин аккаунтов с балансом Litres,DNS,Ozon,Rotapost и еще 50+ других сервисов тут — vk.cc/7QK0Sk
На сайте с 19.01.2016
24 января 2016, 19:13

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

Я пробовал уже normalize.css, он получается работает для всего контента, а мне нужно изменить именно один кусочек. Я так же пробовал и в других единицах вводить размер шрифта, тоже не помогает.

png 148510.png
На сайте с 30.03.2008
24 января 2016, 19:20

Allwin:
Вот скриншот. Я не могу понять почему не делаеться больше шрифт, хотя цвет шрифта я могу поменять без проблем.
Я пробовал уже normalize.css, он получается работает для всего контента, а мне нужно изменить именно один кусочек. Я так же пробовал и в других единицах вводить размер шрифта, тоже не помогает.

В CSS нет front-size, есть только font-size.

Размер шрифта в css: font-size

Размер шрифта в css: font-size

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

Всегда размер отличается у заголовков, подзаголовков и простого текста.

В языке CSS есть свойство, которое позволяет задаваться размеры: «font-size».

К примеру, зададим основной размер шрифта для сайта:

body

Мы указали, что по умолчанию размер шрифта на сайте равно 14px.

Также размер можно указывать в пунктах, процентах, ключевыми словами и в соотношении.

font-size: 14px; // в пикселях font-size: 12pt; // в пунктах font-size: 120%; // в процентах font-size: 1.2em; // В соотношении font-size: small; // Ключевым словом

Когда мы указываем размер в процентах или в соотношении, размер отталкивает от размера по умолчанию. К примеру, если у нас в размер шрифта 14px, а для

мы указываем 110%, то эти проценты считаются от 14px у , аналогично и с соотношением.

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

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

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

Тег Рекомендуемый размер В соотношении
body 14 px 1 em
p 14 px 1 em
h1 32 px 2 em
h2 24 px 1.5 em
h2 19 px 1.17 em

Единицы измерения CSS, размер шрифта

Данная статья учебника посвящена вопросам, связанным с управлением размера шрифта в CSS, в том числе существующие ключевые слова. Рассмотрено применение всех единиц измерения современного стандарта, а именно: дюймы, сантиметры, миллиметры и четверь миллиметра, пики, пункты, пиксели, процентные значения, единица измерения еm, rem, еx, ch и масштабируемые величины относительно экрана — vw, vh, vmin и vmax.

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

В CSS за установку размера шрифта отвечает CSS свойство font-size, которое имеет поддержку всеми основными браузерами. Свойство font-size записывается следующим образом:

Селектор  font-size: значение с единицей измерения величины;  

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

p  font-size: 10px; /* установить размер шрифта 10 пикселей для всех абзацев */  

В CSS 3 существует разнообразный набор единиц измерения для различных задач, давайте рассмотрим, что нам предлагает современный стандарт.

Абсолютные величины

Физические единицы:

  • Дюймы (in), 1in = 2.54cm (сантиметры) = 96px (пиксели).
  • Сантиметры (cm), 1cm = 96px/2.54.
  • Миллиметры (mm), 1mm = 1/10 от 1cm.
  • Четверть миллиметра, (q) 1q = 1/40 от 1cm.
  • Пики (pc), 1pc = 1/6 от 1 дюйма, 1pc = 12pt = 1/6 дюйма.
  • Пункты (pt), 1pt = 1/72 дюйма.

Как вы можете заметить, к абсолютным величинам относятся дюймы, сантиметры, миллиметры, пики и пункты. Как правило, абсолютные величины используются только в печати (предназначены для использования совместно с устройствами вывода), так как отображение информации будет отличаться в зависимости от монитора, поэтому они имеют очень скудное применение на веб-страницах.

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

Визуальные единицы:

Пиксели (px), 1px = 1/96 от 1in (дюйма).

body  font-size: 16px; /* установить размер шрифта 16px для всего видимого содержимого */ > 

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

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

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

Относительные единицы

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

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

html  font-size: 16px; > 

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

   Пример использования процентных значений .halfFontSize  font-size: 50%; > .doubleFontSize  font-size: 200%; >  Обычный параграф на странице class="halfFontSize">Параграф, к которому применен стиль с размером шрифта 50% от родительского элемента. class="doubleFontSize">Параграф, к которому применен стиль с размером шрифта 200% от родительского элемента.   

Результат нашего примера:

Рис.51 Пример использования процентных значений.

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

Первый параграф: 16px * 100% = 16px Второй параграф: 16px * 50% = 8px Третий параграф: 16px * 200% = 32px 

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

   Пример наследования процентных значений div  font-size: 12px; /* устанавливаем базовый размер шрифта для всех блоков 
*/ > .doubleFontSize /* устанавливаем размер шрифта в два раза больше чем родительский */ font-size: 200%; > .doubleFontSize > div /* использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы
внутри элемента
с классом doubleFontSize получат размер шрифта в два раза больше чем родительский */ font-size: 200%; > Родительский div 12px class="doubleFontSize">Блок, к которому применен стиль с размером шрифта 200% от родительского элемента. Блок, который наследует значение

Результат нашего примера:

Рис.52 Пример наследования процентных значений.

Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:

12px * 200% = 24px 

Если бы мы не изменили значение размера шрифта для блока , то расчёт бы происходил исходя из базового шрифта:

16px(базовый размер шрифта) * 200% = 32px 

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

Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т.к. расчёт происходит исходя из размера шрифта родительского элемента:

размер шрифта родительского элемента * 200% = 48px 

Единица измерения еm.

Em является стандартной единицей измерения, используемой в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.

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

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

базовый размер текста = 1em = 100% базовый размер текста * 2 = 2em = 200% базовый размер текста * 0.5 = 0.5em = 50% 

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

   Пример использования значений em  style = "font-size:.8em;">font-size:0.8em style = "font-size:80%;">font-size:80% style = "font-size:1.5em;">font-size:1.5em style = "font-size:150%;">font-size:150% style = "font-size:1.8em;">font-size:1.8em style = "font-size:180%;">font-size:180%   

Результат нашего примера:

Рис.53 Пример использования значений em.

Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.

Единица измерения rеm.

Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.

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

   Пример наследования значений em div  font-size: 1.25em; >  Блок 1 Блок 2 Блок 3 Блок 4 Блок 5 Блок 6

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

Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании 🙂

Рис.54 Пример наследования значений em.

Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem .

   Пример использования значений rem div  font-size: 1.25rem; >  Блок 1 Блок 2 Блок 3 Блок 4 Блок 5 Блок 6        

В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1.25rem . В результате, как Вы можете заметить, размер каждого блока одинаков, это происходит по той причине, что размер текста рассчитывается исходя из размера текста корневого (root) элемента, а не родительского элемента.

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

Рис.55 Пример использования значений rem.

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

Единица измерения еx.

Единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x». Данная единица измерения имеет очень редкое применение, в основном касается типографских микро настроек.

В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0.5em.

Рис.56 Пример вычисления высоты единицы измерения ex.

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

Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа ‘0’ (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:

.width50  width: 50ch; /* ширина блока равняется 50 символов (необходим моноширинный шрифт) */ > 

Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.

Масштабируемые величины относительно экрана

С развитием стандарта каскадных таблиц стилей стали доступны такие единицы измерения, которые позволяют задать размеры относительно окна пользователя (области просмотра).

Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.

В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:

   Масштабируемые единицы измерения *  margin: 0 ; /* внешние отступы для всех сторон*/ > .viewportHeight30  font-size: 5vw; /* размер шрифта*/ width: 100vw; /* ширина блока */ height: 30vh; /* высота блока */ background-color: orange; /* цвет заднего фона */ > .viewportHeight50  font-size: 4vw; width: 75vw; height: 50vh; background-color: yellow; > .viewportHeight20  font-size: 3vw; width: 50vw; height: 20vh; background-color: red; >   class = "viewportHeight30">font-size: 5vw; width:100vw; height:30vh; class = "viewportHeight50">font-size: 4vw; width:75vw; height:50vh; class = "viewportHeight20">font-size: 3vw; width:50vw; height:20vh;   

В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 5vw (5% от ширины области просмотра), для второго — 4vw , для третьего — 3vw ), ширину блоков (для первого – 100vw (100% от ширины области просмотра), для второго — 75vw , для третьего — 50vw ) и высоту блоков (для первого – 30vh (30% от высоты области просмотра), для второго — 50vh , для третьего — 20vh ).

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

Чтобы избавится от полосы прокрутки, мы установили универсальный селектор *, который выбирает все элементы и убирает внешние отступы у всех элементов. Это мы сделали по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw добавляют полосу прокрутки, чего быть не должно (этот баг возникает при overflow : auto – свойство, которое отвечает за переполнение элемента содержимым, установленное по умолчанию).

Полную информацию о работе с внешними отступами вы получите в статье учебника «Блочная и строчная модель в CSS», а работу с переполнением элементов мы рассмотрим в статье «Размеры блочных элементов в CSS».

Результат нашего примера:

Рис.57 Масштабируемые единицы измерения.

Минимальное и максимальное значение области просмотра

Заключительные единицы измерения, которые мы рассмотрим в этой статье это vmin и vmax. Обратите внимание на то, что эти значения могу принимать как значения высоты, так и ширины области просмотра:

Давайте рассмотрим, в чем заключается разница между vmin и vmax на следующем примере:

.viewportMin < . viewportMax < width : 40vmin ; width : 40vmax ; height : 40vmin ; height : 40vmax ; >>

   Vmin и vmax c масштабируемыми единицами измерения *  margin: 0; > div  display: inline-block; /* элементы блочно-строчные (выстраиваем в линейку) */ color: white; /* цвет шрифта*/ > .viewportMin  width: 40vmin; /* ширина блока */ height: 40vmin; /* высота блока */ background-color: black; /* цвет заднего фона */ > .viewportMax  width: 40vmax; /* ширина блока */ height: 40vmax; /* высота блока */ background-color: blue; /* цвет заднего фона */ >   class = "viewportMin">viewportMin w&h - 40vmin class = "viewportMax">viewportMax w&h - 40vmax  

В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block ), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0 .

Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin . Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%. В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:

400px (текущее минимальное значение viewport области просмотра) * 40% = 160px 

Для высоты расчёт аналогичен:

400px (текущее минимальное значение viewport) * 40% = 160px. 

В итоге мы получили «квадрат Малевича».

Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:

Ширина - 700px(текущее максимальное значение viewport) * 40% = 280px. Высота - 700px (текущее максимальное значение viewport) * 40% = 280px. 

Обращаю Ваше внимание, что при изменении области видимости (размеров окна) браузер пересчитывает значения «на лету», что очень удобно и пригодится в будущем при адаптивном дизайне.

Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.

Масштабируемые единицы измерения, надеюсь, имеют счастливое будущее, но в настоящее время не так активно используются по тем основным причинам, что:

  1. Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Android – полностью не поддерживают, IE Mobile – не поддерживает vmax , iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax , 7 версия – некорректно работала единица измерения vh ).
  2. Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:
    • IE работает только с версии 9.0 (поддерживает значение vm , вместо vmin ).
    • IE 10, IE 11 не поддерживают значение vmax .
    • Edge 12, 13, 14 не поддерживают значение vmax .

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

i  font-size: small; /* устанавливает размер шрифта маленького размера для всех элементов */ > 

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

Значение Описание
medium Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
small Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
x-small Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-small Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
smaller Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
large Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-large Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-large Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
larger Устанавливает размер шрифта большего размера, чем у родительского элемента.

Рассмотрим пример использования ключевых слов на странице:

   Ключевые слова для управления размером шрифта .medium font-size: medium;> .small font-size: small;> .x-small font-size: x-small;> .xx-small font-size: xx-small;> .smaller font-size: smaller;> .large font-size: large;> .x-large font-size: x-large;> .xx-large font-size: xx-large;> .larger font-size: larger;>   class = "medium">Блок с ключевым словом medium class = "small">Блок с ключевым словом small class = "x-small">Блок с ключевым словом x-small class = "xx-small">Блок с ключевым словом xx-small  class = "smaller">Блок с ключевым словом smaller class = "large">Блок с ключевым словом large class = "x-large">Блок с ключевым словом x-large class = "xx-large">Блок с ключевым словом xx-large  class = "larger">Блок с ключевым словом larger   

В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).

Результат нашего примера:

Рис.59 Использование ключевых слов для управления размером шрифта.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:

body, div  /* создаем групповой селектор */ font-size: 150%; /* устанавливает размер шрифта 150% */ > 

Сделаем следующую разметку:

 Текст внутри тела документа Текст внутри блока Текст внутри вложенного блока  
body, div  /* создаем групповой селектор */ font-size: 1.5em; /* устанавливаем размер шрифта 1.5em */ > 

Сделаем следующую разметку:

 Текст внутри тела документа Текст внутри блока Текст внутри вложенного блока  
body, div  /* создаем групповой селектор */ font-size: 1.5rem; /* устанавливаем размер шрифта 1.5rem */ > 

Сделаем следующую разметку:

 Текст внутри тела документа Текст внутри блока Текст внутри вложенного блока  

Цветовое оформление в CSS
Форматирование текста в CSS

© 2016-2024 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

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

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