Работаем над текстом и шрифтами в CSS. Свойства шрифтов

В этом видеоуроке мы рассмотрим много важных моментов в работе над текстом:

  • Как правильно прописывать полную и сокращенную запись шрифтов в CSS.
  • Как задать тексту шрифты и размеры шрифта с помощью CSS.
  • Как назначить тексту стиль шрифта.
  • Как прописать толщину шрифта (вес шрифта) в CSS.
  • Как задать тексту отступы, выравнивание, декорацию, трансформирование и другое.

Скачать материалы:
Скачать 5-ый видеоурок по CSS Размер: 10.96 MB, скачали: 604 раз.
Скачать исходники к 5 видеоуроку по CSS Размер: 28.68 kB, скачали: 549 раз.
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

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

Сокращенная и полная записи CSS стилей

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

body { background: #33CCFF url(img/bg.jpg) repeat fixed;}

Однако, мы могли разделить свойство background на background-color, background-position и другие свойства полной записи.

body {
 background-color: #33CCFF;
 background-repeat: repeat;
 ............................................
 }
 

Почему мы будем делать это так? Потому что здесь, при записи в сокращенном виде нужно будет соблюдать особый порядок. Если мы например, зададим шрифты раньше, чем стиль шрифта, то эти стили (шрифты и стиль шрифтов) могут у нас не сработать. Поэтому я буду разбирать все в полном виде, а потом мы все это запишем в сокращенном. Так будет яснее.

Работаем над текстом и шрифтами в CSS. Свойства шрифтов.

Давайте приступим, я открываю документ index.html и style.css в программе Notepad++ и ввожу тег H3 в последнем.
Сейчас прописываем к нему свойство цвета — color, зеленый, например (напоминаю, что цвета можно взять из таблицы цветов). И перед последней закрывающей фигурной скобкой, нажимаю два раза клавишу Enter. Сейчас мы будем разбирать полную запись.

Как прописывается шрифт? Шрифт мы можем прописать с помощью свойства font-family. Начинаем указывать шрифты. Первый шрифт имеет приоритет над вторым, второй над третьим и т.д.
Мы сейчас пропишем шрифт arial, шрифт verdana и шрифт courier. Ставим точку с запятой (;). И в таком случае, шрифт Arial будет браться у нас первым, если же он будет отсутствовать у пользователя, то вторым будет браться Verdana, третьим — Courier. Вряд ли до шрифтов Verdana и Courier дойдет очередь, так как все три шрифта являются стандартными. Скорее всего, все дело остановится на шрифте Arial. Также не рекомендую устанавливать неизвестные шрифты, так как вряд ли они есть у пользователя. Если вам уж очень хочется сделать какой-то небольшой текст на сайте красивым, то желательно используйте для этого изображения.

Итак, вторым свойством у нас будет стиль шрифта — font-style. Принимать он может три значения:

  • normal
  • italic
  • oblique

Введем oblique. Давайте на этом этапе остановимся и сохраним файл style.css.

Теперь добавим заголовок h3 в документ index.html. Ведь мы именно для заголовка h3 и прописывали стили. Выделим текст «Сейчас вы с мотрите данный видеоурок и скорее всего:» и поместим его в заголовок h3. Сохраняем и смотрим, что у нас получилось. Видим два заголовка h3, которые приняли шрифт Arial и стиль oblique, то есть стиль oblique — это небольшой наклон.
Давайте попробуем заменить oblique на italic. Это в простонародье — курсив. По сути, отличий мало. И на данном примере они вовсе не видны, но возможно в некоторых шрифтах эту разницу можно будет заметить.
Normal, как вы наверное уже поняли, — значение font-weight по умолчанию.

Переходим в код, изучаем новые свойства. Нам нужно задать толщину нашего шрифта, толщина шрифта задается с помощью свойства font-weight, которое может принимать 2 текстовых значения: normal и bold. Также свойство font-weight может принимать и числовые значения: от 100 до 900. Укажем 500. Не все браузеры воспринимают числовые значения. Сохраняем. Проверяем в браузере.
Мы видим, что браузер Opera понимает числовые значения и толщина шрифта стала у нас равной 500.
Давайте пропишем вместо числового значения 500 текстовое значение bold. Проверяем. Видим, что толщина шрифта стала у нас более жирной.

Переходим к следующему свойству — font-size — размер текста. Может указываться как в абсолютных, так и в относительных величинах. Лично я пользуюсь двумя относительными величинами: проценты *например 150%* и пиксели *например 30 пикселей*. Очень часто пиксель называют абсолютной величиной, на самом же деле пиксель является относительной величиной, так как она зависит от разрешения установленного на экране и размера монитора, то есть устройства отображения. Однако, следует отметить, что ведет она себя как абсолютная. Но если желаете быть точно уверенными, что ваш текст отображается везде одинаково, то советую использовать вместо пикселей абсолютную величину — пункты (pt). Ее отличие от пикселей в ее написании (pt вместо px) и 1 пункт = 1/72 дюйма.
Так как я использую при работе пиксели, то поставлю значение свойства font-size равное 20px. Сохраняем, смотрим, что у нас получилось. Замечаем, что текст стал у нас больше, чем был раньше.

И сейчас давайте из этих четырех свойств (font-family, font-style, font-weight и font-size) запишем сокращенную форму. В комментариях я указал порядок сокращения формы:

 /* font-style | font-weight | font-size |font-family */ 

Для начала нам нужно прописать свойство font, после чего по порядку вписать все значения имеющихся свойств. У нас это будет выглядеть так:

 font: italic bold 20px arial, verdana, courier; 

Сохраняем. Проверяем в браузере. У нас не произошло никаких изменений. Это означает, что мы правильно прописали сокращенный вид. Однако, это еще не все, на этом разбор оформления текста мы еще не заканчиваем. Сейчас мы будем задавать ему декорацию и трансформирование. Предлагаю для этого взять какой-нибудь класс. Прописываем класс .text-1. Открываем фигурные скобки. Прописываем свойство text-decoration. Это свойство имеет три значения:

  • underline
  • overline
  • line-through

Давайте рассмотрим каждый по отдельности. Вводим underline. Сохраняем файл стилей. Теперь нужно задать класс text-1 какому-нибудь тегу в документе index.html
Зададим этот класс тегу pre. Сохраняем. Проверяем в браузере. Видим, что текст «Я работал на фрилансе» стал подчеркнутым.
Переходим в файл style.css и заменяем слово underline на overline. Сохраняем и проверяем. Теперь у нас текст «Я работал на фрилансе» подчеркнут не снизу, а сверху.
Итак, что же будет, если мы пропишем значение line-through? Давайте попробуем. Видим, что текст «Я работал на фрилансе» стал у нас перечеркнутым. Оставим, как есть.

Переходим к следующему свойству — text-transform. Это свойство используется достаточно редко, но мы его все равно разберем.
Начнем с первого значения, имя которому — capitalize. Добавляем его в текст. Проверим, что у нас произошло на странице index.html. Первая буква каждого слова, которому было присвоено значение capitalize, стала у нас большой.
Давайте создадим класс text-2 и продолжаем изучать свойство text-transform. Вводим свойству text-transform следующее значение — uppercase. Сохраняем файл style.css. Теперь присваиваем класс .text-2 тексту «Вы со мной согласны», а точнее элементу списка — тегу li. Сохраняем и проверяем в браузере: Как мы видим тег li принял класс .text-2, .text-2 принял свойство text-transform, которое имеет значение — uppercase. Благодаря чему, все буквы стали большими, независимо от того, как мы их написали в исходном коде документа index.html.
Сейчас давайте попробуем заменить значение uppercase на lowercase. Проверим, что получилось. А получилось у нас то, что все буквы стали маленькими, также независимо от того, как они написаны в исходном коде документа.
Третье значение, которое может принимать данное свойство — значение none. Текст при нем не изменяется. Это значение является стандартным.

Есть еще одно свойство, которое используется еще реже, чем предыдущее. Называется оно — letter-spacing. Значение указывается в пикселях, процентах и других величинах. Укажем значение, например 5px. Сохраним и проверим, что у нас произошло. Итак, расстояние между буквами стало у нас равное 5 пикселям. Эти свойства можно не запоминать, в любом случае, их можно будет найти в интернете и прочитать про них. Но для общего развития, я их показал.

Теперь будем разбираться с отступами и выравниванием текста. Выравнивание происходит с помощью свойства text-align. Наверняка вы уже догадались, что принимать оно может 4 значения:

  • left
  • right
  • center
  • justify

Укажем значение center. Сохраняем и проверяем. Предложение «Вы со мной согласны» стало у нас по центру. Что ж, с выравниванием мы разобрались. Отступы делаются также легко с помощью свойства text-indent. Укажем значение, например, 30px. Предложение «Я работал на фрилансе» отступает от левого края на 30 пикселей. Давайте поставим вместо 30 пикселей 20 процентов. У нас все работает и отступ от левого края стал равен 20%.

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

Итак, что здесь самое важное? Что нужно запомнить обязательно?
Запомнить нужно свойство font и его запись в сокращенном виде, которую я указал в комментариях в исходном коде, так как это сократит не только время вашей работы в целом, но и исходный код, а следовательно благополучно скажется на скорости загрузки будущего сайта. В качестве домашнего задания, я хочу, чтобы вы каждому заголовку, не только h3, но и h1, h2, h4 задали свой класс, в котором указали шрифт, толщину и размер.

На этом мы заканчиваем, до встречи в следующем видеоуроке, в котором мы изучим не менее интересную тему, а именно — cсылки и псевдоклассы в CSS!

Подпишись на info-line:

Получать новые уроки на e-mail:

13 комментариев на “Работаем над текстом и шрифтами в CSS. Свойства шрифтов”

  1. Надежда 20 января 2012 в 14:27 #

    Олег, если я хочу загрузить свой шрифт для заголовков, как правильно написать код?

    Нашла такой:

    @font-face {
    font-family: 'Decor Italic';
    src: url(fonts/decoritalic.ttf);
    }
    
    #header a h1 { 
    font-family: Decor Italic, Arial;
    

    Не работает, показывает Arial.

    Нельзя написать в css строчку вида

    @import url ('fonts/decoritalic.ttf');

    как мы это делали, присоединяя другие файлы в css?

    • Олег Зубцов 20 января 2012 в 15:41 #

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

      Добавьте шрифт в папку Шрифты, которая находится в Панели управления. Потом укажите название шрифта в свойстве font-family. Но учтите, что если у пользователя, зашедшего на ваш сайт не будет данного шрифта в панели управления, то он увидит следующий по порядку шрифт, в данном случае — Arial.

      • Надежда 23 января 2012 в 14:05 #

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

        В нескольких местах нашла способ (например, htmlbook.ru/css/font-face), но он почему-то у меня не работает.

        • Олег Зубцов 24 января 2012 в 13:59 #

          Хм. Интересное решение, но не кроссбраузерное и работает в CSS3.

          Проверьте во всех браузерах. Если все равно отображается Arial, проверьте правильно ли указали путь к шрифту? Попробуйте указать название шрифта так, чтобы оно совпадало с именем файла. То есть decoritalic (без пробела). Ну и наконец, вы уверены, что этот стиль шрифта является приоритетным? Может быть есть какой-то другой стиль для этого элемента, но с более высоким приоритетом.

  2. Дмитрий 9 июня 2012 в 10:25 #

    Олег, у меня не работает псевдокласс:

    p.link a:Link { color: red; }
    делаю точно как на видео но почему то не работает, и ссылка не посещенная @=

    • Александр€ 9 июня 2012 в 15:39 #

      Просмотри 6-ой видеоурок курса по CSS: Ссылки и псевдоклассы, ну а если всёровно не понятно то пишется так:

      p a:link {color:red;}

    • Олег Зубцов 29 октября 2012 в 8:24 #

      Прошу выслать мне весь код (html и css), чтобы я мог точно сказать, в чем заключается проблема.

  3. Дмитрий 9 июня 2012 в 15:46 #

    Александр, я правильно написал, а если твоим способом как тогда указывать селектор в файле index.html? если его просто нет в файле style.css

  4. Александр€ 9 июня 2012 в 16:07 #

    Также ошибка может быть в том, что в уроке класс называется links, а не link. =)

  5. Константин 19 декабря 2012 в 12:37 #

    Олег, а у меня непонятки с выравниванием. Предложение "Вы со мной согласны " становится по центру — как надо, а вот квадратик перед этим предложением остается на месте. Подскажите, что не так???

    • Олег Зубцов 10 января 2013 в 5:48 #

      Скорее всего, проблема в браузере. По-умолчанию, они отображают по разному данное сочетание тегов, если мы не указываем им точные правила отображения 🙂

      Попробуйте применить к списку следующее свойство:

      list-style-position: inside;

      Его работу, мы разбираем в 8-ом видеоуроке CSS про Списки.

  6. ПичугинЕН 30 августа 2013 в 8:46 #

    Прошу помощи

    во внешней css написал стиль — text-align: НЕ РАБОТАЕТ

    text14 {
    	color:blue;
    	font-size:1.1em;
    	font-family:Georgia,"Times new roman" ,sans-serif;
    	margin:20;
    	text-align:justify;
    }

    но стили эти не для этого сайта, готовлю другой

    text-align: получился только непосредственно на странице в комбинации

    Текст форматирования

    СПАСИБО

    • Олег Зубцов 30 августа 2013 в 17:18 #

      1. В качестве селектора Вы прописали тег «text14». Такой тег существует? Может быть Вы хотели прописать класс или идентификатор?

      2. Присвоили ли Вы данный класс/идентификатор определенному тегу в html-коде?

      3. Рекомендую написать данный стиль в файле typography.

      Я сделал именно так и у меня все работает.

      Правильный код:

      .text14 {
      	color:blue;
      	font-size:1.1em;
      	font-family:Georgia,"Times new roman" ,sans-serif;
      	margin:20;
      	text-align:justify;
      }

      P.S. При оставлении комментариев (с кодом), прошу обрамлять код с помощью кнопок «HTML», «CSS», «JS» или «PHP».

Оставить ответ