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

Содержание

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

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

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

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

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


body{font-size: 14px;}

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

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

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

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

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

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

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

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

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

Шрифты

« Предыдущая статья

Прозрачный фон на css: background

Следующая статья »

Фиксированный блок в css

Антиспам поле. Его необходимо скрыть через css

Ваше имя

Электронная почта

Ваше сообщение

Присылайте свои вопросы, предложения и пожелания на электронную почту. Будем рады сотрудничеству.

E-mail: [email protected]

Telegram: daruse93

Вы можете сказать спасибо автору сайта или перевести оплату.

Выделите опечатку и нажмите

Ctrl + Enter, чтобы отправить сообщение об ошибке.

Размеры шрифтов CSS.

Пиксели vs Em vs Rem vs Проценты vs Viewport единицы

В этой статье вы узнаете про выставление размера шрифта в пикселях, em, rem, процентах и viewport единицах.

Эта статья перевод — CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units

Очень много обсуждений велось по поводу пикселей, em, процентов, rem и какое свойство шрифтов когда использовать. Не смотря на более сотни статей в сети, эта тема может быть довольно запутанной, учитывая то, как использование этих свойств шрифтов разнится в зависимости от нужд наших проектов. Для примера, некоторые советуют не использовать фиксированные пиксели на базовом уровне (html и body элементы), так как пользователь не будет иметь возможности сбросить размер шрифтов под свои параметры. Но для людей типа меня, которые зависимы от bootstrap, это не совсем благоразумно. Мы заканчиваем с фиксированными основными значениями в пикселях и начинаем создавать свойства шрифтов для всего проекта, отталкиваясь от основных пиксельных значений.

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

Пиксели

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

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

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

@media (max-width: 400px) {
 html, body { font-size: 15px; }
}

и все em значения будут автоматически пересчитаны.

Тем не менее, у em есть большое предостережение! Наследование!

Для примера, <div> с размером шрифта в 16px содержит <p> размером шрифта в 2em, что пересчитывается как 32px для <p>. Теперь добавьте <div> в <p> с размером шрифта в 0.5em, как результат у дива будет размер 16px, как у половины от 32px, а не 8px. И тут нам на помощь приходят rem.

Rem

rem относителен размеру шрифта корневого элемента(html элемент). Если размер шрифта html элемента равен 16px, то 1rem =

16px. Rem будет ВСЕГДА относителен корневому элементу, не полагаясь на вложенные элементы. Тем не менее, использование исключительно rem без em может вызвать своеобразные проблемы в плане типографики, так как она может стать слишком большой или маленькой, что приведет к проблемам в масштабируемости.

Проценты

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

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

Единицы viewport

Ширина и высота viewport свойств относительна ширине/высоте заданного размера viewport.

Подробно про viewport единицы вы можете почитать в этой статье.

1vw = 1% ширины viewport

1vh = 1% высоты viewport

Viewport в данному случае означает размер окна браузера. Если вы хотите выставить размер элемента, основываясь на ширине viewport, а не на родительском/корневом элементе, то viewport единицы это то, что вам нужно.

vw/vh единицы отлично работают с типографикой и широко используются там же.

Финальный вердикт

С тех пор как я часто начал использовать Bootstrap, мой стандартный размер базового шрифта стал в пикселях. Я использую проценты, чтобы выставить ширину и высоту для изображений, контейнеров и дивов, а em и rem для типографики и элементов относящихся к типографике, таким как margin и padding и т. п. Сейчас я играюсь с единицами viewport для адаптивной типографики и нахожу это очень крутым. Экспериментируйте с этими свойствами как можно больше и вы вскоре найдете стиль подогнанный именно для вас.

Стандарты написания гибкого, надежного и жизнеспособного HTML c CSSCSS свойство background-image как антипаттерн

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

Пример <стиль> п { цвет: ярко-розовый; размер шрифта: 1.5em; } .lg { размер шрифта: 150%; } .sm { размер шрифта: 70%; }

Auctor augue mauris augue neque gravida in fermentum. Euismod elementum nisi quis eleifend. Nec ultrices dui sapien eget mi proin sed libero. Praesent semper feugiat nibh sed.

Свойство CSS font-size используется для указания размера шрифта.

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

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

Синтаксис

размер шрифта: <абсолютный размер> | <относительный размер> | <длина> | <процент>

Возможные значения

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

Позволяет указать абсолютный размер шрифта с помощью ключевого слова. Доступны абсолютные ключевые слова:

хх-маленький
х-маленький
маленький
средний
большой
большой
xx-большой

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

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

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

больше
меньше

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

длина

Указывает абсолютный размер шрифта, используя допустимое значение длины (например, 18px , 1.5em , 14pt и т.д.). Это значение не зависит от таблицы шрифтов пользовательского агента. Отрицательные длины недопустимы.

процент

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

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

начальный: Представляет значение, указанное как начальное значение свойства.
унаследовать: Представляет вычисленное значение свойства родительского элемента.
снято с охраны: Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Общая информация

