Font style bold css: CSS Property: font-weight | HTML Dog — Независимое театральное объединение "Зрительские симпатии"

Содержание

Учебник CSS для начинающих. Свойства шрифта.

Глава 3

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

Свойство font-style, в зависимости от выбранного значения, определяет стиль шрифта.

Шрифт может иметь следующие стили:

normal — обычный (по умолчанию)
italic — курсив
oblique — наклонный

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Стиль шрифта</title>
</head>
<body>
<p>это курсив</p>
<p>а это наклонный текст</p>
<p>И чем спрашивается, они отличаются?</p>
</body>
</html>

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

Весьма интересное свойство шрифта font-variant позволяет делать строчные буквы заглавными и уменьшенными.

Значения:

normal — нормальный (по умолчанию)
small-caps — все буквы заглавные и уменьшенные

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>

<head>
<title>Все буквы заглавные</title>
</head>
<body>
<p>Купи слона!!</p>
</body>
</html>

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

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

значения абсолютного размера шрифта:

xx-small — очень очень маленький
x-small — очень маленький
small — маленький

medium — средний
large — большой
x-large — очень большой
xx-large — очень очень большой

значения относительного размера шрифта:

larger — больше чем размер шрифта родительского элемента
smaller — меньше чем размер шрифта родительского элемента

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Размер шрифта</title>
</head>
<body>
<div>
<p>Размер шрифта родительского элемента (блока DIV) равен 18 пикселям</p>
<p>Этот шрифт будет крупнее относительно элемента родителя</p>
<p>А этот шрифт будет мельче относительно элемента родителя</p>
</div>
<p>В блоке ниже размер штифта элемента родителя огромен (60 пунктов), однако дочерние параграфы расположенные в нём имеют собственное абсолютное значение шрифта и к размеру шрифта элемента родителя никак не привязаны.</p>
<div>

<p>xx-small — очень очень маленький</p>
<p>x-small — очень маленький </p>
<p>small — маленький </p>
<p>medium — средний</p>
<p>large — большой</p>
<p>x-large — очень большой</p>
<p>xx-large — очень очень большой</p>
</div>
</body>
</html>

Свойство font-weight — определяет жирность шрифта. Насыщенность шрифта может быть задана относительно шрифта элемента родителя с помощью следующих значений:

normal — обычный шрифт
bold — полужирный шрифт
bolder — жирный шрифт
lighter — тонкий шрифт

А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300… 900) где значение 100 тонкий шрифт, а 900 — сверх жирный.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Жирность шрифта</title>
</head>
<body>
<div>
<p>жирный шрифт</p>

<p>тонкий шрифт</p>
<p>жирность шрифта равна 600</p>
</div>
</body>
</html>

Атрибут CSS font-family — указывает одно, два или три имени шрифта из библиотеки шрифтов.

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

Так например запись в стилевом описании P {font-family: Times New Roman, Arial, Verdana;} — будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Times New Roman, а если его по каким то мифическим причинам не окажется в его библиотеке шрифтов то следует использовать шрифт Arial, и уж если и его нет, тогда писать шрифтом Verdana.

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

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

serif — шрифты с засечками
sans-serif — рубленые шрифты

cursive — курсивные шрифты
fantasy — декоративные шрифты
monospace — моношириные шрифты

Например, если в файле CSS написать P {font-family: Times New Roman, sans-serif;} то это будет значить что если вдруг не окажится шрифта с именем Times New Roman, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans-serif — рубленых шрифтов.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Семейство шрифта</title>
<style type=»text/css»>
h4 {font-family: Times New Roman, Verdana, sans-serif;}
p {font-family: Monotype Corsiva, Verdana;}
span {font-family: Comic Sans MS;}
</style>
</head>
<body>
<h4>Купи слона</h4>
<p>У нас Вы можете по <span>выгодным ценам</span> приобрести лучших слонов!!</p>
</body>
</html>

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

font (собственно шрифт).. font-family, font-size и т.д..

Так вот это неспроста.. дело в том, что все эти свойства являются «дочерними» базового атрибута CSS font в довершении главы о нем собственно и пойдёт речь.

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

font-style
font-variant
font-weight
font-size
font-family

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

Предположим нам необходимо написать стилевое описание шрифта для тега <span> и по нашей задумке шрифт для данного тега должен быть: курсивом, жирным, иметь размер 20 пикселей и использовать шрифт Arial

Все это можно осуществить, написав следующие:

span{ font-style: italic; font-weight: bolder; font-size: 20px; font-family: Arial }

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

Вот так:

span{font: italic bold 20px Arial}

Мы просто перечислили нужные нам параметры «марки» font. Согласитесь, по-моему, так писать гораздо проще, к тому же код становится более компактным и лёгким для чтения как браузером, так и человеком.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Параметры шрифта</title>
<style type=»text/css»>
span{font: italic bold 20px Arial}
</style>
</head>
<body>
<span>Этот текст написан курсивом, он жирный, имеет размер 20 пикселей и использует шрифт Arial</span>
</body>
</html>

Используйте базовый атрибут font если необходимо применить к шрифту элемента более одного свойства.
Помните что текст, прежде всего, должен быть удобным для чтения и только потом красивым и стильным, а по сему советую избегать следующих вещей:
Не стоит использовать огромные и малюсенькие шрифты, это напрягает, ищите золотую середину. Так же не стоит злоупотреблять декоративными шрифтами, конечно, все эти закорючки весьма красивы, но читать длинный текст с таким шрифтом невыносимо. Выделяйте жирным только те фразы и выражения, на которых хотели бы произвести акцент, а курсивом «особые места» в тексте, к примеру, цитаты или афоризмы.
По мнению психологов, в длинном тексте должно использоваться не менее двух шрифтов, но и не более четырёх.. Причем выделение текста «особым» шрифтом должно иметь систематический характер.. Например все заголовки одним шрифтом, «основной текст» вторым, и «особый текст» третьим.

Учебник CSS 3. Статья «Работа со шрифтами в CSS»

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

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

Безопасные веб-шрифты

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

p {
font-family : Courier; /* устанавливаем тип шрифта – Courier */
}

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

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

Рекомендуется последним в списке шрифтов указывать и семейство шрифта (generic-family). Если у пользователя по каким-то причинам отсутствуют все перечисленные Вами шрифты, то в этом случае страница будет отображена хотя бы шрифтом того же семейства, а не шрифтом «встроенным» в браузер.

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Свойство font-family</title>
<style> 
.times {
font-family: "Times New Roman", serif; /* определяем основной шрифт "Times New Roman", альтернативный  serif (с засечками)*/
}
.courier {
font-family: Courier, monospace; /* определяем основной шрифт "Courier", альтернативный monospace (семейство моноширинных шрифтов) */
}
</style>
</head>
	<body>
		<p class = "times">Параграф, отображаемый шрифтом "Times New Roman".</p>
		<p class = "courier">Параграф, отображаемый шрифтом "Courier".</p>
	</body>
</html>

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

Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки.

Результат нашего примера:

Рис. 34 Пример использования свойства font-family.

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

sans-serif (без засечек)
Семейство шрифта (font-family)	Пример
Arial, Helvetica, sans-serif	Съешь же еще этих сочных мандаринов.
«Arial Black», Gadget, sans-serif	Съешь же еще этих сочных мандаринов.
«Comic Sans MS», cursive, sans-serif	Съешь же еще этих сочных мандаринов.
Impact, Charcoal, sans-serif	Съешь же еще этих сочных мандаринов.
«Lucida Sans Unicode», «Lucida Grande», sans-serif	Съешь же еще этих сочных мандаринов.
Tahoma, Geneva, sans-serif	Съешь же еще этих сочных мандаринов.
«Trebuchet MS», Helvetica, sans-serif	Съешь же еще этих сочных мандаринов.
Verdana, Geneva, sans-serif	Съешь же еще этих сочных мандаринов.

serif (с засечками)
Семейство шрифта (font-family)	Пример
Georgia, serif	Съешь же еще этих сочных мандаринов.
«Palatino Linotype», «Book Antiqua», Palatino, serif	Съешь же еще этих сочных мандаринов.
«Times New Roman», Times, serif	Съешь же еще этих сочных мандаринов.

monospace (моноширинные)
Семейство шрифта (font-family)	Пример
«Courier New», Courier, monospace	Съешь же еще этих сочных мандаринов.
«Lucida Console», Monaco, monospace	Съешь же еще этих сочных мандаринов.

Типы веб-шрифтов и их поддержка браузерами

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

TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).

Ответственность и поиск веб-шрифтов

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

Чтобы не сталкиваться с любыми правовыми вопросами, связанными с использованием «платных» шрифтов на бесплатной основе, я рекомендую Вам, пользоваться службами шрифтов, например, такой как Google Fonts или, крупными коллекционными порталами, например, Webfont.ru. На начальном этапе Вам этого хватит «за глаза».

Добавление веб-шрифта на страницу

Для добавления шрифта на страницу Вам необходимо:

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

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

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

После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):

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

Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:

Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.

Еще раз обращаю Ваше внимание, что один файл шрифта содержит:

одну плотность шрифта.
один стиль для этого шрифта.

Обратите внимание на важный момент — если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)!

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

Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент <h3>) мы будем использовать шрифт — Roboto-Bold. Для абзацев (элемент <p>) будем использовать шрифт Roboto-Regular, а для курсивного начертания (элемент <i>) — Roboto-Italic.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования правила @font-face</title>
<style> 
@font-face {
font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Regular.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
 /* для упрощения работы со шрифтами допускается использовать одинаковое имя, но при этом начертание или стиль шрифта должен отличаться. IE 8 и ниже не поддерживают такой подход и если Вы хотите поддерживать эти браузеры, то Вам необходимо называть каждый шрифт по разному и более детально стилизовать каждый селектор  */
src: url("/fonts/Roboto-Bold.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: normal;  /* указываем, что стиль шрифта обычный - это значение по умолчанию */
font-weight: bold;  /* определяет жирное начертание символов */ 
}
@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: url("/fonts/Roboto-Italic.ttf") format('truetype');  /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */
font-style: italic;  /* указываем, что стиль шрифта курсивный */
font-weight: normal;  /* определяет нормальное начертание символов - это значение по умолчанию */ 
}
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family: "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
<body>
	<h3>Немного о пандах</h3>
	<p><b>Большая панда</b> (<i>Ailuropoda melanoleuca</i>) — бамбуковый медведь, одно из редчайших вымирающих животных, занесённых в международную Красную книгу; единственный современный представитель рода <b>большие панды</b> (<i>Ailuropoda</i>).</p>
</body>
</html>

И так, что мы сделали в этом примере:

Добавили три правила @font-face в начало наших CSS стилей (это важно).
В каждом правиле с использованием CSS свойства (font-family) мы указали одно название шрифта, вы можете использовать своё название для всех правил, но будет лучше и понятнее если оно будет совпадать с наименованием шрифта.
В каждом правиле мы указали путь к файлу, который содержит шрифт с разрешением TTF (True Type Font).
Далее мы для всех правил с использованием свойства (font-style) указали стиль шрифта: для двух правил шрифт отображается обычным стилем — normal (это значение по умолчанию), а для одного указали, что он отображается курсивом (italic).
Кроме того, для всех правил с использованием свойства (font-weight) указали жирность шрифта: для двух правил шрифт отображается обычной жирности — normal (это значение по умолчанию), а для одного указали что он отображается жирным шрифтом (bold).
Нам осталось только применить наши шрифты к элементам. Для этого мы создали групповой селектор в котором с использованием ранее рассмотренного свойства font-family указали тип нашего шрифта и как альтернативу через запятую указали семейство шрифта, это сделано для того, что если по какой-то причине браузер пользователя не сможет загрузить наши шрифты, он смог использовать шрифты из указанного семейства, а не встроенные в браузер.

Результат нашего примера:

Рис.38 Пример использования правила @font-face.

Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):

@font-face {
font-family: "Roboto";  /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */
src: 
	local("font");  /* проверяется есть ли шрифт на локальном компьютере пользователя по имени, если нет то поиск осуществляется в других указанных источниках */
	url("/fonts/font.woff2") format('woff2');  /* задаем путь к шрифту (url) и тип шрифта (format) */
	url("/fonts/font.woff") format('woff');  /* задаем путь к шрифту (url) и тип шрифта (format) */
	url("/fonts/font.ttf") format('truetype');  /* задаем путь к шрифту (url) и тип шрифта (format) */
}

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

Обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов, имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт. К примеру, если Вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF.

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

Добавление веб-шрифта со стороннего ресурса

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

Переходим на сайт службы Google Fonts.
Выбираем понравившийся нам шрифт, я остановился на том же шрифте, который мы использовали в прошлый раз — шрифт без засечек Roboto. Вы можете использовать поиск по наименованию для его нахождения.
После добавления шрифта необходимо нажать на вкладку «Family-selected» (выбранные вами шрифты):
Далее необходимо выбрать те стили шрифтов, которые мы будем использовать на нашем сайте. Для этого необходимо перейти на вкладку «Customize»
Например, меня интересуют следующие:

Для заголовков (элемент <h3>) и для жирного начертания я буду использовать шрифт – Bold 700 (Roboto Bold в наборе).
Для абзацев (элемент <p>) будем использовать шрифт Normal 400 (Roboto Regular в наборе), а для курсивного начертания Normal 400 Italic (Roboto Italic в наборе).

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

Следующим шагом необходимо выбрать те наборы символов (языки), которые будете использовать на своем сайте (выбор языков находится в том же вкладке — «Customize» немного ниже). В данном случае выбраны кириллические и латинские символы. Выбирайте только те наборы, которые вам необходимы, чтобы Ваши страницы загружались быстрее:

Далее на вкладке «Embed» нам будет предложено два варианта подключения (Standart и @import):

Первый вариант подключения (Standard). Создание ссылки на внешнюю таблицу стилей, используя HTML тег <link>. В адресе ссылки указывается веб-сервер Google и информация, которая необходима Google для загрузки необходимых шрифтов (как правило, это формат woff2 для современных браузеров, определение типа поддерживаемого шрифта происходит на стороне сервера Google в зависимости от Вашего браузера).

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

Обращаю Ваше внимание, что тег <link> размещается всегда внутри тега <head> (как правило, перед закрывающим тегом </head>).

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

Рассмотрим пример подключения, выбранных нами шрифтов:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример подключение веб-шрифтов, используя тег <link></title>
<link href = 'https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic' rel = 'stylesheet' type = 'text/css'> /* подключаем внешнюю таблицу стилей для загрузки необходимых шрифтов, в HTML 5 type='text/css' допускается не указывать */
<style>
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
	<body>
		<h3>Немного о верблюдах</h3>
		<p><b>Верблюды</b> (<i>Camelus</i>) — род млекопитающих семейства верблюдовых (<i>Camelidae</i>) подотряда мозоленогих (<i>Camelidae</i>) отряда парнокопытных (<i>Artiodactyla</i>). Это крупные животные, приспособленные для жизни в засушливых регионах мира — пустынях, полупустынях и степях.</p>
	</body>
</html>

Результат:

Рис.44 Пример подключение веб-шрифтов, используя тег <link>.

Второй вариант подключения, который мы также рассматривали в статье «Введение в CSS» это использование правила @import. В отличие от первого метода (используя HTML тег <link>), который требует добавления кода к каждой странице Вашего сайта, правило @import допускается использовать в начале своей таблицы стилей, которая у Вас уже должна быть подключена к каждой странице.

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

@import url("path/to/file.css");

Предлагаемый вариант импортирования на страницу:

Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе, таблицы стилей не импортируются (браузеры просто их проигнорируют).

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример подключение веб-шрифтов, используя правило @import</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic); /* импортируем внешнюю таблицу стилей */
h3, p, b, i {  /* задаем групповой селектор для элементов <h3>, <p>, <b>, <i> */
font-family : "Roboto", sans-serif;  /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif)  */
}
</style>
</head>
	<body>
		<h3>Немного о пингвинах</h3>
		<p><b>Пингвиновые</b> или <b>пингвины</b> (лат. <i>Spheniscidae</i>) —  семейство нелетающих морских птиц, единственное в отряде <b>пингвинообразных</b> (<i>Sphenisciformes</i>). В семействе 18 современных видов. Все представители этого семейства хорошо плавают и ныряют.</p>
	</body>
</html>

Результат нашего примера:

Рис.46 Пример подключение веб-шрифтов, используя правило @import.

Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке, что может быть критично для конечного отображения конкретной страницы. Не используйте его в своих проектах.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:

Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты: для заголовка — Roboto, для остального текста — Open Sans. Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans к странице. В результате у Вас должно получиться следующее:
Практическое задание № 10.
Переходим на сайт службы Google Fonts, находим необходимый нам шрифт — Ubuntu, выбираем необходимые стили шрифта и языки, которые нам понадобятся. После этого с использованием тега <link> подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:
Практическое задание № 11.

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

Форматирование текста (font-weight, font-style, font-size, text-indent)

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

Жирность текста (font-weight)

С первого взгляда свойство font-weight дублирует тег <b>. То есть делает текст жирным. Но не спешите с выводами, потому что это свойство может различать градации жирного. Для этого у него есть несколько значений:

normal — нормальная жирность шрифта (то есть нет жирного)
bold — текст будет выделен жирным
bolder — текст будет жирнее, чем жирность текста у родительского элемента
lighter — текст будет менее жирным, чем текст у родительского элемента

Приведём пример:

Тише, <span>мыши</span>, кот на крыше.

Получится такой результат:

Тише, мыши, кот на крыше.

Помимо эти названий свойство font-weight может принимать численные значения: 100, 200, 300, 400 и т.д. до 900. Чем больше цифра — тем жирнее текст. Нормальный текст без выделения жирным соответствует цифре 400. Выделенный жирным текст соответствует цифре 700.

Далеко не у всех шрифтов есть весь набор градаций жирного. Обычно используются только два: bold и normal варианты. Поэтому в таких ситуациях какую цифру ни ставь, все равно получишь только 2 варианта жирности. Но через CSS можно подключить шрифты (указать адреса файлов), в которых будет все остальные градации жирности.

Курсив (font-style)

Курсив можно получить с помощью тега <i>. Но ещё и через свойство font-style со значением italic. Приведём пример:

Тише, <span>мыши</span>, кот на крыше.

Получится такой результат:

Тише, мыши, кот на крыше.

Чтобы сделать из курсива нормальный шрифт, используйте «font-style: normal;»

Размер шрифта (font-size)

Через CSS свойство font-size можно задать размер шрифта. Это свойство может принимать несколько единиц измерений. Перечислим их в порядке убывания популярности использования:

px — пикселы,
% — проценты (от размера шрифта родительского элемента)
em — высота шрифта элемента (единица — это сто процентов от размера шрифта родительского элемента),
pt — пункты (по сути пиксели, но в пропорции 12pt = 16px)
текстовые названия размеров: xx-small, x-small, smal, medium, large, x-large, xx-large
ex — высота символа х (единица — это сто процентов),

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

Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.

Получится такой результат:

Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.

Красная строка (text-indent)

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

<div>
   Тише, мыши, кот на крыше,<br>
   а котята ещё выше.
</div>

В браузере будет показано так:

Тише, мыши, кот на крыше,
а котята ещё выше.

Свойства текста | htmlbook.ru

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <font>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Свойства шрифта

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

Табл. 1. Атрибуты CSS для управления шрифтами
Свойство	Значение	Описание	Пример
font-family	имя шрифта	Задает список шрифтов	P {font-family: Arial, serif}
font-style	normal italic oblique	Нормальный шрифт Курсив Наклонный шрифт	P {font-style: italic}
font-variant	normal small-caps	Капитель (особые прописные буквы)	P {font-variant: small-caps}
font-weight	normal lighter bold bolder 100–900	Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный	P {font-weight: bold}
font-size	normal pt px %	нормальный размер пункты пикселы проценты	font-size: normal font-size: 12pt font-size: 12px font-size: 120%

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Шрифт</title>
  <style type="text/css"> 
   h2 { 
    font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */ 
    font-size: 150%; /* Размер текста */ 
    font-weight: lighter; /* Светлое начертание */ 
   }
  </style>
 </head>
 <body>
   <h2>Заголовок</h2>
  <p>Обычный текст</p>
 </body> 
</html>

Ниже приведен результат данного примера (рис. 1).

Рис. 1. Вид текста после применения стилей

В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.

Табл. 2. Результат использования различных параметров шрифтов
Пример	Пример	Пример	Пример	Пример
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light	font-size: large; font-weight: bold	font-family: Arial, sans-serif; font-size: x-small; font-weight: bold	font-variant: small-caps	font-style: italic; font-weight: bold

Свойства текста

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

Табл. 3. Свойства CSS для управления видом текста
Свойство	Значение	Описание	Пример
line-height	normal множитель значение %	Интерлиньяж (межстрочный интервал)	line-height: normal line-height: 1.5 line-height: 12px line-height: 120%
text-decoration	none underline overline line-through blink	Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста	text-decoration: none
text-transform	none capitalize uppercase lowercase	Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные	text-transform: capitalize
text-align	left right center justify	Выравнивание текста	text-align: justify
text-indent	значение %	Отступ первой строки	text-indent: 15px; text-indent: 10%

Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.

Табл. 4. Результат использования различных параметров текста
Пример: и это все о нем	Пример: текст по центру	Пример: Это не ссылка, а просто текст	Пример: отступ первой строки	Пример: полуторный межстрочный интервал
text-transform: capitalize	text-align:center	text-decoration: underline	text-indent: 20px	line-height: 1.5

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

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

В файле CSS вы можете настроить несколько свойств шрифта: font-family, font-size, font-style. Это наиболее часто используемые свойства шрифта:

С помощью свойства font-family можно задать семейство, которым будет отображаться CSS жирный шрифт:

body {
	 font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
 }
 p {
	 font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida 	Typewriter", monospace;
 }

Результат:

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

Свойство font-size предназначено для изменения размера шрифта. Вы можете использовать единицы измерения CSS, такие как пиксели, em и проценты:

Можно установить значение font-size в абсолютных и относительных единицах измерения. Абсолютные единицы задают фиксированный CSS размер шрифта, относительные — задают размер в зависимости от размеров окружающих элементов:

Пиксели (px) — это наиболее часто используемые единицы измерения. Но если вы используете em, то это может помочь избежать некоторых проблем при изменении размеров элементов в окне просмотра:

Em связаны с текущим размером шрифта браузера. 1em равен текущему значению размера шрифта, установленному в браузере. Если сравнивать с пикселями, то вы можете вычислить значение em по следующей формуле: pixels/16=em:

Также можно задать размер CSS шрифта, используя процентные значения. font-size:100%; означает, что шрифт использует текущий размер шрифта браузера. Для увеличения размера нужно задать большее процентное значение. Аналогично, если нужно уменьшить размер шрифта, вы можете уменьшить процентное значение:

Приведенный выше код увеличивает размер шрифта в два раза по сравнению с текущим размером, установленным в браузере:

Этот код уменьшает размер шрифта CSS наполовину по сравнению с текущим размером шрифта браузера:

В CSS предусмотрены два значения для свойства font-style — italic и oblique:

p {font-style:italic;}
	h2{font-style:oblique;}

Если нужно вывести жирный шрифт, то можете использовать свойство CSS font weight:

Значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900:

p{font-weight:bolder;} 
	p{font-weight:500;}

Свойство font-variant используется, чтобы преобразовать все строчные буквы в заглавные. При этом преобразованные заглавные буквы будут выводиться меньшим шрифтом, чем оригинальные заглавные буквы в документе:

p{ font-variant:small-caps;}

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

<html>
<head>
	<style type="text/css">
		body {
			font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
		}
		p.size{ font-size:20px;}
		p.percentage{ font-size:80%;}
		p.style{ font-style:italic; }
		p.bold { font-weight:bold; }
		p.variant { font-variant:small-caps; }
	</style>
</head>
<body>
	<p>This paragraph displays in font size 20</p>
	<p>This paragraph displays in font size smaller as 80%</p>
	<p>This paragraph displays in font style as Italics</p>
	<p>This paragraph displays BOLD letters</p>
	<p>This paragraph change small to capital letters</p>
</body>
</html>

Результат:

Данная публикация представляет собой перевод статьи «CSS font properties» , подготовленной дружной командой проекта Интернет-технологии.ру

телеграм канал. Подпишись, будет полезно!

font-style | CSS | WebReference

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

Краткая информация

Значение по умолчанию	normal
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис

font-style: normal | italic | oblique

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

normal: Обычное начертание текста.
italic: Курсивное начертание.
oblique: Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.

Песочница

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

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>font-style</title> <style> h2 { font-family: Verdana, Arial, Helvetica, sans-serif; /* Рубленый шрифт заголовка */ } p { font-family: ‘Times New Roman’, Times, serif; /* Шрифт с засечками */ font-style: italic; /* Курсивное начертание */ } </style> </head> <body> <h2>Культурный памятник Средневековья</h2> <p>Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами. </p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-style
Объектная модель
Объект.style.fontStyle
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
font-style — Веб-технологии для разработчиков
Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского
font-style это CSS свойство определяющее каким образом шрифт должен быть стилизирован, будь то это normal, italic, или oblique face из его font-family.
Italic шрифты в общем курсивные по своей сути, обычно занимают меньше горизонтального пространства чем их нестилизированные копии, тогда как oblique шрифты обычно просто наклонная версия регулярного шрифта. Когда определённый стиль не доступен, оба italic и oblique шрифты симулируются искусственно наклоняя глифы регулярного шрифта (используйте font-synthesis для управления этим поведением).
Syntax
font-style: normal; font-style: italic; font-style: oblique; /* Глобальные значения */ font-style: inherit; font-style: initial; font-style: unset;
Свойство font-style определяется как единственное ключевое слово выбранное из списка значений внизу.
Values
normal
Выделяет шрифт который классифицирован как normal в font-family.
italic
Выделяет шрифт который классифицирован как italic. Если не доступна курсивная версия шрифта, взамен используется oblique классификация. Если не одна версия не доступна, то стиль симулируется искусственно.
oblique
Выделяет шрифт который классифицирован как oblique. Если не доступна косая версия шрифта, взамен используется italic классификация. Если не одна версия не доступна, то стиль симулируется искусственно.
Formal syntax
normal | italic | oblique <angle>?
Examples
Font styles
<p>This paragraph is normal.</p> <p>This paragraph is italic.</p> <p>This paragraph is oblique.</p>
.normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; }
Specifications
Browser compatibility
Update compatibility data on GitHub
Компьютеры Мобильные
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
font-style Chrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1
Полная поддержка 1
Замечания Before Firefox 44, oblique was not distinguished from italic.
IE Полная поддержка 4 Opera Полная поддержка 7 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4
Полная поддержка 4
Замечания Before Firefox 44, oblique was not distinguished from italic.
Opera Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Internet Android Полная поддержка 1.0
oblique can accept an <angle> Chrome Нет поддержки Нет Edge Нет поддержки Нет Firefox Полная поддержка 61 IE Нет поддержки Нет Opera Нет поддержки Нет Safari Нет поддержки Нет WebView Android Нет поддержки Нет Chrome Android Нет поддержки Нет Firefox Android Полная поддержка 61 Opera Android Нет поддержки Нет Safari iOS Нет поддержки Нет Samsung Internet Android Нет поддержки Нет
Легенда
Полная поддержка
Полная поддержка
Нет поддержки
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Учебник CSS 3. Статья «Работа со шрифтами в CSS»
В этой статье Вы узнаете основную информацию о шрифтах в CSS, а именно: как управлять размером шрифта, его начертанием и жирностью, научитесь подключать безопасные и веб-шрифты, узнаете какие бывают шрифты и где их можно найти. Кроме того, на примере Google Fonts подключим веб-шрифты на наши страницы.
Для привлечения внимания посетителей Вашего сайта вы можете придать привлекательный вид текстовому содержимому страниц.Для этих целей в CSS существует большое количество разнообразных свойств форматирования: шрифт текста, его цвет, размер, межстрочный интервал и так далее. В первую очередь рассмотрим методы работы с используемыми шрифтами (безопасные веб-шрифты).
Безопасные веб-шрифты
В стиле CSS для выбора типа типта тип свойства font-family, в котором указывается интересующий Вас шрифт. Предположим, что вы хотите применить для абзацев страницы шрифт Курьер .В этом случае Вам необходимо будет создать, например, селектор типа и воспользуйтесь своимством font-family:
p { семейство шрифтов: Courier; / * устанавливаем тип шрифта - Courier * / }
Главная особенность данного метода заключается в том, что он будет работать, при условии, что у пользователя установлен подобный тип, иначе, страница будет отображаться с использованием шрифта «встроенного» в браузере.
Так как вы заранее не знаете, есть у пользователя тот, или другой шрифт, рекомендуется указывать не только основной шрифт, но и пару запасных (альтернативных) шрифтов, для того случая если у пользователя отсутствует основной шрифт.
Рекомендуется последним в списке шрифтов указывать и семейство шрифтов. Если у пользователя по каким-то причинам отсутствуют все перечисленные вами шрифты, то в этом случае страница будет отображена хотя бы шрифтом того же семейства, а не шрифтом «встроенным» в браузере.
Давайте рассмотрим следующий пример:
Свойство font-family <стиль> .раз { семейство шрифтов: "Times New Roman", с засечками; / * определяем основной шрифт "Times New Roman", альтернативный засечками (с засечками) * / } .courier { семейство шрифтов: Courier, моноширинный; / * определяем основной шрифт "Курьер", альтернативный моноширинный шрифтов * / }
Параграф, отображаемый шрифтом "Times New Roman".

Параграф, отображаемый шрифтом "Courier".

В данном примере для первого абзаца браузер проверит, есть ли в наличии у пользователя основной шрифт, если нет, то установит шрифт из семейства serif (с засечками). Для второго абзаца был задействован моноширинный шрифт Courier , как альтернатива семейство моноширинных шрифтов (буквы имеют одинаковую ширину).
Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки.
Результат нашего примера:
Рис. 34 Пример использования свойств font-family.
Ниже я перечислю некоторые часто используемые комбинации безопасных веб-шрифтов, которые с большой вероятностью присутствуют на любом компьютере:
без засечек (без засечек)
Семейство шрифта (font-family) Пример
Arial, Helvetica, sans-serif Съешь же еще этих сочных мандаринов.
«Arial Black», Gadget, sans-serif Съешь же еще этих сочных мандаринов.
«Comic Sans MS», курсив, без засечек Съешь же еще этих сочных мандаринов.
Impact, Charcoal, sans-serif Съешь же еще этих сочных мандаринов.
«Lucida Sans Unicode», «Lucida Grande», без засечек Съешь же еще этих сочных мандаринов.
Tahoma, Geneva, sans-serif Съешь же еще этих сочных мандаринов.
«Trebuchet MS», Helvetica, sans-serif Съешь же еще этих сочных мандаринов.
Verdana, Geneva, sans-serif Съешь же еще этих сочных мандаринов.

