Поддержка сайта

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

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

А вашего шрифта у нас нет!

.

Давняя проблема веб-разработки — отображение текста интересными шрифтами, кроме уже набивших всем оскомину Times New Roman, Arial, Verdana и Helvetica. Эти шрифты установлены практически на всех компьютерах, и на них вы можете положиться. Конечно, можно попытаться сделать текст поинтереснее, работая с размерами, толщиной, междустрочным (CSS-свойство line-height) и межбуквенным (letter-spacing) интервалами, но не более.

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

К счастью, сейчас можно встроить шрифты прямо в веб-страницу так же легко, как изображения или ссылку на внешний файл с таблицей стилей. Это возможно благодаря конструкции @font — face в CSS, которая позволяет установить ссылку на файл со шрифтами, задав новое семейство шрифтов с легко запоминающимся именем. Применять это семейство нужно как обычно. Например, у меня есть шрифт под названием monkeyfeatures (мартышкины фишки), который я сделал сам. Я хочу встроить его в свой сайт, для чего дал ему краткое имя mf, чтобы упростить ссылку на него в CSS-файле:

Браузер скачивает файл со шрифтом по указанному адресу. Но как раздобыть этот файл? Есть несколько вариантов:

воспользоваться специальным сервисом шрифтов, например Typekit или Fontdeck;

они платные, но предлагают богатый выбор ресурсов;

создать собственный набор шрифтов, подходящий для Интернета, с помощью Font Squirrel;

использовать один из бесплатных готовых наборов шрифтов в Font Squirrel или в Google Web Fonts.

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

Попробуем использовать сервис Google, чтобы встроить шрифт в наш сайт.

Шрифты Google Web Fonts. Выполните простое задание: примените какой-нибудь шрифт из хранилища Google к заголовкам второго уровня (п2) на сайте. Это очень просто.

1. Зайдите на сайт.

2. Просмотрите страницу и выберите какой-нибудь шрифт. Декоративные шрифты очень привлекательны, но помните, что они должны быть легко читаемы! Например, выберите шрифт Russo One (рис. 9.20).

3. В области этого шрифта нажмите кнопку Add to Collection (Добавить в коллекцию).

Рис. 9.20. Russo One — легко читаемый шрифт из библиотеки Google

4  Теперь на панели внизу нажмите кнопку Review (Просмотр). Вы попадете в окно  предварительного просмотра (рис. 9.21). Если вам нравится то, что вы видите, нажмите кнопку Use (Использовать).

Рис. 9.21. Предварительный просмотр шрифта

5. Затем вы получите две строки HTML-кода: одна позволит встроить шрифт на вашу страницу, а другая объяснит, как применить стиль к заголовку hi (рис. 9.22).

Рис. 9.22. Инструкции, как применить новый шрифт на странице

6. Скопируйте первую строку (элемент link) и вставьте ее в заголовочные части ваших страниц (лучше всего прямо перед закрывающим тегом /head).

7. В файле styl el. ess у нас уже есть стилевое правило для заголовков h2, поэтому просто скопируйте само свойство font-family, которое предлагает Google, и вставьте его вот так (я изменил, кроме того, еще и размер шрифта):

Рис. 9.23. Шрифт Russo One применен к элементам h2

Попробуйте изменить размер окна. Заголовок выглядит не так хорошо, как раньше (рис. 9.24)?

Рис. 9.24. Отличный шрифт, но плохо вписывается в экран значение — 1):

На рис. 9.25 показан получившийся результат.

Рис. 9.25. Совсем небольшое значение line-height — и наш заголовок прекрасно выглядит!

Изменить шрифт очень легко — просто следуйте шагам выше и пробуйте разные варианты. На рис. 9.26 показан результат применения на нашей странице шрифта под названием Ruslan Display.

Рис. 9.26. Экспериментируйте со шрифтами и выбирайте стиль, который вам понравится

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

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

Можно еще долго говорить о возможностях применения шрифтов, как и о других новых свойствах CSS3, но, к сожалению, мы ограничены объемом книги. Для начала сервис Google Web Fonts — именно то, что вам нужно. Он предоставляет весьма широкие возможности и, как вы видели, прост в использовании.

.

Читайте так же:
Not found