Свойство font-size устанавливает размер
шрифта текста. Значением свойства служат
любые единицы
для размеров (как правило, это px, em
или rem) либо специальные ключевые слова
(используются крайне редко).
Синтаксис
селектор {
font-size: значение;
}
Значения в виде ключевых слов
Значение
Описание
xx-small
Самый самый маленький. Пример: Lorem ipsum dolor sit amet.
x-small
Самый маленький. Пример: Lorem ipsum dolor sit amet.
small
Маленький. Пример: Lorem ipsum dolor sit amet.
medium
Средний. Пример: Lorem ipsum dolor sit amet.
large
Большой. Пример: Lorem ipsum dolor sit amet.
x-large
Очень большой.
Пример: Lorem ipsum dolor sit amet.
xx-large
Самый большой. Пример: Lorem ipsum dolor sit amet.
larger
Больше шрифта родителя на некоторое значение.
smaller
Меньше шрифта родителя на некоторое значение.
Значение по умолчанию: medium.
Пример
Давайте установим абзацам размер шрифта в 20px:
<p>
Lorem ipsum dolor sit amet.
</p>p {
font-size: 20px;
}
:
Пример
В данном примере для абзаца задан размер
в 16px, а для span внутри него — 150%.
В этом случае размер шрифта для span будет
составлять 150% от своего родителя,
то есть абзаца, и его реальный размер будет
16px * 150% = 24px:
16px, а для span внутри него — 150%.
В этом случае размер шрифта для span будет
составлять 150% от своего родителя,
то есть абзаца, и его реальный размер будет
16px * 150% = 24px:
В данном примере для абзаца задан размер
в 16px, а для span внутри него — larger.
В этом случае размер шрифта для span будет
больше, чем у его родителя (абзаца):
Обратите внимание на то, что шрифты с разным font-family и одинаковым font-size визуально могут быть
совсем не одного размера (для решения данной
проблемы смотрите свойство font-size-adjust).
В примере ниже обоим абзацам задан
font-size в 16px, но разные font-family:
<p>
Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>#elem1 {
font-size: 16px;
font-family: Arial;
}
#elem2 {
font-size: 16px;
font-family: "Times New Roman";
}
:
em vs. px vs. pt vs. percent / Хабр
Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.
Знакомьтесь — единицы
1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).
Итак, в чем же разница?
Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.
Изменение Font-size от 100% до 120%.
Как вы можете видеть, «em» и «%» увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и «%» предпочтительнее в использовании для текста веб-документа.
«em» vs «%»
Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и «%». В теории, единицы «em» и «%» являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.
В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c «%» на «em» (то есть body {font-size: 1em;}), вы,
должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда клиент меняет «Размер шрифта» в настройках своего браузера (такая возможность предусмотрена в во многих браузерах, например, Internet Explorer).
Размер шрифта, когда клиент изменяет размер текста в браузере.
Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и «%». Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем «%», а при установке «Largest» наоборот «em» отображается гораздо большим, чем «%». И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.
Вердикт
В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в «%» позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в «%» изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.
Победитель: процент (%).
Текст : Размер текста — Учебник по HTML
Текст HTML :
РАЗМЕР ТЕКСТА
T
это теги для изменения размера шрифта.
text
увеличить размер на единицу
text
уменьшить размер на единицу
текст
записывает текст в самый большой заголовок
text
пишет текст в наименьшем заголовке
текст
пишет текст с наименьшим размером шрифта. (8 пт)
текст
пишет текст самым большим размером шрифта (36 pt)
Теги и уникальны тем, что могут повторяться. Если вы хотите увеличить размер шрифта в два раза, вы можете сделать это следующим образом:
бла-бла-бла что угодно бла-бла-бла
учебник по CSS, чтобы узнать, как получить полный, гибкий и гораздо более продвинутый контроль над вашим текстом.
Щелкните здесь, чтобы перейти к руководству по CSS.
<< ПРЕД.
«Лучше, чем книги — проще простого!»
Начало работы с настройкой размера шрифта HTML
Назад Начало работы с настройкой размера шрифта HTML
Веб-дизайн открывает множество творческих возможностей для разработчиков. Большая часть этой силы дизайна исходит от великолепных опций CSS и HTML, которые позволяют вносить так много тонких изменений на веб-странице. Все, от цветов, фона, счетчиков и многого другого, может быть оформлено в соответствии с потребностями дизайна.
Размер текста HTML — это еще один параметр, которым веб-разработчик может управлять для четкого представления информации на странице. В этом кратком руководстве вы узнаете, как использовать свойство CSS font-size в своей работе. Образец кода и изображения помогут вам в этом процессе.
Как установить размер шрифта HTML
Установка размера шрифта HTML — это прямое и простое дело даже для новичков в комбинации HTML/CSS. Чтобы отобразить это в руководстве, будет использоваться набор примеров кодов HTML. Вы можете увидеть это ниже. Не стесняйтесь следовать примеру или использовать свой собственный код.
Для CSS использовалась отдельная таблица стилей. Вы можете увидеть ссылку на него в приведенном выше примере кода. Если вы не знакомы с использованием таблицы стилей, ознакомьтесь с постом «Основы CSS для начинающих», чтобы быстро разобраться в этом.
Значения размера шрифта HTML по умолчанию
Если к странице не применяются никакие изменения, для размера шрифта HTML будет установлено значение по умолчанию 16 пикселей. Если вы не знакомы с этим выражением, число — это размер, а «px» — сокращение для пикселей. Вот как вывод страницы должен выглядеть на экране.
Это изображение объясняет размеры, показанные на HTML-странице.
В этом руководстве основное внимание будет уделено изменению размера элемента абзаца (p) в документе HTML. Тег заголовка был включен, чтобы показать, как он автоматически устанавливается на определенный размер.
При этом следует учитывать, что вы должны использовать соответствующие теги HTML-элементов по назначению. Теги абзацев следует использовать для общей информации, а теги заголовков следует использовать для заголовков тем. Вы можете изменить размер элемента абзаца, чтобы он выглядел как заголовок, но это будет выглядеть неправильно с точки зрения кода.
Изменение размера шрифта HTML с помощью CSS
Чтобы установить желаемый размер текста HTML, вам поможет опция стиля CSS. Вам нужно будет манипулировать метко названным свойством стиля «font-size», чтобы внести изменения. Вы можете установить это свойство в отдельной таблице стилей CSS или непосредственно в элементе HTML, используя встроенные стили CSS.
Чтобы понять, как это сделать в любом формате, необходимо понять синтаксис свойства. В приведенном ниже примере кода CSS вы можете видеть, что элемент абзаца задается с помощью настройки свойства font-size.
За свойством размера шрифта следует двоеточие. После этого предоставляется значение размера, а затем оператор заканчивается точкой с запятой.
Значения свойств для Font-Size
Размер шрифта HTML можно изменить, используя одно из следующих значений свойств в CSS.
Пиксели
Em
Использование пикселей
Значения в пикселях для размера шрифта можно задать, указав числовое значение, за которым следуют две буквы p и x. Между цифрой и буквами нет пробела. Взгляните на пример CSS ниже.
Если размер пикселя установлен равным единице, вывод будет таким.
Если бы вы установили размер пикселя равным 50, результирующий вывод выглядел бы так, как показано ниже.
Использование единиц em
Вместо этого можно использовать значения em. Единица em относится к установленному значению размера шрифта. В этом примере значение не задано, поэтому единица измерения em принимает значение браузера по умолчанию, равное 16 пикселям. 16 px соответствует 1 em.
Если вы установили специальное значение шрифта, значение em будет работать с ним. Есть немного математики, если вы хотите получить правильные числа. Вы можете использовать следующую формулу для расчета значения em пикселя.
пикселей/16=em
Примеры преобразования:
Если у вас есть 12 пикселей и вместо них вы хотите использовать единицы em, вы можете использовать этот процесс.
12px/16=em (разделите 12 на 16)
0,75 (12 пикселей соответствует 0,75 em)
Если вы используете 2em и хотите узнать, сколько это пикселей, введите его следующим образом.
Xpx/16=2em. (Умножьте 16 на 2)
32px = 2em (32 пикселя равны 2 em)
Взгляните на следующий пример CSS. Значение размера шрифта равно 1em.
Помните, что поскольку другого размера шрифта не установлено, ваш браузер автоматически приравняет значение 1em к 16px.
Теперь посмотрим, что произойдет, если вместо этого изменить размер текста HTML на значение 4em.
Заключительные мысли: использовать пиксели или единицы измерения EM?
Установить размер шрифта HTML очень просто, используя значения в пикселях и em. Однако значения пикселей считаются абсолютными. Это означает, что размер устанавливается так, как вы его определяете, и не зависит от других элементов страницы. Это означает, что это может выглядеть некорректно при изменении размера окна браузера.
Вместо этого использование значений em предоставляет параметр, зависящий от установленного размера шрифта. Если вы просто не установили размер шрифта, то для этого значения будет использоваться значение по умолчанию 16px для заголовка h3. Это может быть здорово, если вам нужно, чтобы размер шрифта масштабировался по отношению к другим элементам.
Это не означает, что один всегда лучше. Если вы знаете предполагаемое использование страницы и целевых устройств, использование значений пикселей может быть хорошим выбором. Однако, если пользователю необходимо увеличить масштаб или просто получить доступ к сайту на гораздо меньшем экране, использование значений em может помочь смягчить потенциальные проблемы, когда содержимое выпадает из своего контейнера или становится невидимым среди других элементов страницы.
Если вы потратите время на изучение этого, то обнаружите, что некоторые веб-дизайнеры полностью отказались от использования пикселей в качестве значений размера. Это потому, что они считают, что это может вызвать больше проблем на больших сайтах, или просто предпочитают единицы em вместо гибкости.
В конечном счете, вам придется определиться с предпочтительным юнитом. Просто помните, что варианты существуют по какой-то причине, и вы никогда не должны отказываться от них, поскольку вы никогда не знаете, когда они могут вам абсолютно понадобиться. Если вам нужны дополнительные параметры для работы, посетите Udacity CSS Content Hub, чтобы создать свой набор инструментов.
Зачем останавливаться только на веб-разработке? Сила программирования позволяет людям делать еще больше со своими проектами. Если вы хотите продвинуться по карьерной лестнице, сделайте первые шаги, научившись программировать.
</p>
</p>
Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.
Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.
Если вы хотите увеличить размер шрифта в два раза, вы можете сделать это следующим образом:
Большая часть этой силы дизайна исходит от великолепных опций CSS и HTML, которые позволяют вносить так много тонких изменений на веб-странице. Все, от цветов, фона, счетчиков и многого другого, может быть оформлено в соответствии с потребностями дизайна.
Если вы не знакомы с использованием таблицы стилей, ознакомьтесь с постом «Основы CSS для начинающих», чтобы быстро разобраться в этом.
Вы можете изменить размер элемента абзаца, чтобы он выглядел как заголовок, но это будет выглядеть неправильно с точки зрения кода.
Однако значения пикселей считаются абсолютными. Это означает, что размер устанавливается так, как вы его определяете, и не зависит от других элементов страницы. Это означает, что это может выглядеть некорректно при изменении размера окна браузера.