засечками (с засечками)
Семейство шрифта (font-family) Пример
Georgia, serif Съешь еще этих сочных мандаринов.
«Palatino Linotype», «Book Antiqua», Palatino, serif Съешь же еще этих сочных мандаринов.
«Times New Roman», Times, serif Съешь же еще этих сочных мандаринов.

моноширинные (моноширинные)
Семейство шрифта (font-family) Пример
«Courier New», Courier, monospace Съешь же еще этих сочных мандаринов.
«Lucida Console», Monaco, monospace Съешь же еще этих сочных мандаринов.
Типы веб-шрифтов и их поддержка браузерами
Все современные браузеры использование установленных веб-шрифтов.Происходит это следующим образом: браузер пользователя загружает шрифт с сервера и применяет его для текущей страницы. В настоящее время существуют следующие виды веб-шрифтов:
TTF / OTF (шрифты True Type и Open Type) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
WOFF (Web Open Font Format) — сжатая версия шрифтов TTF / OTF. Формат включает в себя метаданные, которые могут добавить информацию об использовании шрифта.WOFF-формат имеет широкую поддержку со стороны браузеров.
WOFF2 (Web Open Font Format 2) — спецификация была ограничена, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро выполнять декомпрессию даже на мобильных устройствах.
SVG (Scalable Vector Graphic) — способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS / Safari). Планируется, что он перестанет знакомство в Chrome.
EOT (Embedded Open Type) — шрифты, которые поддерживаются в Internet Explorer / Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).

Ответственность и поиск веб-шрифтов
Сразу хочу обратить внимание на то, что многие шрифты вводят заработать на них деньги и распространять на коммерческой основе.
не сталкиваться с любыми правовыми вопросами, связанными с использованием «платных» шрифтов на бесплатной основе, я рекомендую Вам, пользоваться службами шрифтов, например, такими как Google Fonts или крупными коллекционными портами, например, Webfont.RU. На начальном этапе Вам этого хватит «за глаза».
Добавление веб-шрифта на страницу
Для добавления шрифта на страницу Вам необходимо:
использовать правило CSS @ font-face, которое браузеру пользователя, откуда необходимо загрузить шрифт и какое имя шрифта при этом используется. При работе с правилами @ font-face важным моментом является размещение его в начале вашей таблицы стилей, это позволит вашему браузеру сразу преступить к обработке необходимого шрифта.
использовать свойство CSS font-family, чтобы указать имя задействованного шрифта и применить к интересующему Вас фрагментом текста (по аналогии работы с локальными шрифтами).
Давайте рассмотрим пошаговое подключение сторонних шрифтов, на примере использования службы Google Fonts .
Переходим на сайт службы Google Fonts.
Выбираем понравившийся нам шрифт, я остановился на шрифте без засечек Roboto , либо выбрать любой другой:

После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):

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

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

Как Вы можете заметить, в архиве содержит 12 различных шрифтов.Исходя можно установить, что из, например, Robo-Italic предназначен для курса стиля шрифта, Robo-Bold для жирного начертания, Roboto-BoldItalic для курсивного жирного начертания и так далее.
Еще раз обращаю Ваше внимание, что один файл шрифта содержит:
одну плотность шрифта.
один стиль для этого шрифта.
Обратите внимание на важный момент — если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @ font-face для данного типа шрифта)!
Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта, обязательно учтите эти моменты при работе с веб-шрифтами!
Приступим к подключению, загруженных нами шрифтов к нашему документу.Для заголовков второго уровня (элемент
) мы будем использовать шрифт — Roboto-Bold . Для абзацев (элемент
) будем использовать шрифт Roboto-Regular , а для курсивного начертания (элемент ) — Roboto-Italic .
Пример использования правил @ font-face <стиль> @ font-face { семейство шрифтов: "Робото"; / * задаем произвольное имя для шрифта, штатное задание в своем указателе font-family приании стилей для конкретных элементов * / src: url ("/ fonts / Roboto-Regular.ttf ") format ('truetype'); / * задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для (в идеале ускоряет процесс обработки) * / стиль шрифта: нормальный; / * указываем, что стиль шрифта обычный - это значение по умолчанию * / font-weight: нормальный; / * определяет нормальное начертание символов - это значение по умолчанию * / } @ font-face { семейство шрифтов: "Робото"; / * задаем произвольное имя для шрифта, штатное задание в своем указателе font-family приании стилей для конкретных элементов * / / * для упрощения работы со шрифтами следует использовать одинаковое имя, но при этом начертание или стиль должен отличаться.IE 8 и ниже не такой подход и если вы хотите поддерживать эти браузеры, вам необходимо называть каждый шрифт по разному и более детально стилизовать каждый селектор * / src: url ("/ fonts / Roboto-Bold.ttf") формат ('истинный тип'); / * задаем путь относительно корня сайта к шрифту (url) и типу шрифта (формату). Тип шрифта выступает подсказкой для (в идеале ускоряет процесс обработки) * / стиль шрифта: нормальный; / * указываем, что стиль шрифта обычный - это значение по умолчанию * / font-weight: жирный; / * определяет жирное начертание символов * / } @ font-face { семейство шрифтов: "Робото"; / * задаем произвольное имя для шрифта, штатное задание в своем указателе font-family приании стилей для конкретных элементов * / src: url ("/ fonts / Roboto-Italic.ttf ") format ('truetype'); / * задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для (в идеале ускоряет процесс обработки) * / стиль шрифта: курсив; / * указываем, что стиль шрифта курсивный * / font-weight: нормальный; / * определяет нормальное начертание символов - это значение по умолчанию * / } h3, p, b, i {/ * задаем групповой селектор для элементов
,
, , * / семейство шрифтов: "Робото", без засечек; / * устанавливает шрифт Roboto, если он не загружен по какой-то причине, это указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (без засечек) * / }
Немного о пандах

Большая панда ( Ailuropoda melanoleuca ) - бамбуковый медведь, одно из редчайших вымирающих животных, занесенных в международную Красную книгу; единственный современный представитель рода большие панды ( Ailuropoda ).

