belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net

Основы создания сайтов...
CSS >>>

2.2. Определение характеристик шрифтов

Шрифты в CSS

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Шрифты</title>
	<style>
		.f_1{font-family: arial, tahoma, sans-serif;}
		.f_2{font-family: gabriola;}
		.f_3{font-family: "high tower text", sans-serif;}
		.f_4{font-family: "monotype corsiva", serif;}
		.f_5{font-family: verdana, arial;}
	</style>
</head>
<body>
	<p class="f_1">
		Ко мне применяется шрифт Arial.
	</p>
	
	<p class="f_2">
		Ко мне применяется шрифт Gabriola.
	</p>
	<p class="f_3">
		Ко мне применяется шрифт семейства sans-serif.
	</p>
	
	<p class="f_4">
		Ко мне применяется шрифт Monotype Corsiva.
	</p>
	<p class="f_5">
		Ко мне применяется шрифт Verdana.
	</p>
</body>
</html>

Пример 2.6. Использование различных видов шрифта

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Шрифты</title>
	<style>
		.size_1{font-size: medium;}
		.size_2{font-size: large;}
		.size_3{font-size: x-large;}
		.size_4{font-size: 100%;}
		.size_5{font-size: 1em;}
	</style>
</head>
<body>
	<p class="size_1">
		{font-size: medium;}
	</p>
	
	<p class="size_2">
		{font-size: large;} 
	</p>
	<p class="size_3">
		{font-size: x-large;}
	</p>
	
	<p class="size_4">
		{font-size: 100%;}
	</p>
	<p class="size_5">
		{font-size: 1em;}
	</p>
</body>
</html>

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

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

Насыщенность шрифта и css-свойство font-weight

Насыщенность (жирность) шрифта устанавливается при помощи наследуемого свойства font-weight, принимающего ряд значений, определяющих степень жирности: normal (по умолчанию), bold, bolder, lighter и числа от 100 до 900 с шагом 100, где bolder и lighter определяют, соответственно, жирность меньшую или большую, чем у родительского элемента (см. пример 2.8).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Шрифты</title>
	<style>
		.weight_1{font-weight: normal;}
		.weight_2{font-weight: bold;}
		.weight_3{font-weight: bolder;}
		.weight_4{font-weight: lighter;}
		.weight_5{font-weight: 600;}
	</style>
</head>
<body>
	<p class="weight_1">
		normal соответствует значению 400,<br>
		значения 100, 200, 300 не будут работать.
	</p>
	<p class="weight_2">
		bold соответствует значению 600. 
	</p>
	<p class="weight_3">
		У родительского элемента, т.е. у тела документа,<br>
		по умолчанию браузер использует жирность normal,<br>
		поэтому значение bolder повышает ее до bold.
	</p>
	<p class="weight_4">
		 lighter не сработает, т.к. браузеры на данный <br>
		 момент поддерживают только значения 400 и 600.
	</p>
	<p class="weight_5">
		600 соответствует bold.
	</p>
</body>

Пример 2.8. Установка насыщенности шрифта

На данный момент значения 100500 свойства font-weight соответствуют нормальному начертанию шрифта, а 600900, соответственно, жирному начертанию. В дальнейшем возможно станут доступны и остальные числовые значения.

Стиль шрифта и css-свойство font-style

Кроме насыщенности, конечно же, нас интересует и возможность выделять слова и фрагменты текста курсивом. CSS дает нам такую возможность за счет применения наследуемого свойства font-style, которое определяет начертание шрифта и может принимать следующие значения:

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

Также хотелось бы напомним, что все свойства CSS могут принимать значение inherit, которое сообщает браузеру о том, что значение свойства должно быть унаследовано от родителя.

Капитель и css-свойство font-variant

Иногда на сайтах можно увидеть, что вместо строчных букв используются прописные, но малого размера. Такой прием в типографике называют капителью. Делается это при помощи наследуемого свойства font-variant, которое может принимать значения normal (браузер будет отображать символы стандартным способом) и small-caps (браузер будет конвертировать символы в капитель).

Универсальное css-свойство font

Итак, чтобы изменять различные характеристики шрифта можно воспользоваться одним из доступных свойств: font-family, font-size, font-weight, font-style, font-variant. Однако в CSS имеется возможность задать через пробел несколько характеристик шрифта одновременно в одном универсальном наследуемом свойстве font. При этом размер шрифта и его семейство должны указываться обязательно. Также имеет значение порядок указания значений свойств: первыми, если они конечно будут указываться, должны записываться значения свойств font-style, font-variant или font-weight в любом порядке, затем необходимо указывать значение свойства font-size, а также при необходимости через слэш '/' значение свойства line-height, в конце указывается значение свойства font-family (см. пример 2.9). В случае отсутствия значения какого-нибудь свойства браузер использует значение по умолчанию.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Шрифты</title>
	<style>
		.font_1{font: 1.2em/25px serif;}
		.font_2{font: bold italic 0.9em "courier new", serif;}
		.font_3{font: normal small-caps 1em/1.2em verdana;}
	</style>
</head>
<body>
	<p class="font_1">
		font_1{font: 1.2em/25px serif;}.<br>
		Здесь указаны размер, высота строки и семейство.
	</p>
	<p class="font_2">
		font_2{font: bold italic 0.9em "courier new", serif;}.<br>
		Здесь &ndash; насыщенность, начертание, размер, шрифт + семейство.
	</p>
	<p class="font_3">
		font_3{font: normal small-caps 1em/1.2em verdana;}<br>
		Значение normal будет применено сразу к насыщенности<br>
		и начертанию, т.к. оно присутствует у обоих свойств.
	</p>
</body>
</html>

Пример 2.9. Одновременная установка нескольких характеристик шрифта

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

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

Контрольные вопросы и задания

  1. Что такое шрифт? Перечислите основные семейства шрифтов, используемых в CSS.
  2. Каков синтаксис перечисления имен шрифтов в свойстве font-family? Как должны записываться имена шрифтов состоящих из нескольких слов?
  3. Какое свойства позволяет задать размер шрифта? Перечислите его значения.
  4. Какое свойства позволяет задать насыщенность шрифта? Перечислите его значения.
  5. Опишите синтаксис универсального свойства font.

Быстрый переход к другим страницам

Словарь новых английских слов

word [ˈwɜːd] – слово.
letter [ˈlɛtə] – буква, литера.
spacing [ˈspeɪsɪŋ] – интервал, расстояние.
inherit [ɪnˈhɛrɪt] – наследовать.
indent [ɪnˈdɛnt] – отступ, абзац.
justify [ˈdʒʌstɪfʌɪ] – выровнять строку.
center [ˈsentər] – центр.
direction [dɪˈrɛkʃ(ə)n] – направление.
embed [ɪmˈbɛd] – вставлять, внедрять.
override [ˌəʊvəˈraɪd] – перебивать, не принимать во внимание.
space [speɪs] – пробел, интервал, место.
wrap [ræp] – перенос на строку, обертывать.
line [laɪn] – линия, строка.
capitalize [ˈkapɪt(ə)lʌɪz] – писать прописными буквами.
uppercase [ˈʌpəkeɪs] – верхний регистр.
lowercase [ˈləʊəkeɪs] – нижний регистр.
overline [ˈəʊvəlaɪn] – надчеркивание.
underline [ˌʌndəˈlaɪn] – линия подчеркивающая слово.
through [θruː] – прохождение через.
font [fɒnt] – комплект шрифта.
family [ˈfamɪli] – семья, семейство.
serif [ˈsɛrɪf] – засечка, шрифт с засечками.
sans [sænz] – без (предлог).
cursive [ˈkəːsɪv] – курсив, рукописный текст.
fantasy [ˈfantəsi] – воображение, фантазия.
monospace [ˈmɒnəʊspeɪs] – моноширинный шрифт.
size [saɪz] – размер, величина, объем.
small [smɔːl] – маленький, небольшой.
medium [ˈmiːdɪəm] – средний, умеренный.
large [lɑːdʒ] – большой, крупный.
bold [bəʊld] – жирный (шрифт).
light [lʌɪt] – светлый.
weight [weɪt] – вес.
italic [ɪˈtalɪk] – курсивный.
oblique [əˈbliːk] – косой, наклонный.
variant [ˈvɛərɪənt] – вариант, модификация.
caption [ˈkapʃ(ə)n] – заголовок.
icon [ˈaɪkɒn] – иконка.
message [ˈmɛsɪdʒ] – сообщение.
box [bɒks] – коробка, ящик.
circle [ˈsəːk(ə)l] – круг, кольцо.
square [skwɛː] – квадрат, квадратный.
decimal [ˈdɛsɪm(ə)l] – десятичный.
separate [ˈseprət] – раздельный, разделять.
collapse [kəˈlaps] – сплющивание.
border [ˈbɔːdə] – граница.
hide [haɪd] – прятать.
show [ʃəʊ] – показывать.
fixed [fɪkst] – закрепленный, фиксированный.
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2018.
Связаться с автором
Наверх