Font-family — задаем имя шрифта в CSS
Начнем с атрибута стиля font-family с помощью которого можно задать гарнитуру и тип шрифта, которым будет выведен текст html-элемента (например текст заголовка или абзаца p). Синтаксис применения атрибута выглядит так:
font-family: <список имен шрифтов разделенных запятыми>
Список имен шрифтов задается в виде их названий (например Arial, Verdana или Times New Roman). Если имя шрифта содержит пробелы, то его необходимо взять в кавычки. Можно указать несколько наименований шрифтов, разделив их запятыми. В этом случае браузер сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, третий и так далее:
p { font-family: Arial, Verdana, ‘Times New Roman’, san-serif; }
В данном примере браузер сначала будет искать на компьютере пользователя шрифт Arial и если найдет, то отобразит все элементы p этим же шрифтом. Если же Arial на компьютере пользователя не найдется, тогда браузер будет искать Verdana, затем, в случае неудачи — Times New Roman, и так далее. Последним в списке имен шрифтов в данном примере идет не имя конкретного шрифта, а имя целого семейства шрифтов, представляющего целые наборы аналогичных шрифтов.
Таким образом можно задавать целые семейства шрифтов. Таких семейств всего пять:
- serif — шрифты с засечками;
- sans-serif -шрифты без засечек;
- cursive — шрифты, имитирующие рукописный текст;
- fantasy — декоративные шрифты;
- monospace — моноширинные шрифты.
Кроме имен шрифтов, свойству font-family можно задать особое значение inherit, которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.
Font-size — задаем размер шрифта с помощью CSS
Свойство стиля font-size определяет размер шрифта для какого-либо элемента в html-коде. Синтаксис применения:
font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit
Давайте теперь рассмотрим подробнее способы применения данного свойства.
Размер шрифта можно задавать в абсолютных и относительных величинах. Для этого используются единицы измерения, поддерживаемые CSS. Чтобы задать размер шрифта жестко, используются следующие единицы измерения:
- px — пиксели;
- pt — пункты;
- in — дюймы;
- cm — сантиметры;
- mm — миллиметры;
- pc — пики.
Обозначение единицы измерения указывают после самого значения. Например:
p { font-size: 10px; }
strong { font-size: 12pt; }
При использовании этих стилей, текст во всех элементах p на странице будет размером 10 пикселей, а элементов strong 12 пунктов.
Для задания относительных размеров шрифта используются следующие обозначения:
- em — размер буквы «m» текущего шрифта;
- ex — размер буквы «x» текущего шрифта;
- % — проценты от размера шрифта родительского элемента.
Например:
h1 { font-size: 3em; }
em { font-size: 150%; }
В этом примере заголовок h1 будет нарисован шрифтом в три раза большего размера, чем тот, который использовался бы по умолчанию. А элементы em в полтора раза большего размера.
Кроме числовых значений, свойству font-size можно задавать одно из семи символьных значений: xx-small, x-small, small, medium, large, x-large или xx-large, — которые задают определенные размеры шрифта от самого маленького до самого большого:
Ну, и последний способ это использование значений «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного. Например, если для родительского элемента определен шрифт размера small, то значение larger установит для текущего элемента размер шрифта medium.
Тег и его параметры
<FONT> — контейнерный тег оформления текста, предназначенный для изменения размера, цвета и гарнитуры текста, помещенного в контейнер — </FONT>
Тег выполняет свои функции за счет параметров, каждый из которых отвечает за одно из вышеперечисленных свойств текста. При отсутствии параметров тег не производит никакого воздействия на текст.
Итак, вот параметры, позволяющие манипулировать свойствами текста с помощью тега <font>:
size — параметр, позволяющий поменять размер текста, заключенного в контейнер тега.
Может принимать значения от 1 до 7 условных единиц. По умолчанию равен трем. Чем выше значение, тем, соответственно, больше размер шрифта. Это абсолютные значения. Есть еще относительные (от -6 до +6), позволяющие увеличить(+) или уменьшить(—) размер шрифта по сравнению с основным. Изменение размера в этом случае происходит на указанное количество единиц.
color — параметр, позволяющий поменять цвет текста, заключенного в контейнер.
face — параметр, позволяющий поменять гарнитуру текста, заключенного в контейнер.
Например, можно задать гарнитуру Arial или Times New Roman, а также любые другие шрифты, установленные на компьютер пользователя. Именно здесь зарыта собака, не позволяющая выбирать вебмастеру любой шрифт, который взбредет ему в голову. Дело в том, что есть очень малораспространенные шрифты, которые могут отсутствовать на компьютере посетителя сайта. В этом случае заданный шрифт будет заменен на ближайший из списка имеющихся на компьютере шрифтов. Причем, во многих случаях это может привести к нарушению целостного, гармоничного облика страницы. Во избежание таких ситуаций, не выбирайте экзотических шрифтов, используя вместо этого только самые распространенные. Вот они:
- Arial
- Times New Roman
- Verdana
- Courier
- Helvetica
- Georgia
- Sans-serif
Последнее в списке — даже не шрифт, а целое семейство шрифтов без засечек. Шрифтов наподобие Arial, Verdana и Helvetica. Если задать это семейство — браузер посетителя выберет с его компьютера первый попавшийся в списке шрифт без засечек. Т.е. сначала он попробует найти Arial, а если не получится, будет искать следующий шрифт без засечек.
А теперь небольшой пример по тегу <font>:
<font face=»Arial» size=»7″ color=»#ff0000″>Самый большой шрифт</font>
Загрузите этот код в браузер — в контейнер тега <body>, и посмотрите, что у вас получится. Это самый большой шрифт для html (size=«7») типа «Arial» (face=«Arial») красного цвета (color=«#ff0000»).
Еще один пример. Скажем, вам нужен курсивный текст размером в 4 условные единицы, c гарнитурой Times New Roman, зеленого цвета. Первым делом создадим такой шрифт без курсива:
<font size=»4″ color=»green» face=»Times New Roman»>Шрифт-четверка, зеленого цвета, Times New Roman</font>
Теперь добавляем к шрифту курсивности, заключив полученный код в контейнер тега <i>:
<i><font size=»4″ color=»green» face=»Times New Roman»>Шрифт-четверка, зеленого цвета, Times New Roman</font></i>
Можно было сделать и наоборот: сначала создать курсивность текста, а затем получившийся код заключить в контейнер тега <font> с нужными свойствами. В данном случае порядок, в котором контейнеры вкладываются друг в друга не играет никакой роли.
Поймать пирата
В 2009 году The Font Bureau, одна из лидирующих словолитен в США, засудила NBC Universal за провал в обеспечении безопасности их фирменных шрифтов. Тех шрифтов, которые этот медиа-гигант использовал для продвижения программ The Tonight Show и Saturday Night Live.
По данным общества публикующихся дизайнеров Font Bureau утверждало, что NBC заплатили только за одну лицензию, которая позволяла компании устанавливать начертание только на один компьютер и давала право на использование только ограниченного числа шрифтов. «Но NBC пошли дальше и установили начертания на несколько других компьютеров в офисе компании и начали пользоваться несколькими другими шрифтами, на которые они лицензию не приобретали», — сообщает SPD.
Это было большое дело. Font Bureau требовало «не менее, чем $2 миллиона» в качестве возмещения ущерба. Бюро утверждало, что неправомочное использование шрифтов компанией NBC «нанесло ущерб отношениям Font Bureau с настоящими и потенциальными покупателями» и возможно, «ввело в замешательство и заблуждение все компании под товарным знаком Font Bureau». Это усложнило все брокерские лицензионные сделки с другими компаниями. Дело было урегулировано вне зала суда, как и большинство подобных случаев.
Похожий сценарий получился в 2012 году, когда дизайнеры, работавшие над сайтом кампании кандидата в президенты Рика Санториума, якобы использовали начертание под названием Fedra, не заплатив за него. Питер Бильяк, основатель голландской словолитни Typotheque и создатель Fedra, обвинил Raise Digital в использовании «пиратской версии» фирменного шрифта на сайте Santorum. Они не только «чуть-чуть» видоизменили его, Бильяк сказал, что у фирмы не было лицензии на использование Fedra на их сайте. Бильяк нанял юриста по вопросам интеллектуальной собственности, Френка Мартинеза, который утверждал, что Raise Digital должна Typotheque $2 миллиона в виде компенсации.
В конечном счёте сайт закрыли, юристы сошлись на соглашении «нет результата — нет оплаты». Raise Digital также оплатили некоторые расходы на юристов. «Но всё это мелочёвка», — говорит Бильяк.