Как использовать на сайте нестандартный шрифт + эффекты
Какие шрифты чаще всего можно встретить на самых различных сайтах? Это Arial, Verdana, Tahoma и еще ряд таких же знакомых и стандартных шрифтов. Почему так популярны эти шрифты? Нравятся разработчикам более нежели все остальные шрифты? Или может, они солидней и привлекательней?
На самом деле ответ гораздо проще: есть ряд шрифтов, которые являются стандартными и общедоступными, которые будут отображаться одинаково на различных компьютерах. Тот шрифт, который вы зададите, пользователи и будут видеть на своих экранах. Но что увидят посетители вашего сайта, если вы вдруг решите использовать для меню или для тех же заголовков необычный шрифт?
Если вы попытаетесь использовать какой-либо нестандартный шрифт, который вы нашли в сети, скачали на свой компьютер и применили на сайте, то видеть его сможете только вы, так как у остальных, скорее всего, данный шрифт на компьютере не установлен и они вместо него увидят тот шрифт, который браузер использует по умолчанию.
Что же можно предпринять для того, чтобы все же была возможность использовать на сайте нестандартные шрифты? Мы можем обратиться к Google Fonts. Список шрифтов там не так уж велик, тем более кириллических, но все же даже небольшой набор свежих шрифтов может помочь изменить внешний вид сайта.
Итак, переходим на сервис Google Fonts и подбираем шрифт.
Справа в фильтрах выбираем Cyrillic или Cyrillic Extended, если ищем кириллический шрифт. Если же нет надобности в кириллическом шрифте, то, вообще красота — выбор шрифтов довольно большой. Вверху можем вести любую фразу, для того, чтобы увидеть шрифт, так сказать, в действии.
Определившись с шрифтом, нажимаем кнопку «Quick-use». Также некоторые шрифты имеют просмотр других стилей, которые можно увидеть, нажав на кнопку «See all styles».
В открывшейся странице проходим несколько шагов:
1. отмечаем необходимый язык: кириллица или латиница;
2. копируем код, посредством которого подключим выбранный шрифт к своему сайту и вставляем его между тегами <head>…</head>, между которыми уже должны находиться подключения стилей и различных скриптов. Данные теги в динамическом сайте обычно находятся в файле header (php,tpl…).
3. копируем код из четвертого шага, и добавляем тому элементу сайта, который хотим отобразить именно этим шрифтом.
Например, данный шрифт мы хотим использовать для главного меню сайта, то в style.css (stylesheet.css и т.д.) пропишем приблизительно такой код:
|
1 |
#main-menu {font-family: 'Ubuntu Condensed', sans-serif;} |
если выбранный шрифт хотим использовать для заголовков, то код будет таким:
|
1 |
h1 {font-family: 'Ubuntu Condensed', sans-serif;} |
Мы добились того, чего и хотели: нестандартный шрифт, подключенный к сайту с помощью Google Fonts, теперь будет отображаться на всех компьютерах, не смотря на то, что данный шрифт на них не установлен.
[divider top=»1″]Но это только одна сторона возможностей Google Fonts. Кроме того, что мы можем использовать различные шрифты, мы также можем их немного приукрасить: добавить тень, объем, огонь и т.д. Рассмотрим это на примере: добавим нашему Ubuntu Condensed некоторые эффекты. Список эффектов можно найти здесь.
1. Добавим 3d эффект нашей фразе. Для этого немного изменим код, который мы разместили между тегами <head>…</head> — добавим параметр «effect=», в который можем добавить либо один эффект, либо несколько, разместив между ними разделители.
|
1 |
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=cyrillic-ext,cyrillic&effect=3d' rel='stylesheet' type='text/css'> |
А самому элементу (фразе, которой присваиваем шрифт с эффектом) придадим класс «font-effect-3d»:
|
1 |
<p class="font-effect-3d">Образец нового подключенного шрифта к моему блогу.</p> |
Образец нового подключенного шрифта к моему блогу.
2. Придадим тексту огненный эффект. Между тегами <head>…</head> разместим код подключения с добавленным эффектом:
|
1 |
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=cyrillic-ext,cyrillic&effect=fire' rel='stylesheet' type='text/css'> |
А самому элементу придадим класс «font-effect-fire»:
|
1 |
<p class="font-effect-fire">Образец нового подключенного шрифта к моему блогу.</p> |
и получим результат:
Образец нового подключенного шрифта к моему блогу.
Как упоминалось выше, мы можем в подключении указать сразу несколько эффектов, просто разместив между ними разделители:|
1 |
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=cyrillic-ext,cyrillic&effect=3d|fire' rel='stylesheet' type='text/css'> |
Спасибо за статью, всегда рад почитать вас
А чего Вы сайт забросили???
Да не то, что бы «забросила», просто времени не хватает: работа, летом отпуск и т.д. Но обязательно вернусь к его заполнению. Благодарю за интерес!))
Честно говоря ничего не понятно, в каком файле и что менять, плюс минус километр(( Таким чайникам как я нужно попонятнее писать. Короче не получилось((( А очень хочется!
Здравствуйте, Алексей,
следите за обновлениями на блоге — в ближайшее время размещу пост о добавлении стороннего шрифта на сайт. Возможно, для вас этот вариант подойдет больше.