Шрифты для сайта в CSS

Вас интересуют web шрифты? Вы в нужном месте! Вы узнаете, какие шрифты применяются в интернете, и как они оформляются свойствами CSS, а так же, что такое кроссбраузерность и сервисы шрифтов.

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

Наверное поэтому, обычно мы видим на веб страницах лишь несколько образцов шрифта и вот почему.

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

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

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

И если какой либо браузер или операционная система его не поймут, то в 99% случаев, они покажут шрифт из того же семейства, что не особо испортит дизайн страницы.

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

Ими был создан сервис, или библиотека, «Google Fonts», который изменил ситуацию в лучшую сторону, но о нём в конце статьи.

Там же покажу ещё несколько аналогичных сервисов, с которых можно будет так-же скачать шрифты и установить их на свой сайт.

А пока я представлю список тех шрифтов, которые входят в наиболее распространённые ОС, а значит в большинстве случаев отобразятся так как положено.

1. Семейство sans-serif — шрифты без засечек, с прямыми чётко прописанными контурами.

а) Arial Шрифты для сайта
б) Arial Black Шрифты для сайта
в) Tahoma Шрифты для сайта
г) Verdana Шрифты для сайта
д) Lucida Sans Unicode Шрифты для сайта
е) Trebuchet MS Шрифты для сайта
ж) MS Sans Serif Шрифты для сайта
з) Impact Шрифты для сайта
е) Century Gothic Шрифты для сайта

2. Семейство serif — шрифты с засечками.

а) Times New Roman Шрифты для сайта
б) Georgia Шрифты для сайта
в) Palatino Linotype Шрифты для сайта
г) MS Serif Шрифты для сайта
д) Sylfaen Шрифты для сайта
е) Garamond Шрифты для сайта
ж) Century Шрифты для сайта

3. Семейство monospace — моноширинные шрифты.

а) Courier New Шрифты для сайта
б) Lucida Console Шрифты для сайта
в) Consolas Шрифты для сайта
г) Courier New Шрифты для сайта

4. Семейство cursive.

а) Сomic Sans MS Шрифты для сайта
б) Monotype Corsiva Шрифты для сайта
в) Mistral Шрифты для сайта

CSS для шрифтов

Полный список свойств и значений css для шрифтов и текста, можно посмотреть в шпаргалках, а здесь рассмотрим основные.

Сначала посмотрим, как задаются шрифты в таблицах стилей.

Выбираем элемент контента, для которого задаётся шрифт, это может быть тег <body>, если мы захотим задать шрифт для всей страницы, могут быть теги <h>, или <p>, если шрифты будут задаваться для заголовков или абзацев.

Задаются шрифты при помощи свойства CSS font-family, а в значении указывается название шрифта.

Задать шрифт и его оформление можно как в файле style.css, так и непосредственно в теге элемента.

В файле style.css задаётся общий шрифт для всех страниц сайта, а в теге, для выделения небольших участков контента.


В style.css
p{
  font-family: "Monotype Corsiva" Cursive;
В теге
<p style="font-family: "Monotype Corsiva" Cursive;">Текст</p>
}

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

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

И ещё одно правило. Если название шрифта состоит из нескольких слов, то при написании в стиле, его нужно заключать в кавычки, если слово одно –  без кавычек.

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

Размер и цвет шрифта

Рассмотрим, как в CSS задаётся размер и цвет шрифта. Размер шрифта задаётся в пикселях (px), реже в процентах (%), и совсем редко в единицах(em) и пунктах (pt).

Базовый размер шрифта составляет: 16px, 100%, 1em, 12pt. Значит, если нам потребуется увеличить, или уменьшить шрифт, мы будем двигаться от этих данных в сторону увеличения, или уменьшения.

Свойство для задания размера шрифта называется font-size, и давайте установим его для всех абзацев, допустим, в 18px.


p{
  font-size: 18px;
}

Так же можно задать это свойство заголовку h1, в том случае, если размер заголовка нужно ещё увеличить


h1{
  font-size: 50px;
}

Цвет шрифта задаётся свойством color


p{
  color: #cc7722;
}

Можно так же задать размер и цвет какому либо слову или предложению расположенному внутри абзаца, используя тег <span> и атрибут style

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
p{
  color: #cc2152;
  font-size: 18px;
}
h1{
  color: #22cc21;
  font-size: 50px;
}
</style>
</head>
<body>
  <h1>Заголовок</h1>
    <p>Текст абзаца</p>
    <p>Текст <span style="color:#5f21cc; font-size:30px;">Text</span> абзаца</p>

</body>
</html>

Тег <span> вводит в html код встроенные стили. Чуть ниже рассмотрим, как то же самое делается при помощи классов.

