Свойство font-size — размер шрифта
Свойство 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 | Очень большой. |
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:
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>p {
font-size: 16px;
}
span {
font-size: 150%;
}
:
Пример
В данном примере для абзаца задан размер
в 16px, а для span внутри него — 150%.
В этом случае размер шрифта для span будет
составлять 150% от своего родителя,
то есть абзаца, и его реальный размер будет
16px * 150% = 24px:
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>p {
font-size: 16px;
}
span {
font-size: 150%;
}
:
Пример
В данном примере для абзаца задан размер
в
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>p {
font-size: 16px;
}
span {
font-size: larger;
}
:
Пример
Обратите внимание на то, что шрифты с разным 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) и ключевые слова (например, x-small, small, large, xx-large). Все три способа имеют свои недостатки и преимущества. Джеффри Зельдман и другие специалисты по CSS рекомендуют использовать ключевые слова, вызывающие меньше всего проблем. Но так как ключевые слова требуют более глубоких познаний CSS, чтобы отображать шрифты одинаковыми во всех браузерах, и предлагают лишь ограниченный набор размеров, мы будем использовать em для указания размера шрифтов.
Отметим, что сначала em может показаться вам странной единицей. На самом деле данные единицы являются просто пропорциональным значением — можно относиться к ним как к десятичным процентам, когда 0,9 em — это то же самое, что и 90% от базового размера.
В большинстве браузеров по умолчанию используется размер 1 em (эквивалент примерно 16 пикселам), и если вы зададите размер шрифта в 1 em, он будет таким же, Если вы хотите, чтобы шрифт определенного элемента составлял три четверти от базового, задайте его равным 0,75 em, половину базового, — равным 0,5 em.
Используя em, вначале следует задать базовый размер шрифта для всего документа с помощью body 100%, после чего можно указать размер шрифтов остальных элементов относительно этого базового размера.
Вначале изменим селектор body:
<style type=»text/css»>
Несмотря на отсутствие видимого эффекта, теперь у нас есть базовый размер шрифта, от которого можно отталкиваться. Причиной, по которой мы указываем базовый размер в процентах, является то, что если IE видит размер в em, он неправильно обрабатывает последующие селекторы, делая шрифт больше или меньше нужного при изменении его размера.
Возможно, вы заметили, что размеры по умолчанию для распространенных элементов разметки, например h2-h6, p, ul и li, довольно крупные, и если нам требуется разместить на странице определенный объем текст, с этими размерами по умолчанию пользователю придется активно прокручивать ее вверх-вниз. Согласно маркетинговым исследованиям, прокрутка страниц нежелательна, кроме того, на наш взгляд такой большой размер шрифта лишь портит облик страницы.
В свою очередь, при использовании em можно по умолчанию задать чуть меньший размер шрифтов, ведь пользователи всегда могут его увеличить.
Предположим, мы хотим задать новый базовый размер в 12 пунктов. Для этого укажем размер для body, равный 76% от базового шрифта браузера по умолчанию (16 пунктов), что составит требуемые 12 пунктов.
Теперь, когда 1 em равняется 12 пунктам, 0,75 em — это 9 пунктов и т.д.
Для тега html некоторые разработчики задают размер шрифта в 125% (20 пунктов), а размер шрифта элемента body — 50%. Таким образом, для всех дочерних элементов 1 em = 10 pt, 0,9 em = 9 pt, 1,2 em = 12 рt и т.д., что существенно облегчает подсчет размера.
Помните, что вне зависимости от используемых единиц браузер преобразовывает их в пикселы, потому что именно так отображается информация на экране. Каждый браузер использует для этой операции слегка отличный алгоритм, поэтому чем более целыми будут используемые при вычислении значения, тем более целостным будет результат.
В целом, если при указаний размера шрифтов вы используете пропорциональные значения для отдельных селекторов, то можете предоставить пользователям шрифты подходящих размеров, выглядящие привлекательно и в большинстве случаев устраняющие необходимость прокрутки. При этом сохраняется возможность увеличения размеров шрифтов пользователем.
В следующих примерах мы будем использовать базовый размер шрифта по умолчанию — 100%, а впоследствии при создании собственных сайтов вы сможете изменить, его нужным образом.
Итак, отталкиваясь от 100-процентного значения свойства font-size, зададим размер шрифта для каждого элемента с помощью em. Мы поступим так-потому, что использования 100% вместо 1em позволяет получить более согласованный результат при просмотре страницы во всех браузерах. Тем не менее, чтобы указать размер шрифта для элементов, мы воспользуемся em как более удобной единицей.
Данная строка относится к заголовку третьего уровня hЗ, мы зададим для нее размер в .8em. Вот что мы напишем:
<style type=»text/css»>
body {font-family: verdana, arial, sans-serif; font-size: 100%;}
h4 {font-size:.8em}
</style>
Шрифт заголовка стал более мелким. (Экспериментальным путем мы определили, что его размер по умолчанию составлял 1,2 em или 16 х 1,2 = 19,2 pt). Теперь давайте зададим размер шрифта для остальных элементов разметки:
<style type=»text/ess»>
body {font-family: verdana, arial, sans-serif; fontsize:100%;}
h2 {tont-size:1em}
p {font-size:.8em}
ol {font-size:.75em}
ul {font-size:.75em}
a {font-size:.7em}
</style>
Пару слов об этих правилах. Во-первых, мы не задаем стиль для пунктов меню (li), вместо этого мы задали стиль для нумерованного (ol) и ненумерованного (ul) списка, содержащих li.
Если бы мы задали стиль непосредственно для li, оба списка отображались бы шрифтом одного размера, а при нашем подходе можно задать разный размер для обоих типов списка.
Как увеличить размер шрифта мобильной версии сайта? — HTML и CSS — Форумы SitePoint
Nightwing
1
Привет от замерзания -2°
Я хотел бы увеличить шрифт в мобильной версии http://www.website-project-manager.co.uk/
Кто-нибудь может дать мне совет, пожалуйста , я слышал, что 16 пикселей – это стандарт, подойдет ли он?
@media только экран и (макс. ширина: 767px) {
.мои занятия {
размер шрифта: 2em;
}
}
Заранее спасибо,
Дэвид
SamA74
2
Так и должно быть. Если вы используете размер по умолчанию 16 пикселей, 2em должен дать вам 32 пикселя.
1 Нравится
ПолОБ
3
Найтвинг:
подойдет?
Нет, это ничего не даст для мобильных устройств, если вы не добавите метатег области просмотра в заголовок документа.
Без тега области просмотра предполагается, что сайт имеет размер 980 пикселей (или около того) и просто уменьшается до тех пор, пока не будет соответствовать размеру. Медиа-запрос 767px не будет применяться, так как предполагается, что это размер рабочего стола.
2 лайка
10 февраля 2021 г.
, 8:21
4
Найтвинг:
Может ли кто-нибудь дать мне какой-либо совет, я слышал, что 16 пикселей является стандартом, это подойдет?
@media только экран и (макс. ширина: 767px) { .мои занятия { размер шрифта: 2em; } }
Да, размер шрифта 16 пикселей является стандартным размером. вы можете использовать его, но об использовании вы видели размер шрифта большой или маленький. вы можете изменить размер шрифта сайта на 1 пиксель увеличить или уменьшить. 1em = 16px, 2em = 32px.
Вы можете использовать максимальную ширину 575 для мобильного экрана. Это хорошо.
Только экран @media и (максимальная ширина: 575 пикселей) {
.my-class {
размер шрифта: 1em;
}
}
Найтвинг
5
Спасибо всем за решения здесь, они работают Теперь у меня есть мобильная версия, которую я могу читать!
Найтвинг
6
Спасибо, не знал, что должен это сделать.
1 Нравится
СамА74
7
Я не заметил его отсутствия, как это сделал Пол.
Этот тег является первой предпосылкой для адаптивного дизайна.
4 нравится
система Закрыто
8
Эта тема была автоматически закрыта через 91 день после последнего ответа. Новые ответы больше не допускаются.
HTML: слишком большой размер шрифта — почему?
спросил
Изменено 13 лет, 4 месяца назад
Просмотрено 11 тысяч раз
Вот фрагмент моего HTML-кода. Я указываю размер шрифта для каждого текста равным 14, но когда я визуализирую его в Firefox, он выглядит таким большим! Есть ли лучший способ указать размер шрифта?
Примечание. Я хочу знать, как это сделать в HTML, а не в CSS.
<голова>
Клиники с вакциной против гриппа h2N1 в наличии
<тело>
<граница таблицы = "2" bgcolor = "желтый">
<тело>
Группа
Квота на вакцины
- html
- размер шрифта
3
Ого! Теги шрифта.
Давно таких не видел!
HTML-атрибут размера шрифта не является абсолютным размером шрифта, установленным в пикселях или пунктах (*), это шкала размеров «1–7» относительно размера шрифта по умолчанию, который вы получаете с «4». Установка большего размера, чем 7, недействительна, но обычно дает такой же очень большой размер, как «7». У меня это происходит во всех браузерах, не только в Firefox.
Сегодня практически нет причин использовать тег font. В XSLT нет ничего, что мешало бы вам использовать CSS, либо встроенный, как тег шрифта:
Group
или, что гораздо удобнее, в таблице стилей:
table { background: yellow; }
й, тд { размер шрифта: 90%; семейство шрифтов: без засечек; }
(*: в сторону: никогда не используйте точки — единица CSS pt — для всего, кроме таблиц стилей печати. На экране он имеет все недостатки абсолютных пикселей, плюс размер на некоторых платформах получается очень неправильным. Используйте px для фиксированных размеров шрифта и em или % для обычного текста.