Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.

Задание размера шрифта с помощью HTML

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

Конструктор сайтов "Нубекс"

Size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 пункт больше или меньше, соответственно.

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

Устанавливаем размер шрифта при помощи CSS

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

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

• large, small, medium - задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
• larger, smaller - задают относительный размер (меньше или больше относительно родительского элемента).
• 100% - задается относительный размер (в процентах относительно родительского). Например: h1 { font-size: 180%; } Это означает, что размер тега H1 будет составлять 180% от базового размера шрифта.
• Другие варианты задания относительного размера:
  • 5ex - означает, что размер составит 5 высот буквы x от базового шрифта;
  • 14pt - 14 пунктов;
  • 22px - 22 пикселя;
  • 1vw - 1% от ширины окна браузера;
  • 1vh - 1% от высоты окна браузера;

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

Рассмотрим доступные свойства.

font-family

Позволяет определить, каким шрифтом будет написан текст. Для группировки шрифтов в CSS используется два типа имён: generic-family и family-name .

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

• sans-serif - шрифты без засечек. Написанный ими текст воспринимается лучше других.
• serif - шрифты с засечками.
• monospace - шрифты, символы которых имеют фиксированную ширину. Их принято использовать для отображения программного кода.
• cursive - рукописные шрифты.
• fantasy - декоративные (художественные) шрифты.

family-name определяет не семейство, а один шрифт: “Arial Black”, Verdana.

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

H1 {font-family: Arial, sans-serif;} h2 { font-family: "Times New Roman", serif; }

font-style

Задаёт курсивное (значение italic ), наклонное (oblique ) или стандартное (normal ) начертание текста.

Текст с наклонным начертанием.

Курсивный текст.

Обычное начертание текста.

Создаёт такую страницу:

font-size

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

• Пиксели (px). Используются довольно часто, потому что позволяют указать размер максимально точно. По умолчанию браузер отображает текст размером 16 пикселей.

P { font-size: 12px; }

Обратите внимание: между числом и единицами измерения пробела быть не должно.

• Проценты (%). Высчитываются от размера шрифта родительского элемента. Если у родителя он установлен по умолчанию, то можно вспомнить про 16 пикселей и принять их за 100%.

P { font-size: 120%; }

• Пункты (pt). Тоже используются очень часто. Более того, когда вы выбираете число, выставляя размер шрифта в текстовых редакторах (Word, Блокнот, Notepad и т. д.), то также используете пункты.

P { font-size: 15pt; }

• Относительная высота шрифта (em ). Высота шрифта родителя принимается за единицу, и относительно него устанавливается высота шрифта текущего элемента.

P { font-size: 1.2em; }

• Константы . Считается, что значения xx-small , x-small , small , medium , large , x-large , xx-large (от меньшего к большему) задают абсолютный размер шрифта, хотя на самом деле при их использовании размер всё равно будет зависеть от настроек операционной системы и браузера. Есть также и относительные константы: smaller (меньший) и larger (больший), которые уменьшают или увеличивают шрифт относительно элемента-родителя.

P { font-size: x-large; }

• Другие единицы измерения. Для установки шрифта можно использовать всё, что доступно в CSS: миллиметры (mm ), сантиметры (cm ), дюймы (in ), пики (pc, 1 pc = 12 pt ), размер символа x (ex ).

P { font-size: 1.5pc; }

font-variant

Предлагает два значения:

• small-caps . Строчные буквы меняются на прописные малого размера.
• normal . Обычный текст.

Чтобы понять, разницу лучше один раз увидеть:

H1 { font-variant: small-caps; } h2 { font-variant: normal; }

font-weight

Влияет на насыщенность (жирность) шрифта. Значения могут быть такими:

• Числа от 100 до 900 с шагом в сотню. С их помощью можно задать жирность точнее всего. Насыщенность нормального шрифта, который вы обычно видите на страницах, равна значению 400, полужирного - 700. Проблема в том, что многие браузеры не поддерживают весь этот ассортимент, и поэтому использование числовых значений часто бывает бессмысленным.
• normal . Обычный шрифт.
• bold . Устанавливает полужирное начертание.

Div { font-weight: bold; }

• bolder и lighter. Делает шрифт соответственно жирнее или тоньше шрифта текста родителя.