Теперь посмотрим, как отобразит этот код браузер.

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

Главное их знать, чтоб в дальнейшем, если придётся работать с каким либо кодом, иметь представление, что за значение указано в свойстве font-size.

Жирный и курсивный шрифт

Толщина шрифта задаётся свойством font-wieght, которое принимает следующие значения:

1. normal    — нормальный;
2. bold    — полужирный;
3. bolder    — жирнее родителя;
4. lighter    — тоньше родителя;
5. от 100 до 900    — цифровое значение, не обладает кроссбраузерностью;


p{
  font-weight: bold;
}

Курсив задаётся свойством font-style, принимающим значение – italic.


p{
  font-style: italic;
}

Чтобы иметь возможность выделять жирным или курсивом различные участки текста, нужно создать  селекторы классов c этими свойствами, и при помощи тега  <span> вставлять их в нужные места.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.nev{
  font-weight: bold;
}
.mix{
  font-style: italic;
}
</style>
</head>
<body>
  <p>Текст абзаца <span class="mix">Текст абзаца</span> Текст абзаца</p>
    <p>Текст абзаца <span class="nev">Текст абзаца</span> Текст абзаца</p>

</body>
</html>

Посмотрим результат.

Результат применения свойств CSS - font-weight: bold; и  font-style: italic;

Растянутый и сжатый шрифт

У шрифта можно изменить расстояние между символами и словами.

Для изменения расстояния между символами применяется свойство css letter-spacing


<p>Заголовок</p>
<style>
p{
letter-spacing: 10px;
}
</style>

Результат:

Заголовок

Для изменения расстояния между словами применяется свойство word-spacing


<p>Большой заголовок</p>
<style>
p{
word-spacing: 20px;
}
</style>

Результат:

Большой заголовок

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

Дополнительные шрифты

А теперь, как и было обещано, познакомимся, и научимся пользоваться сервисом Google Fonts

Представляю скриншот Главной страницы сервиса.

Правда интерфейсы популярных сервисов постоянно обновляются, но только в сторону улучшения и упрощения.

Сервис Google Fonts

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

Сервис Google Fonts

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

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

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

Внизу появится чёрная полоса Family Selected. Щёлкаем по ней — открывается окно с кодом.

Сервис Google Fonts

По умолчанию открывается вкладка STANDART в которой дан код для внедрения через файл head вашего сайта. Например:


<link href="https://fonts.googleapis.com/css?family=Literata&display=swap" rel="stylesheet">

Копируете его и вставляете в файл head, туда, где у вас прописаны все теги <linc>

Если с этой вкладки перейти на вкладку @IMPORT, то вы получите код для файла style.css вашего сайта. Например:


@import url('https://fonts.googleapis.com/css?family=Literata&display=swap');

Этот код вставляется в самое начало файла style.css, перед самым первым селектором.

Только @import работает дольше чем link, что увеличивает время загрузки страницы.

Выбирайте предпочтительный вариант, хотя какого либо предпочтения я не заметил. Оба варианта отлично работают.

Теперь вам остаётся только оформить нужный элемент указанием шрифта так, как я уже показывал выше. Но, на всякий случай, ещё раз