Исходное значение: средний
Применяется к: Все элементы
Унаследовано?: Да (вычисленное значение)
СМИ: Визуальный
Анимируемый: Да (см. пример)

Пример кода

ч2 { размер шрифта: 24px; } п { размер шрифта: 1em; } цитата { размер шрифта: 120%; } навигация { размер шрифта: меньше; }

Эталон абсолютного размера

Вот примерное руководство по сопоставлению абсолютных размеров CSS и заголовков HTML и абсолютных размеров шрифта.

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

CSS значения абсолютного размера	xx-маленький	х-маленький	маленький	средний	большой	x-большой	xx-большой
коэффициент масштабирования	3/5	3/4	8/9	1	6/5	3/2	2/1	3/1
HTML-заголовки	ч6		ч5	ч5	ч4	h3	ч2
Размеры шрифтов HTML	1		2	3	4	5	6	7

Ограничения размера шрифта

Свойство

Разные шрифты имеют разную высоту x. Таким образом, один шрифт может выглядеть больше при заданном размере, чем другой шрифт. Это нормально, если вы имеете дело только с одним шрифтом. Но в Интернете мы обычно имеем дело со списком шрифтов — начиная с нашего первого выбранного шрифта, затем с одним или несколькими «запасными» шрифтами, если у пользователя нет предпочитаемого нами шрифта.

Обычно это делается с помощью кода, который выглядит примерно так:

размер шрифта: 18px; семейство шрифтов: Optima, IrisUPC, без засечек;

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

Но как насчет пользователей, которые не могут использовать наш первый выбранный шрифт? Они получат второй вариант (если он доступен) или третий вариант, если ни один из них не доступен, и так далее.

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

К счастью, CSS позволяет решить эту проблему.

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

Официальные спецификации

Модуль шрифтов CSS уровня 3 (кандидатная рекомендация W3C от 3 октября 2013 г.)
CSS Уровень 2.1 (Рекомендация W3C от 7 июня 2011 г. )
CSS Уровень 1 (Рекомендация W3C от 17 декабря 1996 г.)

Полное руководство по размеру шрифта — SitePoint

JavaScript

20 августа 2009 г.

Размер шрифта в CSS звучит так, как будто это должно быть легко. Пока не попробуешь. Многие разработчики используют силу; они возятся со свойством CSS font-size до тех пор, пока оно не будет выглядеть правильно, только чтобы обнаружить, что оно отличается в другом браузере. Немного понимания может иметь большое значение…

Свойство font-size

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

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

Ключевые слова абсолютного размера шрифта

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

размер шрифта: xx-маленький;
размер шрифта: x-маленький;
размер шрифта: маленький;
размер шрифта: средний;
размер шрифта: большой;
размер шрифта: x-большой;
размер шрифта: xx-крупный;

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

Ключевые слова относительного размера шрифта

Доступны два ключевых слова относительного размера шрифта. Размер шрифта соответствует его родительскому элементу:

размер шрифта: меньше;
размер шрифта: больше;

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

Абсолютные длины

Свойству font-size может быть присвоена абсолютная длина:

мм : миллиметры, например. 10мм.
см : сантиметры, напр. 1 см (= 10 мм).
в : дюймы, т.е. 0,39 дюйма (~= 10 мм).
pt : точка, где 1 pt обычно считается равным 1/72 дюйма, например. 12пт.
шт. : пика, где 1 шт. – 12 пт.
px : пиксель, например. 14 пикселей.

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

Relative Lengths

Свойству font-size можно присвоить единицу измерения относительно размера шрифта родителя:

em : 1em эквивалентно текущему размеру шрифта, поэтому 2em вдвое больше.
% : 100% эквивалентно текущему размеру шрифта, поэтому 200% в два раза больше.
ex : 1ex соответствует высоте буквы «x» в текущем шрифте.

Немногие разработчики используют «ex», но это может быть полезно в некоторых ситуациях, когда вам нужны точные размеры шрифта, например. 1ex, а не 0,525em.

Размеры в процентах и «em» эквивалентны, например. 50 % = 0,5 em, 100 % = 1 em, 120 % = 1,2 em и т. д. Некоторые браузеры демонстрируют незначительные различия, но это редко бывает серьезной проблемой. Если вы хотите сохранить каждый байт, вы можете выбрать самое короткое определение, то есть 50% короче 0,5em, а 1em короче 100%.

Размер текста и масштабирование страницы

Здесь возникает дополнительная сложность. Большинство браузеров позволяют пользователю:

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

Чтобы еще больше усложнить ситуацию, Internet Explorer не позволяет изменять размер текста для элементов, размер шрифта которых определяется в пикселях (px).

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

Поделиться этой статьей

Крейг Баклер

Крейг — внештатный веб-консультант из Великобритании, который создал свою первую страницу для IE2.0 в 1995 году. С тех пор он пропагандирует стандарты, доступность и лучшие методы HTML5. Он создал корпоративные спецификации, веб-сайты и онлайн-приложения для компаний и организаций, включая парламент Великобритании, Европейский парламент, Министерство энергетики и изменения климата, Microsoft и другие.