«Создание сайтов»: 7 : УРОВЕНЬ 3 : ШРИФТЫ ДЛЯ САЙТА - где взять и как подключить?

От Музея: сегодня мы рассмотрим на нашем учебном примере практику подключения к сайту лицензионных шрифтов и научимся создавать стили текстов. (Кстати, лицензионные — не обязательно означает «платные»!)

Содержание лекции 7 «ШРИФТЫ ДЛЯ САЙТА — где взять и как подключить?»: коллекции шрифтов TypeType, папка fonts, тег style, директива @font-face.

Лекция: Аня Амасова

Вступление

Разумеется, создавая сайт вы сразу видите информацию, она как-то отображается — системными шрифтами.

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

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

Поэтому в 7 лекции (и мы переходим на уровень 3 в изучении создания сайтов!) мы поговорим и о том, как найти шрифты, как разместить на сайте и подключить к странице, как вообще все это получается?!

1. Где взять шрифты?

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

В нашей практической работе мы обращаемся на сайт питерской шрифтовой студии TypeType, в раздел Freefonts, где представлена коллекция бесплатных шрифтов: более 50 шрифтов, созданных одним из основателей компании и ее техническим директором Иваном Гладких и размещенная как раз для таких случаев.

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

Впрочем, если какие-то средства все же есть, не стоит забывать и про возможность воспользоваться платными шрифтами — в том же ТайпТайп больше 1000 гарнитур, а также можно заказать разработку индивидуального шрифта на заказ.  Обратите внимание на «триальные шрифты» самой студии TypeType — те, чьи названия начинаются с TT: их, конечно, нельзя без покупки использовать в готовых проектах, но вполне возможно скачать и использовать для экспериментов и примерки!

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

Рис 1. Проверка наличия и внешнего вида кириллицы
 на сайте ТайпТайп 

Рис 2 и 3. Проверка отображения текста с вашего сайта 
выбранным шрифтом

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

2. Как вставить на сайт шрифты и подключить их к странице?

Этот процесс похож на то, как мы подключали изображения в прошлой, шестой, лекции о ссылках : выложенные на сервер изображения мы подключаем с помощью относительной ссылки в виде разметки html, и они начинают отражаться на странице. Примерно то же происходит со шрифтами.

Поэтому первое, что нам надо сделать, — это выложить выбранные шрифты на сервер, в папку нашего сайта. Создаем новую папку, допустим, с названием «fonts» и загружаем в нее выбранные шрифты (и лицензию!):

Рис. 4. Создаем новую папку для шрифтов

Рис. 5. Загружаем в нее шрифты и лицензию

________ В С Т А В К А - О Т С Т У П Л Е Н И Е_____________

«А разве для веб применяются шрифты .otf, а не .ttf?» — спросит внимательный читатель.

Тема web-шрифтов и совместимости с операционных системами, браузерами, «виндоусами» и «маками» довольно сложная, чтобы объяснить ее в паре абзацев. Для лучшего ее понимания рекомендую почитать вот эту статью на хабре: «20 вопросов про веб-шрифты».

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

Мои более продвинутые коллеги осведомлены о проблемах (возникающих исключительно на «виндоус») для расширения .otf, если у шрифта автоматический хинтинг. Так что интересуйтесь этим вопросом. Но если у .otf ручной хинтинг, то совершенно без разницы, будете ли вы использовать для сайта шрифты .otf или .ttf.

________ К О Н Е Ц   В С Т А В К И_____________

А теперь делаем то, что немножко сложнее, — берем нашу первую страницу index (или любую другую, где есть максимальное разнообразие разных по стилю текстов) и:

а) подключаем шрифты,
б) создаем нужные нам СТИЛИ ТЕКСТОВ.
Это два разных действия, тесно связанных одно с другим, потому что одно без другого — не работает.

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

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

А вот чтобы при загрузке сайта браузер брал тот шрифт, который мы положили в папку, а не абы где его искал и заменял на первое попавшееся, мы используем директиву (то есть создаваемое нами «правило»)  @font-face.

Ниже вы обратите внимание, что создание правил несколько отличается синтаксисом и пунктуацией от обычной html-записи, так как они входят в CSS — подраздел HTML, отличающийся от привычной нам записи так, как в русском языке отличаются синтаксисом и пунктуацией, например, сценарии от художественной прозы. Слишком подробно на CSS останавливаться с разъяснениями не буду, так как он очень логичный и выводы о принципах записи по примерам вы вполне сможете сделать сами.

И стиль, и правила записываются, разумеется, в мозг! А значит, мы должны разместить все это в голове нашей странички, между открывающим и закрывающим тегами head.

Открываем тег style и заводим правило для шрифта с помощью директивы @font-face, где указываем название подключаемого шрифта, а также относительный путь к файлу с этим шрифтом:

Рис. 6. Запись,
позволяющая подключить шрифт

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

Рис. 7. Запись, 
позволяющая подключить несколько шрифтов

Ну хорошо, теперь шрифты подключены (хотя этого еще и не видно)... Но как же теперь сделать так, чтобы абзацы обычного текста были одним шрифтом, заголовки — другим, ссылки-переходы на другие страницы — третьим и т.д.?..

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

Как вы помните из лекции 4 - «Создание сайтов»: 4 : УРОВЕНЬ 2 : ТЕКСТ и панель его инструментов:
- обычный текст у нас являеется параграфом и может быть отмечен тегом p;
- также у нас существуют заголовки, размеченные тегом h, - это заголовки уровней 1, 2, 3, 4, 5, 6 (от большего к меньшему).
(Это не весь возможный список, но в рамках нашего курса «основ» этого набора достаточно.)

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

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

Рис. 8. Создаем стиль (выбор шрифта)
для тега h5

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

Рис. 9. HTML-разметка подписей

ВНИМАНИЕ — обратите внимание на программные коды, которые вам точно понадобятся:
амперсант #169 точка с запятой — код для знака копирайта
амперсант nbsp точка с запятой — код неразрывного фиксированного пробела

И результат на странице:

Рис. 10. Результат создания стиля и разметки

И такую запись мы делаем подряд для всех стилей абзацев:

Рис. 11. Создаем стили (выбор шрифта)
для разных блоков текста

И вот только после всего этого мы наконец-то закрываем тег style!

Проверяем, что произошло:

Рис 12. Было (автомат)

Рис 13. Стало (подключено и задано)

Хм... А заголовочный шрифт Molot? А отражается ли на мобильном телефоне?..

Рис 14. Было (автомат)

Рис 15. Стало (подключено и задано)

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

Любознательные поинтересуются: а почему к строке «установка...» не применился никакой стиль?.. Догадаетесь? Ответ: в теле документа к этой записи нет никакой разметки, включая разметки знаком параграфа p! 

Ну и раз уж мы начали на третьем уровне задавать стили, то следующий логичный вопрос: раз мы можем задать единый стиль к абзацу, то наверняка мы еще можем задавать стили к оформлению? К чему еще в голове прописываются стили, сокращающие работу по описанию вручную каждого отдельного элемента в теле документа? Об этом мы поговорим на следующей лекции!.. 

Следующая лекция СТИЛИ (в разработке) >>>>

[август, 2024]