В файле style.css
p{
  font-family: "Literata" serif;
В теге
<p style="font-family: 'Literata' Serif;">Текст</p>

Всё, шрифт,как говориться, внедрён.

Можно посмотреть, как он отображается, хотя особо переживать по этому поводу не стоит.

Сервис выложит шрифт на сайт именно в том виде, и с тем эффектом, который Вы выбрали. На всех компьютерах, которые откроют Вашу страницу.

А теперь посмотрим, как внедряется шрифт из библиотеки Google Fonts, на сайт управляющийся CMS WordPress.

Сделать это можно прямо из панели управления (одно из неоспоримых достоинств этой CMS).

Заходим в Панель управления > Внешний вид > Редактор, и находим в php-файлах темы, файл с тегом head.

В теме TwentyTen — это файл header.php. В коде этого файла, после тега </title> обычно расположен блок с подключающими тегами <link>

Вот в этом блоке и нужно вставить код, из вкладки STANDART.

Если же внедрять через файл стилей, то берём код из вкладки @IMPORT и вставляем в самое начало файла style.css

Обновляем файл — шрифт внедрён, и в дальнейшем на Ваше усмотрение.

Если Вы хотите, чтобы все определённые заголовки Вашего сайта, отображались данным шрифтом, то нужно в файле style.css, в том же редакторе, найти селектор заголовков, допустим h1{}, и вставить в него название и семейство шрифта.

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


<span style="font-family:Lobster, cursive; Font-size:30px;">Примерно так</span>

Результат:

77

Если же Вам захочется целую отдельную статью отобразить таким шрифтом, то нет проблем — заключайте всю статью в этот span или лучше div, и вся статья будет отображена этим шрифтом.

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

fontstorage.com — Большая библиотека шрифтов на многих языках.

www.xfont.ru — Самая большая библиотека русскоязычных шрифтов.

Подробнее, как поменять шрифты в шаблоне WordPress TwentyTen, можно посмотреть в статье Редактируем тему оформления

Желаю творческих успехов.

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

Неужели не осталось вопросов? Спросить


Перемена

Петя всего-навсего сказал «Привет!», а Люся мысленно сыграла свадьбу и родила троих детей.

Селекторы CSS. < < < В раздел > > > Выравнивание и красная строка в CSS

 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

21 комментарий на «Шрифты для сайта в CSS»

  1. stariс говорит:

    Вопрос конечно интересный, но ответа на него у меня нет.

    Я всегда выбирал более простой путь. Брал нужный шрифт, делал заголовок картинкой с прозрачным фоном и всё. Все проблемы с кроссбраузерностью побоку.

    Между прочим, хорошо оптимизированная картинка грузится быстрее чем шрифт с Google Fonts

  2. Anton говорит:

    По поводу шрифтов возник вот такой вопрос:
    можно ли к своему сайту прикрутить шрифты, которых по умолчанию нет ни в виндах, ни в других системах, но чтобы они отображались на любом устройстве? Т.е., допустим мой сайт содержит папку Fonts, в которой лежит файл шрифта Lobster.ttf. В заголовке html-страниц прописываем что-то типа этого:

    и даже если у посетителя моего сайта не установлен в системе шрифт Lobster.ttf, он всё равно будет видеть «лобстерный» текст. :)))

    Я написал выше «что-то типа этого» потому что в таком виде код не работает. Т.е. не совсем понятно, каким образом следует модифицировать атрибут href, чтобы всё заработало (если это вообще возможно).

    С уважением, Антон.

  3. stariс говорит:

    Спасибо, исправил

  4. Александр говорит:

    Спасибо за хорошую подробную статью. Исправьте ошибку в тексте: «Шрифтов в интернете огромное количество, и все они объединённых в несколько семейств.»
    Слово объединённых заменить на объединены.

  5. stariс говорит:

    Спасибо! Исправил. Первый человек за три года наконец-то заметил.

  6. Eleonora Lyonesse говорит:

    Доброго времени суток!!!
    Исправьте, пожалуйста, ошибку! (Я всё понимаю, но глаза режет=) )

    // 3. Семейство monospage — моноширинные шрифты. //

    monospaCe ;

    Спасибо!)

  7. stariс говорит:

    Посоветовать я едва-ли смогу, а вот как подобрать — поробую подсказать.

    Идём в гугл с «чайным запросом» ищем-ищем, когда подвернётся что-то подходящее вызываем веб-инспектор (F12) и узнаём название шрифта. Снова идём в гугл, уже с названием шрифта и узнаём откуда его можно взять.

  8. Алина говорит:

    Здравствуйте, посоветуйте шрифт для чайного сайта, пожалуйста

  9. Kupit-ochki говорит:

    Какой шрифт посоветуете, ребята. Сайт посвящен оптическим очкам https://kupit-ochki.com.ua, поэтому должен быть крупным и читабельным, но в то же время красивым и приятным

  10. stariс говорит:

    Это не ошибка. Можно или кавычки или апострофы.

  11. павел говорит:

    вот тут ошибка:

    p{
    font-family: "Monotype Corsiva" Cursive;
    }

    Нужно

    p{
    font-family: ‘Monotype Corsiva’, cursive;
    }

  12. stariс говорит:

    Жаль вариантов маловато. Побольше бы.

  13. Борис говорит:

    Спасибо за GoogleFonts. Реально крутая вещь. Теперь можно вообще не заморачиваться насчет шрифтов и семейств! Задавай размер и цвет и радуйся жизни))

  14. Борис говорит:

    Сорри, не докрутил не много)) все нормально.

  15. Борис говорит:

    В статье «Размер и цвет шрифта» пропущен закрывающий тег после . И спасибо за статью.

  16. укпер говорит:

    Статья реально помогла, сенкью вери мач))

  17. Progress-project говорит:

    Спасибо большое, статья очень помогла!

  18. Ольга говорит:

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

  19. Виктория говорит:

    хорошая статья, спасибо таким авторам, которые так умело пишут инструкции

  20. stariс говорит:

    Заглядывай. Тут ещё полно интересного.

  21. парень говорит:

    Спасибо тебе, друг! Избавили меня от посещения непонятных сайтов, с их непонятными манами по подключению шрифтов. Спасибо за чёткую, краткую и понятную инструкцию.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *