Работа со шрифтами в css

The CSS font-family Property

In CSS, we use the property to
specify the font of a text.

The property should hold several font names as a «fallback» system,
to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family
(to let the
browser pick a similar font in the generic family, if no other fonts are
available). The font names should be separated with comma.

Note: If the font name is more than one word, it must be in quotation marks, like: «Times New Roman».

Example

Specify some different fonts for three paragraphs:

.p1 {  font-family: «Times New Roman», Times, serif;}
.p2 {  font-family: Arial, Helvetica, sans-serif;}
.p3 {  font-family: «Lucida Console», «Courier New», monospace;}

❮ Previous
Next ❯

Межстрочный интервал

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

Стандартное значение межстрочного интервала — normal. Это значит, что браузер спросит у шрифта, какое межстрочное расстояние тот предпочитает. Вам ни о чём думать не нужно:

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

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

Установка шрифта и css-свойство font-family

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

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

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

Если указанные в качестве значения свойства font-family шрифты не будут найдены
браузером на компьютере пользователя, а название семейства шрифтов будет отсутствовать, то браузер использует шрифт, установленный по умолчанию.
Обычно это шрифт Times New Roman.

Using Bold Text

You must add another rule containing descriptors for bold text:

Example

@font-face
{
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
 
font-weight: bold;
}

The file «sansation_bold.woff» is another font file, that contains the bold characters for the Sansation font.

Browsers will use this whenever a piece of text with the font-family «myFirstFont» should render as bold.

This way you can have many rules for the same font.

CSS Font Descriptors

The following table lists all the font descriptors that can be defined inside the rule:

Descriptor	Values	Description
font-family	name	Required. Defines a name for the font
src	URL	Required. Defines the URL of the font file
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default is «normal»
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default is «normal»
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default is «normal»
unicode-range	unicode-range	Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF»

❮ Previous
Next ❯

Веб-шрифты

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

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

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

Поддержка форматов

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

Формат файла шрифта	Какие браузеры поддерживают
TTF	Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0
EOT	Поддерживает только Internet Explorer
WOFF	Поддерживают все браузеры, кроме: Internet Explorer 8 (и ниже), Opera Mini 5.0-8.0, Android Browser 4.1-4.3
SVG	Chrome до версии 37 (включительно), Safari, iOS Safari, Android Browser

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

Подключаем веб-шрифт с помощью @font-face

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

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

@font-face {
	font-family: MyUniqueFont;
	src: url('fonts/MyUniqueFont.ttf');
}

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

p {
	font-family: MyUniqueFont;
}

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

Выравнивание текста в CSS

Выравнивание текста по горизонтали задаётся свойством text-align, которое может принимать следующие значения:

• left — выравнивание по левому краю;
• right — выравнивание по правому краю;
• center — выравнивание по центру;
• justify — выравнивание по всей ширине.

С помощью свойства vertical-align выполняется выравнивание текста по вертикали.

Данное свойство может принимать следующие значения:

• baseline — выравнивание линии элемента по базовой линии родительского элемента;
• middle — выравнивание средней элементной точки по базовой линии родительского элемента;
• text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
• top — выравнивание верха элемента по верхней части самого высокого элемента строки;
• sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.

Пример:

<title>Выравнивание текста по вертикали</title>
</head>
<body>
<table height="80" cellpadding="10" border="1">
<tr>
<td style="vertical-align:top">Текст 1</td>
<td style="vertical-align:bottom">Текст 2</td>
<td style="vertical-align:middle">Текст 3</td>
</tr>
</table>

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

Желаем удачи в изучении веб-дизайна!

Размер шрифта и css-свойство font-size

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка размера шрифта</title>
	
	<style>

	
		.size_1{
		font-size: smaller;
		}
	
		.size_2{
		font-size: medium;
		}
		
		.size_3{
		font-size: larger;
		}
		
		.size_4{
		font-size: 150%;
		}
		
		.size_5{
		font-size: 1.5em;
		}
		
	</style>
	
</head>
<body>

	<p class="size_1">
		font-size: smaller;
	</p>
	
	<p class="size_2">
		font-size: medium; 
	</p>
	
	<p class="size_3">
		font-size: larger;
	</p>
	
	<p class="size_4">
		font-size: 150%;
	</p>
	
	<p class="size_5">
		font-size: 1.5em;
	</p>
	
</body>
</html>

Пример №2. Определение размера шрифта

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

Установка дополнительных шрифтов

Если вы решили, что вам нужен новый шрифт, воспользуйтесь любым из нижеописанных способов

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

При помощи официального магазина

У Windows 10 имеется собственный магазин, содержащий в том числе и шрифты для системы.

1. Оказавшись в подпункте «Шрифты» блока «Персонализация» (как перейти к этому разделу, описано в пункте «Просмотр списка установленных шрифтов»), кликните по строке «Получить дополнительные шрифты».Нажимаем на строчку «Получить дополнительные шрифты»
2. Развернётся список из доступных шрифтов. Изучите его и выберите тот вариант, который вам больше всего понравится.Выбираем подходящий шрифт
3. Перейдя к одному из предложенных товаров, кликните по кнопке «Получить» (или «Купить», если шрифт платный) и дождитесь окончания установки. После того как процесс окончится, новый шрифт будет добавлен.Нажимаем кнопку «Купить»

При помощи файла

В официальном магазине Microsoft есть далеко не все существующие шрифты. Большинство из них размещено на сторонних сайтах в бесплатном или платном виде. Windows 10 умеет работать с двумя форматами, содержащими шрифты: ttf и otf.

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

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

При помощи специальной папки

В Windows есть специальная папка, содержащая все шрифты и позволяющая управлять ими. Перейти к ней можно по пути C:WindowsFonts. Для добавления шрифта перетащите или скопируйте файл формата ttf или otf в данную папку. После того как файл будет размещён, он автоматически добавится к списку остальных шрифтов.

При помощи сторонней программы

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

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

FontMassive Light

Данное приложение умеет отображать список найденных шрифтов, а также каждый символ из набора. С помощью него можно удалять и устанавливать пакеты. Помимо стандартных форматов, FontMassive поддерживает расширение .pfm и .pfb.

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

Работать со шрифтами удобнее в FontMassive Light

FontForge

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

При помощи FontForge можно создать свой шрифт

Установка шрифтов PostScript Type 1

PostScript — это специальный язык программирования, разработанный компанией Adobe. Он часто используется в описании PDF-файлов, а также для хранения и описания шрифтов. PostScript Type 1 — всемирно принятый формат кодирования.

Для установки шрифтов данного формата потребуется специальная программа от компании Adobe — Adobe Type Manager. Скачав и открыв её, перейдите к вкладке Add Fonts, укажите путь до файла со шрифтом и используйте кнопку Add. Готово, новый шрифт добавлен в вашу библиотеку.

Указываем путь до шрифта и нажимаем кнопку Add

1: Загрузка шрифтов и создание веб-страницы

Прежде чем мы начнем изучать правило @font-face, мы должны создать тестовую веб-страницу и каталог.

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

Перейдите в корневой каталог нового проекта, который называется website:

Из этого каталога мы будем запускать все остальные команды.

Теперь мы воспользуемся командой curl, чтобы загрузить шрифт Roboto Mono. Мы используем популярное приложение google-webfonts-helper, которое позволяет загружать несколько шрифтов непосредственно из сети доставки контента Google .

Давайте загрузим два разных по стилю и толщине вида Roboto Mono, regular and 700italic.

Обратите внимание на то, как мы указали виды шрифтов из семейства Roboto Mono, которые нам нужны. Затем мы указали необходимые форматы для каждого шрифта: ttf, woff и woff2

Формат woff2 – это самый современный формат веб-шрифтов, но woff2 все еще . Поэтому мы также загрузим запасной вариант – , который имеет широкую поддержку (включая Internet Explorer 9) и формат TrueType, или ttf. В итоге мы получим отличный охват, но во время работы над CSS мы также предоставим больше альтернативных вариантов на основе стандартных шрифтов. Свойство font-display поможет управлять загрузкой шрифтов на странице в разных браузерах.

Теперь извлеките загруженные шрифты в папку ./fonts. На машинах Linux и macOS используйте следующую команду:

Теперь изучите содержимое папки ./fonts:

Вы увидите в ней шесть новых файлов – файл .ttf, .woff и .woff2 для каждого шрифта.

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

Свойство font-family

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

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

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

Вы должны закончить список любым общим семейством шрифтов (generic font) на выбор — , , , и . Типичное объявление семейства шрифтов может выглядеть так:

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

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

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

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

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

Подробнее о стандартных, браузерных шрифтах, здесь: .

Установить размер шрифта С Em

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

Размер блока EM рекомендуется W3C.

1em равен текущему размеру шрифта. размер шрифта по умолчанию в браузерах 16px. Таким образом, по умолчанию размер 1em является 16px.

Размер может быть рассчитано из пикселей в EM , используя эту формулу:пикселей/ 16 =EM

пример

h1 {    font-size: 2.5em; /* 40px/16=2.5em */}h2 {    font-size: 1.875em; /* 30px/16=1.875em */
}p {    font-size: 0.875em; /* 14px/16=0.875em */}

В приведенном выше примере, размер текста в ЕМ является такой же, как и в предыдущем примере в пикселях. Тем не менее, с размером их, можно настроить размер текста во всех браузерах.