И так, что мы сделали в этом примере:
Добавили три @ font-face в начало наших CSS стилей (это важно).
В каждом правиле с использованием свойств CSS (font-family) мы указали одно название шрифта, вы можете использовать свое название для всех правил, но будет лучше и понятнее, если оно будет совпадать с наименованием шрифта.
В каждом правиле мы указали путь к файлу, который содержит шрифт с разрешением TTF ( True Type Font ).
Далее мы для всех правил с использованием свойств (font-style) указали стиль шрифта: для двух правил шрифт отображается обычным стилем — normal (это значение по умолчанию), а для одного указали, что он отображается курсивом ( курсивом) ).
Кроме того, для всех правил с использованием свойств (font-weight) указали жирность шрифта: для двух правил стандартной обычной жирности — normal (это значение по умолчанию), а для одного указали, что он отображается жирным шрифтом (жирным шрифтом ).
Нам осталось только применить наши шрифты к элементам. Для этого мы создали групповой селектор в котором с использованием ранее рассмотренного свойства font-family указали тип шрифта и альтернативу через запятую указали семейство шрифта, это сделано для того, что если по какой-то причине браузер пользователя не загрузит наши шрифты, он смог использовать шрифты из нового браузера, а не встроенные в браузер.
Результат нашего примера:
Рис.38 Пример использования правил @ font-face.
Для поддержки современных версий шрифтов, давайте рассмотрим несколько вариантов шрифтов:
@ font-face { семейство шрифтов: "Робото"; / * задаем произвольное имя для шрифта, штатное задание в своем указателе font-family приании стилей для конкретных элементов * / src: местный ("шрифт"); / * проверяется есть ли шрифт на локальном компьютере пользователя по имени, если нет то поиск выполняется в других источниках * / URL ("/ шрифты / шрифт.woff2 ") format ('woff2'); / * задаем путь к шрифту (url) и тип шрифта (формат) * / url ("/ fonts / font.woff") формат ('woff'); / * задаем путь к шрифту (url) и тип шрифта (формат) * / формат URL ("/ fonts / font.ttf") ('истинный тип'); / * задаем путь к шрифту (url) и тип шрифта (формат) * / }
Как вы можете заметить, для того, чтобы несколько вариантов шрифтов указать несколько языков км, которые содержат шрифты с определенным разрешением.
Обращаю Ваше внимание, что порядок, в котором вы указываете варианты шрифтов, имеет важное значение, так как Ваш браузер выбирает первый поддерживаемый шрифт.Например, если вы хотите использовать шрифты на сайте WOFF2, которые поддерживаются не всеми браузерами, то необходимо их указать до WOFF.
. Используется для проверки использования локального языка, используемого в локальном локальном компьютере, используемого для использования в своих проектах, для этих целей надежным. является использование скриптов.
Добавление веб-шрифта со стороннего ресурса
Давайте рассмотрим пример Google Fonts вариантов подключения шрифтов к Вашим страницам без загрузки их на Ваш сервер.
Переходим на сайт службы Google Fonts.
Выбираем понравившийся нам шрифт, я остановился на том же шрифте, который мы использовали в прошлый раз — шрифт без засечек Roboto . Вы можете использовать поиск по наименованию для его нахождения.
После добавления шрифта необходимо нажать на вкладку «Выбрано семейным шрифтом» (выбранные вами шрифты):
Далее необходимо выбрать те стили шрифтов, которые мы будем использовать на нашем сайте. Для этого необходимо перейти на вкладку «Настроить»
Например, меня интересуют следующие:
Для заголовков (элемент
) и для жирного начертания я буду использовать шрифт — Bold 700 (Roboto Bold в наборе).
Для абзацев (элемент
) будем использовать шрифт Normal 400 (Roboto Regular в наборе), а для курсивного начертания Normal 400 Italic (Roboto Italic в наборе).

При выборе Вам показят влияние тех ресурсов. Используя набор стилей шрифтов, может привести к замедлению загрузки страниц, поэтому рекомендуется выбирать только те шрифты, которые вам действительно необходимы на вашем сайте.
Следующим шагом необходимо выбрать те наборы символов (языки), которые будут использовать на своем сайте (выбор языков находится в том же вкладке — «Настроить» немного ниже). В данном случае выбраны кириллические и латинские символы. Выбирайте только те наборы, которые вам необходимы, чтобы Ваши страницы загружались быстрее:
Далее на вкладке «Embed» нам будет предложено два варианта подключения ( Standart и @import ):
Первый вариант подключения (стандартный). Создание ссылок на внешнюю таблицу стилей, используя HTML тег. В адресе ссылки указывается веб-сервер Google и информация, которая необходима Google для загрузки необходимых шрифтов (как правило, это формат woff2 для современных браузеров, определение типа поддерживаемого шрифта происходит на стороне сервера Google в зависимости от вашего типа).
Как вы видите, в ссылке указывается на обозначение, толщина шрифта и какой набор символов используется.Если вы внимательно читали статью «Введение в CSS», то необходимо указать эту ссылку на каждой странице, где необходимо использовать данные шрифты.
Обращаю Ваше внимание, что тег размещается всегда внутри тега (как правило, перед закрывающим тегом).
Необходимое наименование шрифта и альтернативный вариант так же указывается в описании:
Рассмотрим пример подключения, выбранных нами шрифтов:
Пример подключения веб-шрифтов, используя тег <link> / * подключаем внешнюю таблицу стилей для загрузки необходимых шрифтов, в HTML 5 type =' text / css 'Разрешено не указывать * / <стиль> h3, p, b, i {/ * задаем групповой селектор для элементов
,
, , * / семейство шрифтов: "Робото", без засечек; / * устанавливает шрифт Roboto, если он не загружен по какой-то причине, это указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (без засечек) * / }
Немного о верблюдах

Верблюды ( Camelus ) - род млекопитающих семейства верблюдовых ( Camelidae ) подотряда мозоленогих ( Camelidae ) отряда парнокопытных ( Artiodactyla ).Это крупные животные, приспособленные для жизни в засушливых регионах мира - пустынях, полупустынях и степях.

Результат:
Рис.44 Пример подключения веб-шрифтов, используя тег.
Второй вариант подключения , который мы также рассматривали в статье «Введение в CSS» это использование правил @import. В отличие от используемого метода (используя HTML тег), которое требует использования кода на каждой странице вашего сайта, правило @import позволяет использовать в начале таблицы стилей, у вас уже должна быть подключена к каждой странице.
Чтобы выполнить привязку к внешнему файлу CSS, нужно использовать url и заключить путь к CSS файлу в круглые скобки. Допустимо заключить содержимое в скобках в кавычки:
@import url ("путь / к / file.css");
Предлагаемый вариант импортирования на страницу:
Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе, таблицы стилей не импортируются (браузеры просто их проигнорируют).
Вы можете использовать правило @import как во внешних таблицах стилей, так и во внутренних. Рассмотрим пример подключения, выбранных нами шрифтов, используя правило @import во внутренних таблицах стилей:
Пример подключения веб-шрифтов, используя правило @import <стиль> @import url (https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic); / * импортируем внешнюю таблицу стилей * / h3, p, b, i {/ * задаем групповой селектор для элементов
,
, , * / семейство шрифтов: "Робото", без засечек; / * устанавливает шрифт Roboto, если он не загружен по какой-то причине, это указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (без засечек) * / }
Немного о пингвинах

Пингвиновые или пингвины (лат. Spheniscidae ) - семейство нелетающих морских птиц, единственное в отряде пингвинообразных ( Sphenisciformes ). В семействе 18 современных видов. Все представители этого семейства хорошо плавают и ныряют.

Результат нашего примера:
Рис.46 Пример подключения веб-шрифтов, используя правило @import.
Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать.Исходя из правил и рекомендаций PageSpeed Insight (Google), рекомендуется использовать правила @import.
Кроме того, в некоторых случаях @import может замедлять загрузку таблиц стилей, либо загружать их не в заданном порядке. Не используйте его в своих проектах.

Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практические задания:
Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML) в любую папку на вашем жестком диске:

Переходим на сайт службы Google Fonts и скачиваем необходимые нам шрифты: для заголовка — Roboto , для остального текста — Open Sans .Обратите внимание, что Вам необходимо будет подключить один шрифт Roboto и три Open Sans на странице. В результате у Вас должно получиться следующее:
Практическое задание № 10.
Переходим на сайт службы Google Fonts, выбираем необходимые нам шрифты — Ubuntu , выбираем необходимые стилита и языки, которые нам понадобятся. После этого использования тега подключите шрифты на нашу страницу. В результате у Вас должно получиться следующее:
Практическое задание № 11.
Если у Вас возникают трудности при подключении шрифтов, всегда можно открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

.
Учебник CSS для начинающих. Свойства шрифта.
Глава 3
В предыдущей работе мы рассмотрели свойства текста, в этой поговорим о том, что можно сделать со шрифтом инструментов CSS.
Свойство font-style , в зависимости от выбранного значения, определяет стиль шрифта.
Шрифт может иметь следующие стили:
нормальный — обычный (по умолчанию)
курсив — курсив
наклонный — наклонный
Пример:

Стиль шрифта

это курсив
а это наклонный текст
И чем спрашивается, они отличаются?

Чем отличается курсив от наклонного текста? Курсив — это своего рода шрифт взятый из библиотеки шрифтов, наклонный текст — это результат работы алгоритма, где символ слегка наклоняется в правую каждую сторону.
Весьма интересное свойство шрифта font-variant позволяет делать строчные буквы заглавными и уменьшенными.
Значения:
нормальный — нормальный (по умолчанию)
маленькие — все буквы заглавные и уменьшенные
Пример:

Все буквы заглавные

Купи слона !!

Свойство CSS font-size — определить размер шрифта.
шрифта может быть задан в процентах или пикселях и любых других допустимых единиц измерения CSS, а так же абсолютным или относительным размером.
значения абсолютного размера шрифта:
xx-small — очень очень маленький
x-small — очень маленький
малый — маленький
средний — средний
большой — большой
x-большой — очень большой
xx-большой — очень очень большой
значения относительного размера шрифта:
крупнее — больше чем размер шрифта родительского элемента
меньше — меньше чем размер шрифта родительского элемента
Пример:

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

Размер шрифта родительского элемента (блока DIV) равен 18 пикселям Этот шрифт будет крупнее относительно элемента родителя А этот шрифт будет мельче относительно элемента родителя
В блоке ниже размер штифта элемента родителя огромен (60 пунктов) , однако дочерние параграфы расположенные в нём имеют абсолютное значение шрифта и к размеру шрифта элемента родителя никак не привязаны.
xx-small — очень очень маленький x-small — очень маленький small — маленький средний — средний большой — большой x-large — очень большой xx-large — очень, очень большой

Свойство font-weight — определить жирность шрифта.Насыщенность шрифта может быть задана относительно шрифта элемента родителя с помощью следующих значений:
обычный — обычный шрифт
жирный — полужирный шрифт
полужирный — жирный шрифт
зажигалка — тонкий шрифт
А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300 … 900) где значение 100 тонкий шрифт, а 900 — сверх жирный.
Пример:

Жирность шрифта

жирный шрифт < p> шрифт жирность шрифта точно 600

Атрибут CSS font-family — указывает одно, два или три имени шрифта из библиотеки шрифтов.
Возможность указывать до трёх шрифтов через запятую используется инструментми во избежание проблем связанных с отсутствием, по тем или иным причинам, указанными именами в библиотеке шрифтов на компьютере пользователя.
Так например запись в стилевом описании P {font-family: Times New Roman, Arial, Verdana;} — будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Times New Roman, а если его по каким то мифическим шрифтом не следует использовать шрифт Arial, и уж если и его нет, тогда писать шрифтом Verdana.
Если же браузер не найдет в библиотеке шрифтов пользователя ни одного шрифта из указанного то он будет использовать тот шрифт который указан в его настройках «по умолчанию»
Однако также можно указать браузеру не только какой то конкретный шрифт, но обозначить предпочтительное семейство шрифтов из перечисленных ниже
serif — шрифты с засечками
sans-serif — рубленые шрифты
курсив — курсивные шрифты
фэнтези — декоративные шрифты
моноширинный — моношириные шрифты
Например, если в файле CSS написать P {font-family: Times New Roman, sans-serif;} то это будет значить что если вдруг не надежится шрифта с именем Times New Roman, то следует использовать любой ( или установленный в настройках) доступный шрифт из семейства sans-serif — рубленых шрифтов.
Пример:

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

Купи слона
У нас Вы можете по выгодным ценам приобрести лучших слонов !!

Вы наверняка обратили внимание на тот факт, что все свойства CSS предназначены для работы со шрифтом начинаются с английского слова font (собственно шрифт).. шрифт -семейство, шрифт -размер и т.д ..
вот это неспроста .. дело в том, что все эти свойства являются «дочерними» базового атрибута CSS font в довершении главы о нем собственно и пойдёт речь.
Речь будет недолгой ..)) Итак font — (шрифт), являясь базовым атрибутом, может определять одновременно несколько параметров шрифта стандартного типа или другие значения от следующих атрибутов:
шрифт
вариант шрифта
font-weight
размер шрифта
семейство шрифтов
Для более детального ознакомления с возможными возможными каждый атрибут отдельно.
Предположим нам необходимо написать стилевое описание шрифта для тега и по нашей задумке шрифт для данного тега должен быть: курсивом, жирным, иметь размер 20 пикселей и использовать шрифт Arial
Все это можно осуществить, написав следующие:
span { font-style: курсив; font-weight: жирнее; размер шрифта: 20 пикселей; Семейство шрифтов : Arial }
А можно обойтись всего одной строчкой используя базовый атрибут font .
Вот так:
span {font: italic bold 20px Arial}
Мы просто перечислили нужные нам параметры «марки» шрифт . Согласитесь, по-моему, так писать намного проще, к тому же код становится более компактным и лёгким для чтения как браузером, так и человеком.
Пример:

Параметры шрифта

Этот текст написан курсивом, он жирный, имеет размер 20 пикселей и использует шрифт Arial

Используйте базовый атрибут шрифт если применить к шрифту элемента более одного свойства.
Помните что текст, прежде всего, должен быть 27 сообщений для чтения и только потом красивым и стильным, а по сему советую избежать следующих вещей:
Не стоит использовать огромные и малюсенькие шрифты, это напрягает, ищите золотую середину. Так же не стоит злоупотреблять декоративными шрифтами, конечно, все эти закорючки весьма красивы, но читать длинный текст с таким шрифтом невыносимо. Выделяйте жирным только те фразы и выражения, которые используются для производства акцент, а курсивом «особые места» в тексте, к примеру, цитаты или афоризмы.
. «особый текст» третьим.

.
Форматирование текста (font-weight, font-style, font-size, text-indent)
В этой статье рассмотрены способы форматирования текста с помощью различных свойств CSS.
Жирность текста (font-weight)
С первого взгляда свойство font-weight дублирует тег . То есть делает текст жирным. Но не спешите с выводами, потому что это свойство может различать градации жирного. Для этого у него есть несколько значений:
нормальная — нормальная жирность шрифта (то есть нет жирного)
жирным шрифтом — текст будет выделен жирным
смелее — текст будет жирнее, чем жирность текста у родительского элемента
Зажигалка — текст будет жирным, чем текст у родительского элемента
Приведём пример:
Тише, мыши , кот на крыше.
Получится такой результат:
Тише, мыши, кот на крыше.
Помимо этих названий свойство font-weight может принимать численные значения: 100, 200, 300, 400 и т.д. до 900. Чем больше цифра — тем жирнее текст. Нормальный текст без выделения жирным соответствует цифре 400. Выделенный жирным текст соответствует цифре 700.
Далеко не у всех шрифтов есть весь набор градаций жирного. Обычно используются только два: жирный и нормальный варианты. Поэтому в таких ситуациях какую цифру ни ставь, все равно получишь только 2 варианта жирности.Но через CSS можно подключить шрифты (указать адреса файлов), которых будет все градации жирности.
Курсив (шрифтовая)
Курсив можно получить с помощью тега . Но ещё и через свойство font-style со значением курсива. Приведём пример:
Тише, мыши , кот на крыше.
Получится такой результат:
Тише, мыши, кот на крыше.
Чтобы сделать из курса нормальный шрифт, використовуйте «font-style: normal ;»
Размер шрифта (font-size)
Через свойство CSS font-size можно задать размер шрифта.Это может принимать несколько измерений. Перечислим их в порядке убывания использования:
пикселей — пикселы,
% — проценты (от размера шрифта родительского элемента)
em — высота шрифта элемента (единица — это сто процентов от размера шрифта родительского элемента),
пт — содержит (по сути пиксели, но в пропорциях 12 пт = 16px)
текстовые названия размеров: xx-маленький, x-маленький, маленький, средний, большой, x-большой, xx-большой
ex — высота символа х (единица — это сто процентов),
Приведём пример использования.Постараемся сделать примерно одинаковый размер шрифта, используя все возможные единицы измерения:
Тише, мыши , кот на крыше. Тише, мыши , кот на крыше. Тише, мыши , кот на крыше. Тише, мыши , кот на крыше. Тише, мыши , кот на крыше. Тише, мыши , кот на крыше.
Получится такой результат:
Тише, мыши, кот на крыше.Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше. Тише, мыши, кот на крыше.
Красная строка (текст-отступ)
Наверное, вы уже заметили, что HTML не воспринимает пробелы. То есть если в HTML коде поставить сотню пробелов между словами, а потом открыть этот HTML-файл в браузере, то пробелы заменятся на один. Из-за этого и нет возможности сделать красную строку в абзаце.Но на помощь приходит CSS свойство text-indent , которое может сделать этот отступ. Значение этого свойства задаются в пикселях. Приведём пример:
Тише, мыши, кот на крыше, а котята ещё выше.
В браузере будет показано так:
Тише, мыши, кот на крыше,
а котята ещё выше.
.
Свойства шрифтов в CSS | CSS
Свойства CSS шрифтов являются одним из наиболее важных для документа. Если на клиентской машине не установлен используемый шрифт, то браузер будет отображать текст шрифтом, который задан по умолчанию для данной системы.
В файле CSS вы можете настроить несколько свойств шрифта: font-family, font-size, font-style. Это наиболее часто используемый шрифта:
С помощью свойств font-family можно задать семейство, которым будет CSS жирный шрифт:
body { семейство шрифтов: «Arial Black», «Arial Bold», Gadget, без засечек; } п { семейство шрифтов: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", моноширинный; }
Результат:

Через свойство семейства шрифтов CSS можно установить более одного шрифта.По умолчанию браузер будет использовать первый из указанных шрифтов, который установлен на компьютере конечного пользователя. Важно отметить, что название семейства не зависит от регистра букв.
Свойство font-size предназначено для изменения размера шрифта. Вы можете использовать размеры CSS, такие как пиксели, em и проценты:

Можно установить значение font-size в абсолютных и относительных единиц измерения. Абсолютные единицы задают фиксированный размер CSS размер шрифта, относительные — задают размер в зависимости от размеров окружающих элементов:
Пиксели (px) — это наиболее часто используемого элемента измерения.Но если вы используете em, то это может помочь избежать некоторых проблем при изменении размеров элементов в окне просмотра:
Em связаны с текущим размером шрифта. 1em равен текущему значению размера шрифта, установленному в браузере. Если можете сравнить с пикселями, то вы можете вычислить их по следующей формуле: pixel / 16 = em:
Также можно задать размер CSS шрифта, используя процентные значения. размер шрифта: 100%; означает, что шрифт использует текущий размер шрифта.Для увеличения размера нужно задать большее процентное значение. Аналогично, если нужно уменьшить размер шрифта, вы можете уменьшить процентное значение:
Приведенный выше код увеличивает размер шрифта в два раза по сравнению с текущим размером, установленным в браузере:
Этот код уменьшает размер шрифта CSS наполовину по сравнению с текущим размером шрифта Категории:
В CSS представлены два значения для свойств font-style — italic и oblique:
p {font-style: italic;} h2 {font-style: oblique;}
Если нужно вывести жирный шрифт, можно использовать свойство CSS font weight:
Значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500 , 600, 700, 800, 900:
p {font-weight: bolder;} p {font-weight: 500;}
Свойство font-variant используется, чтобы преобразовать все строчные буквы в заглавные.При этом преобразованные заглавные буквы будут выводиться меньшим шрифтом, чем оригинальные заглавные буквы в документе:
p {font-variant: small-caps;}
В следующем коде используются основные описанные выше свойства шрифтов в CSS:

Этот абзац отображается с размером шрифта 20

Этот абзац отображается с размером шрифта меньше 80%

Этот абзац отображается курсивом шрифтом

В этом абзаце отображаются ЖИРНЫЕ буквы

В этом абзаце буквы заменены заглавными

Результат:
Данная публикация представляет собой перевод статьи «Свойства шрифта CSS», подготовленной дружной командой проекта Интернет-технологии.ру
телеграм канал. Подпишись, будет полезно!
.
No related posts.

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`font-style`	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1 Полная поддержка 1 Замечания Before Firefox 44, `oblique` was not distinguished from `italic`.	IE Полная поддержка 4	Opera Полная поддержка 7	Safari Полная поддержка 1	WebView Android Полная поддержка 1	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4 Полная поддержка 4 Замечания Before Firefox 44, `oblique` was not distinguished from `italic`.	Opera Android Полная поддержка 10.1	Safari iOS Полная поддержка 1	Samsung Internet Android Полная поддержка 1.0
`oblique` can accept an `<angle>`	Chrome Нет поддержки Нет	Edge Нет поддержки Нет	Firefox Полная поддержка 61	IE Нет поддержки Нет	Opera Нет поддержки Нет	Safari Нет поддержки Нет	WebView Android Нет поддержки Нет	Chrome Android Нет поддержки Нет	Firefox Android Полная поддержка 61	Opera Android Нет поддержки Нет	Safari iOS Нет поддержки Нет	Samsung Internet Android Нет поддержки Нет

Семейство шрифта (font-family)	Пример
Georgia, serif	Съешь еще этих сочных мандаринов.
«Palatino Linotype», «Book Antiqua», Palatino, serif	Съешь же еще этих сочных мандаринов.
«Times New Roman», Times, serif	Съешь же еще этих сочных мандаринов.

Учебник CSS для начинающих. Свойства шрифта.

Учебник CSS 3. Статья «Работа со шрифтами в CSS»

Безопасные веб-шрифты

Типы веб-шрифтов и их поддержка браузерами

Ответственность и поиск веб-шрифтов

Добавление веб-шрифта на страницу

Добавление веб-шрифта со стороннего ресурса

Вопросы и задачи по теме

Форматирование текста (font-weight, font-style, font-size, text-indent)

Жирность текста (font-weight)

Курсив (font-style)

Размер шрифта (font-size)

Красная строка (text-indent)

Свойства текста | htmlbook.ru

Свойства шрифта

Свойства текста

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

font-style | CSS | WebReference

Краткая информация

Синтаксис

Обозначения

Значения

Песочница

Пример

Объектная модель

Спецификация

Браузеры

Автор и редакторы

font-style — Веб-технологии для разработчиков

Syntax

Values

Formal syntax

Examples

Font styles

Specific​ations

Browser compatibility

Легенда

Учебник CSS 3. Статья «Работа со шрифтами в CSS»

Безопасные веб-шрифты

Типы веб-шрифтов и их поддержка браузерами

Ответственность и поиск веб-шрифтов

Добавление веб-шрифта на страницу

Немного о пандах

Добавление веб-шрифта со стороннего ресурса

) и для жирного начертания я буду использовать шрифт — Bold 700 (Roboto Bold в наборе).

Немного о верблюдах

Немного о пингвинах

Вопросы и задачи по теме

Учебник CSS для начинающих. Свойства шрифта.

Купи слона

Форматирование текста (font-weight, font-style, font-size, text-indent)

Жирность текста (font-weight)

Курсив (шрифтовая)

Размер шрифта (font-size)

Красная строка (текст-отступ)

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

Добавить комментарий Отменить ответ

Specifications