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



belarusweb.net

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

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

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

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

Как следует из определения, изменяя рисунок символов, а также их размер, можно получать различные виды шрифтов, которые будут соответствовать общему дизайну сайта, делая его более уникальным и неповторимым. Взгляните на пример 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. Использование различных видов шрифта

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

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

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

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. Ведь такие относительные единицы прямым образом зависят от размера шрифта родительского элемента.

Насыщенность (жирность) шрифта устанавливается при помощи наследуемого свойства 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, которое определяет начертание шрифта и может принимать следующие значения:

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

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

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

Итак, чтобы изменять различные характеристики шрифта можно воспользоваться одним из доступных свойств: 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. Какие свойства позволяют задать размер, насыщенность и стиль шрифта? Перечислите их значения.

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

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-2017.
Связаться с автором
Наверх