color

Определяет цвет шрифта. Может задаваться следующими способами

• По названию. Используются зарезервированные слова, обозначающие имена цветов (например, blue - синий, yellow - жёлтый). Самый простой, но вместе с тем и самый ограниченный метод, потому что поддерживает только 140 цветов, хотя обычно и их хватает.

P { color: red; }

• По шестнадцатеричному коду (HEX). Шестнадцатеричная система счисления включает в себя 16 цифр, последние шесть из которых обозначаются буквами латинского алфавита от A до F, причём десятичное число 255 в этой системе записывается как FF. Как известно, все цвета создаются путём смешивания всего трёх: красного, зелёного и синего. Степень присутствия каждого из них и задаётся числами от 0 до 255, записанными в шестнадцатеричной системе. Перед числом ставится символ «решётка (# ). Белый цвет - #000000 , чёрный - #ffffff .

Пример ниже задаёт абзацу серый цвет:

P { color: #808080; }

• В системе RGB. Всё те же красный, зелёный и синий (red, green, blue), но задающиеся уже числами от 0 до 255 через запятую. Присутствие каждого из трёх цветов можно обозначать и в процентах. Тогда 100% будет соответствовать числу 255.

A {color: rgb(0,128,201);}

• RGBA. Всё, как в RGB, только в конце прибавляется ещё одно число от 0 до 1 - альфа-канал, задающий тексту прозрачность.

A {color: rgba(0,128,201,0.5);}

• HSL. Значение в этом формате задаётся тремя параметрами через запятую.

1. H (hue - оттенок). Определяется в градусах от 0 до 359° в зависимости от цвета на цветовом круге (рисунок ниже).

2. S (Saturate - оттенок). Указывается в процентах. Понятно, что от 0 до 100%, и понятно, что чем больше процент, тем насыщеннее цвет.

3. L (lightness - яркость). Так же, как и насыщенность, устанавливается в процентах.

A {color: hsl(0,100%,100%);}

• HSLA. То же, что и HSL, но с добавлением альфа-канала (как RGBA).

A {color: hsla(0,100%,100%,0.7);}

font

Позволяет объединить все свойства шрифта в одной строке и может тем самым сильно сократить код. Имеет следующую структуру:

Font: font-style font-variant font-weight font-size/line-height font-family

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

Вот пример:

Div {font: oblique small-caps 12pt/1.2 Arial, sans-serif;}

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

font-family

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

Значение:

• имя семейства - семейства шрифта, применяемое для вывода текста. Имена, состоящие из нескольких слов, должны заключаться в кавычки.
• имя типового шрифта, применяемого для вывода текста. Типовыми могут быть следующие шрифты: serif, sans-serif, fantasy и monospce.

font-style

Определяет начертания шрифта, такие как курсив или наклонное.

Значение:

• italic - курсив.
• oblique - наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон чем курсив.
• inherit - применяется значение родительского элемента.

font-variant

Определяет, будет ли шрифт выведен в виде малых прописных букв.

Значение:

• normal - обычное начертание (по умолчанию).
• small-caps - выводит шрифт в виде малых прописных букв.
• inherit - применяется значение родительского элемента.

font-weight

cвойства шрифта font css

Определяет толщину выводимого шрифта.

Значение:

• normal - обычное начертание (по умолчанию).
• bold - полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании.
• bolder - жирный шрифт.
• lighter - светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид.
• 100-900 - число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder.
• inherit - применяется значение родительского элемента.

font-stretch

Определяет толщину шрифта.

Значение:

• normal - обычная ширина (по умолчанию)
• wider- увеличение текущей ширины.
• narrower - уменьшает текущую ширину на единицу.
• ultra-condensed - наименьшее значение ширины.
• extra-condensed - значение большее, чем предыдущее
• condensed - значение большее, чем предыдущее.
• semi-condensed - значение большее, чем предыдущее.
• semi-expanded - значение большее, чем при обычной толщине.
• expanded - значение большее, чем предыдущее.
• extra-expanded - значение большее, чем предыдущее.
• ultra-expanded - максимальное значение ширины.
• inherit - применяется значение родительского элемента.

font-size

Определяет кегель (высоту символов) шрифта.

Значение:

• абсолютный размер - для выражения кегля шрифта используется ключевые слова: xx-small(крайне малый), small (малый), medium (средний) (по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое).
• относительный размер - для выражение кегля шрифта используется ключевые слова: larger (меньше), smaller (больше),
• любое соответствующая стандарту высота - абсолютный размер шрифта. Отрицательное значение не допускается.
• любое соответствующее стандарту процентное значение.
• inherit - применяется значение родительского элемента.

cвойства шрифта font css

font-size-adjust

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

Значение:

• none - по умолчанию.
• любое соответствующее стандартам значение - число, представляющее соотношение высоты и ширины символов.
• inherit - применяется значение родительского элемента.

font

Удобное свойство для установки сразу всех параметров шрифта. Если какие-то значение пропущены, то берется их значение по умолчанию.

Значение:

• font-style - начертание.
• font-variant - значение, определяющее вывод шрифта в виде малых прописных букв.
• font-weight- толщина.
• font-size - кегль.
• line-height - интерлиньяж.
• font-family - семейство шрифтов.
• inherit - применяется значение родительского элемента.

cвойства шрифта font css

Внедрения индивидуальных шрифтов.

До появления Internet Explorer 4.0 Web-мастер должен были использовать встроенные шрифты в браузер или использовать шрифты, доступные в системе. CSS представляет WEB-мастеру возможность указания отображаемых шрифтов, которые загружаются вмести с Web-страницей, что гарантирует правильную обработку страницы. Загружаемый шрифт определяется с помощью новых элементов в синтаксис CSS. Ниже приведен синтаксис для определения загружаемого шрифта в CSS:

@font-face {font-family: fontName ; src: url(failMame.eot) }

значение fontName, на которое впоследствии ссылается свойство CSS font-family, определяется пользователем. Ниже приведен полный пример:

Текст отображается с использованием загружаемого шрифта

после определения нового шрифта его имя может быть использовано как действительное для свойства font-family. Свойство font-family может быть связано с равным списком шрифтов, так что если первый в списке шрифтне может быть загружен, то браузер попытается загрузить следующий шрифт или семейство шрифтов. В данном примере последним определенным шрифтом является sans-serif, что позволяет браузеру использовать любой шрифт семейства sans-serif для воспроизведения элемента.

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

Знакомство с единицами измерения

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

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

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

Вот краткое описание некоторых единиц измерения:

Пример 3 — rem vs em (и %)

Размер шрифта в em (и в %) рассчитывается относительно размера шрифта родительского элемента. Например:

Html { font-size: 100% /* =16px */ } body { font-size: 2em; /* =32px */ } p { font-size: 1em; /* =32px */ /* font-size: 0.5em; =16px */ }

Поскольку размер шрифта элемента p наследуется от body, а body от html, размер шрифта p оказывается в два раза больше, чем мы могли ожидать.

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

Решением этой проблемы является rem. Единица измерения rem рассчитывается только на основе размера шрифта элемента html, а не родительского элемента. Например:

Html { font-size: 100% /* =16px */ } body { font-size: 2rem; /* =32px */ } p { font-size: 1rem; /* =16px */ }

Использование rem позволяет вам использовать такие же возможности масштабирования, как с em и %, но без проблем с вложенностью.

Пример 4 — единицы измерения на основе ширины области просмотра

Единица измерения vw, новая единица измерения CSS3 , рассчитывается на основе ширины области просмотра. Это позволяет задавать размер шрифта более отзывчиво.

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

Мой способ

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

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

Мой способ заключается в использовании rem (и пикселей в качестве запасного решения).

Html { font-size: 62.5%; /* sets the base font to 10px for easier math */ } body { font-size: 16px; font-size: 1.6rem; /* sets the default sizing to make sure nothing is actually 10px */ } h1 { font-size: 32px; font-size: 3.2rem; }

Это позволяет мне масштабировать размер шрифта, просто написав:

@media screen and (min-width: 1280px) { html { font-size: 100%; } }

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

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

В этой главе:

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

Разница между семействами шрифтов Sans-serif и Serif

Семейства шрифтов в CSS

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

• sans-serif - шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
• serif - семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки - декоративные штрихи и черточки по краям букв.
• monospace - семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
• cursive - шрифты, имитирующие рукописный текст.
• fantasy - художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.