Добрый день дорогие читатели. Все из вас, наверно, мечтают сделать свои или клиентские сайты более лаконичными и привлекательными.
Одними из главных факторов, который отвечает за восприятие информации на сайте, являются шрифты и то, как мы их используем вместе. Так как на одном сайте, чаще всего употребляется двое и более разновидностей шрифтов, например для заголовков и просто основного текста. Одна из возможностей, визуально улучшить читаемость текстов – это подключение сторонних шрифтов. Ведь все наверно знают, какая «бедная» стандартная коллекция кириллических шрифтов в Windows, которая отвечает за отображение текста в браузере.
Стандартные шрифты:
Ранее я уже писал про Cufon, с помощью которого можно подключать не стандартные шрифты к сайту. А сейчас рассмотрим более простой способ — это правило @font-face в css и подгрузкой самого шрифта с хранилища шрифтов Google Fonts.
Вся разница между Cufon и @font-face в том, что первый использует js для эмулирование шрифта и прорисовывает символы своими средствами, а @font-face подгружает сам шрифт на компьютер посетителя и браузер уже использует его для отображения текста.
Не буду расписывать много и долго, я приведу конкретный пример подключения Google Fonts, на примере этого блога.
Как видите, заголовки статей и подзаголовки у меня выполнены в не стандартном шрифте, вот сейчас на практике я покажу как такое сделать, а вы уже по аналогии будете пробовать на своих сайтах.
Чтобы не пугались, объясню — репозиторий это хранилище, но по-буржуйски :). И так, заходим на http://www.google.com/fonts/ и смотрим для себя подходящий шрифт:
Не много по меню: Слева, как видите, находиться блок с всевозможными фильтрами поиска шрифтов, в котором вы можете выбрать, к примеру, только латинские шрифты или кириллические. А сверху, настройки по отображению примеров, которые разделены на 4 вкладки:
Я выбрал шрифт Cuprum и добавил его в свою коллекцию шрифтов:
[sc name=»728 text» ]
После этого, на панели Collection, которая находиться внизу, заходим во вкладку Use, которая отвечает за использование шрифтов из вашей коллекции. Тут вы сразу увидите, что гугл показывает на сколько ухудшится скорость загрузки страницы:
Ниже находится панель с выбором «типа отображения», выбираем Latin (latin) и Cyrillic (cyrillic), что даст нам возможность отображать как латинские, так и кириллические буквы:
После этого переходим к третьему пункту на этой странице, а именно к самому подключению. Google предлагает нам три варианта встраивания своих шрифтов — через js, стандартный способ через подключение в <head> и @import в css файле. Я использую последний способ.
<head>
Открываем свой файл css и прописываем строчку, которую нам предоставил google:
Всё, шрифт от Google Fonts мы подключили к сайту, теперь как его использовать?
Всё достаточно просто, после того, как мы подключили шрифт через @import, нам надо прописать стандартные инструкцию для тех классов и индификаторов, у которых будет использоваться наш новый шрифт. К примеру:
@import
[css]h1, h2, h3 {font-family: ‘Cuprum’, sans-serif;}[/css]
После всех этих манипуляций, у вас будет выводиться заголовки с новым, не стандартным шрифтом.
На этом всё, спасибо за внимание и до скорых встреч. [sc name=»728 text» ]