К сожалению, все еще существует проблема с более старыми версиями IE. Текст становится больше, чем он должен, когда сделано больше, и меньше, чем должен, когда становится меньше.

Как задать шрифт в CSS?

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

Для категоризации используют два типа имён: гарнитура шрифта family name и общее семейство generic family.

Первый тип — название шрифта (например, Calibri, Times New Roman и т. д.), второй — группа шрифтов с характерными общими чертами (например, sans-serif).

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

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

h1 {font-family: verdana, trebuchet, sans-serif;} 
h2 {font-family: “Garamond”, serif;}

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

свойство устанавливает размер текста.

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

Всегда используйте соответствующие HTML-теги, как <h1> — <h6> для заголовков и <p> для параграфов.

Значение размера шрифта может быть абсолютным, или относительный размер.

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

• Устанавливает текст определенного размера
• Не позволяет пользователю изменять размер текста во всех браузерах (плохо по причинам доступности)
• Абсолютный размер полезен, когда физический размер выводимого известен

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

• Устанавливает размер относительно окружающих элементов
• Позволяет пользователю изменять размер текста в браузерах

	Примечание: Если вы не указываете размер шрифта, размер по умолчанию для обычного текста, как абзацы, 16px (16px = 1em).

Different Font Formats

TrueType Fonts (TTF)

TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft
Windows operating systems.

OpenType Fonts (OTF)

OpenType is a format for scalable computer fonts. It was built on TrueType,
and is a registered trademark of
Microsoft. OpenType fonts are used commonly today on the major
computer platforms.

The Web Open Font Format (WOFF)

WOFF is a font format for use in web pages. It was developed in 2009, and is
now a W3C Recommendation. WOFF is essentially OpenType or TrueType with
compression and additional metadata. The goal is to support font distribution
from a server to a client over a network with bandwidth constraints.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType font that provides better compression than WOFF 1.0.

SVG Fonts/Shapes

SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1
specification define a font module that allows the creation of fonts within an
SVG document. You can also apply CSS to SVG documents, and the @font-face rule
can be applied to text in SVG documents.

Embedded OpenType Fonts (EOT)

EOT fonts are a compact form of OpenType fonts designed by Microsoft for use
as embedded fonts on web pages.

Семьи CSS Font

В CSS существует два типа имен семейств шрифтов:

• родовой семьи — группа семейств шрифтов с подобным взглядом (как «Serif» или «») шрифт фиксированной
• семейство шрифтов — специфический семейство шрифтов (например , «Times New Roman» или «Arial»)

Generic family	Font family	Description
Serif	Times New Roman Georgia	Serif fonts have small lines at the ends on some characters
Sans-serif	Arial Verdana	«Sans» means without — these fonts do not have the lines at the ends of characters
Monospace	Courier New Lucida Console	All monospace characters have the same width

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

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

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

Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Для изменения размера шрифта используется свойство font-size. Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

body { font-size: 14px; }

Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% — 32px. Если вы определите правило, задающее всему тексту внутри элемента <body> значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

body { font-size: 100%; }

EM

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

body { font-size: 14px; }
h2 { font-size: 1.2em; }

В примере мы задали элементу <body> размер шрифта 14px, а для всех элементов <h2> — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков <h2> будет составлять 1,2 размера шрифта элемента <body>, что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

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

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

CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.

p { font-size: small; }

Среднее значение medium — размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 { font-size: 120%; }
      p.class2 { font-size: 18px; }
      p.class3 { font-size: x-small; }
    </style>
  </head>

  <body>
    <p class="class1">Изменение размера с помощью процентов.</p>
    <p class="class2">Изменение размера с помощью пикселей.</p>
    <p class="class3">Изменение размера с помощью ключевого слова x-small.</p>
  </body>
</html>

Попробовать »

С этой темой смотрят:

• Отступ текста в CSS
• Выравнивание текста в CSS
• Цвет и тень текста в CSS
• Как изменить шрифт в CSS
• Стандартные (безопасные) шрифты

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Как адаптировать размер текста под размер экрана

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

Самый прямолинейный способ это сделать — задать размер в единицах vw. Например, 1vw — это 1% ширины экрана; 10vw — 10% ширины экрана. Если экран шириной 1000 пикселей, то 20vw — это 200 пикселей.

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

На телефоне с узким экраном всё выглядит нормально.

А на широком экране компьютера текст стал больше заголовка.

Второй вариант — использовать медиазапросы. Мы расскажем о них подробно в другой статье, а пока кратко: это когда мы можем накатывать разные стили на документ в зависимости от того, как этот документ отображается. Можно сказать: «Если экран шире 500 пикселей, используй вот такой размер шрифта; если шире 1000 пикселей — сякой; а если это не веб-страница, а версия для печати — вообще используй другой шрифт и размер».

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

Теперь всё в порядке.

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев