Уроки CSS для новичков - Свойства шрифтов - урок 4


High Star

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




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

Листинг 7. Добавляем шрифты

<HTML>
  <HEAD>
    <TITLE>Реклама сайта</TITLE>
    <STYLE TYPE="text/css">
     H2{
        font-family:Garamond, "Times New Roman", Bodony, serif;
        font-size:x-large;
        font-style:normal;
        font-weight:bold;
        font-variant:small-caps
       }
     H4{
        font-family:Arial, Verdana, Helvetica, sans-serif;
        font-size:30px;
        font-style:italic;
        font-weight:600;
        font-variant:normal
       }
    </STYLE>
  </HEAD>
  <BODY>
    <H2>Дикая Правда</H2>
    <H4>на "www.dikarka.ru"</H4>
  </BODY>
</HTML>

Честно говоря, это не совсем хорошая запись, в CSS можно спокойно сделать и сокращенную запись, например такую:

Листинг 8.

<HTML>
  <HEAD>
    <TITLE>Реклама сайта</TITLE>
    <STYLE TYPE="text/css">
      H2{font: bold x-large normal small-caps Garamond, "Times New Roman", Bodony, serif }
      H4{font: italic 600 30px Arial, Verdana, Helvetica, sans-serif }
    </STYLE>
  </HEAD>
  <BODY>
    <H2>Дикая Правда</H2>
    <H4>на "www.dikarka.ru"</H4>
  </BODY>
</HTML>

В обоих случая результат будет одинаков:


Рис. 1.6. Со шрифтами лучше!

Как видим, к свойствам шрифта font можно отнести 5 пунктов:

Вот и рассмотрим подробно каждый этот пунктик.

Font-family

Вы даже себе не можете представить, сколько всего шрифтов существует в мире! Тысячи и тысячи! Я вообще не представляю, как можно одно и то же слово написать столькими способами! И я не знаю, хорошо это или плохо. С одной стороны, был бы один шрифт, не ломали бы мы с вами голову над новым уроком, но с другой стороны.. какой простор для фантазии! Сиди и перебирай один шрифт за другим до тех пор, пока глаза не лопнут. Хотя особо и не обольщайтесь... все равно на компьютере вашего пользователя загружено едва ли десяток самых распространенных шрифтов, и ему вообще начхать на все ваши поиски и происки.

К нашему с вами счастью все шрифты решили разделить на пять семейств: семейство с засечками serif, семейство без засечек sans-serif, семейстов шрифтов с буквами одинаковой ширины monospace, семейство рукописных шрифтов cursive и, последнее семейство вычурных шрифтов, которые вообще редко у кого есть fantasy

Семейство serif

Одни шрифты - с засечками и называются они семейством serif.

Из латинских шрифтов к этому семейству относятся такие шрифты, как Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit.

Из кирилицы можно выделить шрифты Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst. Есть еще и другие - и арабские, и японские и еврейские..., но я сомневаюсь, что все они установлены на ваших компьютерах, дай бог, чтобы треть вышеперечисленных были под рукой...

Хотя... чего там выделываться и строить из себя слишком умную... Пользуйтесь шрифтами Times New Roman, Bodoni, Garamond и не ломайте себе и другим головы! Поэтому напишем просто:

Листинг 9.

<HTML>
  <HEAD>
    <TITLE>Семейство "serif"</TITLE>
    <STYLE TYPE="text/css">
      P{font-family:serif}
    </STYLE>
  </HEAD>
<BODY>
    <P>
      "ДИКАЯ ПРАВДА" на www.dikarka.ru
    </P>
  </BODY>
</HTML>

И в окне браузера это будет выглядеть так:

"ДИКАЯ ПРАВДА" на www.dikarka.ru

А можем написать и так:

Листинг 10.

<HTML>
  <HEAD>
    <TITLE>Семейство "serif"</TITLE>
    <STYLE TYPE="text/css">
      P{font-family:Garamond}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      "ДИКАЯ ПРАВДА" на www.dikarka.ru
    </P>
  </BODY>
</HTML>

И результат будет немного другой, но шрифт все равно с засечками!!!

"ДИКАЯ ПРАВДА" на www.dikarka.ru

Ну, и напишем еще вот так:

Листинг 11.

<HTML>
  <HEAD>
    <TITLE>Семейство "serif"</TITLE>
    <STYLE TYPE="text/css">
      P{font-family:Garamond, "Times New Roman", Bodony, serif}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      "ДИКАЯ ПРАВДА" на www.dikarka.ru
    </P>
  </BODY>
</HTML>

"ДИКАЯ ПРАВДА" на www.dikarka.ru

И такая вот запись:

{font-family:Garamond, "Times New Roman", Bodony, serif}

для браузера будет означать - "Эта... как иво... напиши-ка мне все шрифтом Garamond, а если его нету, то хоть Times New Roman аль Bodony, а если и их нету, то хоть што-нибудь, но только с засечками плиииииииииииииииииз!!!"

И будьте уверены, браузер внемлет этим воплям и в лепешку разобьется, но найдет вам ваши засечки!

Прошу обратить внимание что "Times New Roman" я поставила в кавычки - это не потому что он такой вот особенный, а просто... если название больше одного слова - то кавычки нужны. Правило такое есть. А если слово всего одно, то кавычки необязательны. Но если вас так распирает на кавычки - ставьте. Все равно это никто не заметит. Возни только больше.

И еще... само обозначение семейства ставьте в конец строчки!

Семейство "sans-serif"

Теперь пойдем в другой лагерь и познакомимся с семейством sans-serif. Это ребята простые как правда. Нет в них никаких таких засечек. Кстати, sans - как раз и означает "без". Без засечек. Про эти шрифты говорят, что они рубленые. К этому семейству относятся такие латинские шрифты как Arial, Verdana, Helvetica, Tahoma, Futura. Вставим же в следующем примере строчку font-family:sans-serif:

Листинг 12.

<HTML>
  <HEAD>
    <TITLE>Семейство "sans-serif"</TITLE>
    <STYLE TYPE="text/css">
    P{font-family:sans-serif}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      "ДИКАЯ ПРАВДА" на www.dikarka.ru
    </P>
  </BODY>
</HTML>

И сразу же увидим результат - шрифт без засечек:

"ДИКАЯ ПРАВДА" на www.dikarka.ru

И моя правда стала тоже простой, без всяких изысков. Так сказать Правда и только Правда.

Семейство cursive

Примером этого семейства может служить шрифт Caflish Script, Zapf-Chancery.

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

Семейство monospace

К этому семейству можно отнести шрифт Courier New, Prestige, Everson Mono. К достоинством этого шрифта можно отнести то, что все буковки по ширине одинаковы. Читать такой текст, конечно, не очень удобно. Но если в тексте важна каждая буковка, скажем, как в моих описаниях кодов, тогда этот шрифт как нельзя более кстати.

Листинг 13.

<HTML>
  <HEAD>
    <TITLE>Семейство "monospace"</TITLE>
    <STYLE TYPE="text/css">
    P{font-family: "Courier New", monospace}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      "ДИКАЯ ПРАВДА" на www.dikarka.ru
    </P>
  </BODY>
</HTML>

Ну, и посмотрим, что же получилось:

"ДИКАЯ ПРАВДА" на www.dikarka.ru

Семейство fantasy

К этому семейству можно отнести шрифт Alpha Geometrique, Western.

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

Font-size

Ну, с этим дело пойдет веселее, и выбор тут тоже довольно богатый! И задать размеры можно несколькими способами! Во-первых, можно с помощью ключевых слов: xx-small; x-small; small; medium; large; x-large и xx-large. Наверняка, вы и сами догадались, что xx-small - самый мелкий шрифт, а xx-large - самый крупный.

Но и это не все! Шрифт можно задавать и в пунктах (pt), и в пикселях (px), и в дюймах (in), и в миллиметрах (mm), сантиметрах (cm), пиках (pc) и просто в процентах (%)!

Но и это не все! С помощью слов smaller или larger можно уменьшить или увеличить отдельные слова по сравнению с основным, родительским текстом.

Font-style

Это свойство еще легче. Оно отвечает за стиль шрифта, и указывает каким ему быть - прямым normal, наклонным oblique или курсивным italic. Если вы думаете, что наклонный и курсивный - это одно и то же, то глубоко заблуждаетесь! Курсив имитирует письмо, написанное "от руки", а наклонный... это просто слегка завалившийся вправо текст.

Font-weight

Это свойство определяет толщину шрифта, или правильней, насыщенность начертания. Тут можно и поэкспериментировать. Можно написать просто:

Листинг 14.

<HTML>
  <HEAD>
    <TITLE>Полужирный шрифт</TITLE>
    <STYLE TYPE="text/css">
      P{font-weight:bold}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      "ДИКАЯ ПРАВДА" на www.dikarka.ru
    </P>
  </BODY>
</HTML>

И у нас получится толстенькая такая надпись:

"ДИКАЯ ПРАВДА" на www.dikarka.ru

Вы, наверное, удивитесь - ну и зачем было городить огород, когда можно было бы и безо всяких стилей просто написать:

<b>"ДИКАЯ ПРАВДА" на www.dikarka.ru</b>

И результат был бы такой же, разве что код раз в пять короче... И, знаете, я с вами соглашусь. Но не совсем. Потому как кроме bold можно написать и bolder (толще) и lighter (тоньше) и это не предел!!! Можно указать насыщенность не только словами, но и числами от 100 до 900!. Правда не все числа можно использовать, а только кратные 100. А число 400 равно bold. Так что в вышеприведенном примере я могла запросто написать:

P {font-weight:400}

И результат был точно такой же. Поэкспериментируйте, посмотрите, может понравится!

Font-variant

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

Листинг 15.

<HTML>
  <HEAD>
    <TITLE>Хоть и маленькие, но прописные!!!</TITLE>
    <STYLE TYPE="text/css">
      P{font-variant:small-caps}
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      "ДИКАЯ ПРАВДА" на www.dikarka.ru
    </P>
  </BODY>
</HTML>

И вот он - результат! Все буквы стали заглавными, любуйтесь

"ДИКАЯ ПРАВДА" на www.dikarka.ru

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

В конце концов, решила не запудривать вам мозги и написать все коротко. На сколько это удалось, судить вам. Ну, а на последок, все-таки дам вам несколько советов. Хотя, не столько советов, сколько раздумий. Прислушиваться к ним или нет - ваше дело. В конце концов - решающее слово за вами. Итак...

Дикие советы