Как подключить шрифты CSS: инструкция
Если вы дизайнер или веб-мастер, то, скорее всего, знаете, как подключить шрифты CSS. Если же вы владелец небольшого блога и решили украсить свой ресурс и сделать его уникальным, тогда эти знания должны помочь вам. Но лучше тогда начать с самого начала, понять, что такое каскадные таблицы стилей, откуда брать шрифты и куда их устанавливать.
Описание
Итак, ответ на то, как подключить шрифт CSS к сайту, обязан начинаться с описания непосредственно формального языка. CSS – это каскадные таблицы стилей. Этот язык используют в качестве описания внешности документа. Функционирует он в паре с языком разметки.
CSS работает над тем, чтобы указывать на визуальные особенности страниц в интернете. Последние должны быть созданы на основе специальных языков разметки HTML или XHTML.
Использование
Для кого же нужен CSS? Подключать шрифты, задавать цвета, располагать блоки и прочее нужно для веб-мастеров, программистов, которые работают над созданием сайта. Главная задача каскадных таблиц стилей в том, чтобы визуально разделить структурирование. То есть если HTML формирует сплошной блок текста, то CSS помогает условно «украсить» этот блок, выделить элементы, назначить параметры.
Разделение предоставляет документу доступность, большую гибкость и возможность управления. Позволяет избавиться от сложных и повторяемых элементов содержимого.
Подключение
Прежде чем понять, как правильно подключать шрифты в CSS, нужно разобраться в том, как же каскадные таблицы стилей синхронизируются с файлом. Правила их реализуются на одноименном языке. Сама таблица стилей обзавелась правилами CSS, которые и использует. Таблицы могут находиться как в визуально редактируемом документе, так и в отдельном файлике с расширением .css. В таком файле обычно расположены только команды и пометки к ним.
Так становится понятно, что таблицы стилей можно подключать несколькими методами. Рассмотрим их дальше.
Методы
Существует четыре варианта, которые помогут подключить шрифты CSS, назначить оттенок, определить блоки и т. д. Как уже говорилось ранее, набор правил может находиться в файле, написанном на языке HTML. Но этот вариант не любят многие дизайнеры. Вызвано это тем, что тогда во всем полотне команд трудно найти описывающие параметры и справлять это все. Намного легче стили назначать в отдельном документе.
Если CSS расположены отдельно, их подключают через тег <link>. Его нужно поместить внутрь <head> и </head>. В этой пометке нужно указать атрибут href, который покажет адрес к файлику с CSS.
Если команды снова-таки собраны отдельным файлом, подключаем их к веб-документу через указание @import. Его нужно писать между пометками <style> и </style>. Сразу после <style> помещаем директиву и в скобках, следом за url, указываем ссылку к файлу с CSS. В обоих случаях правила будут применимы ко всему документу.
Следующие два метода относятся к той ситуации, когда CSS размещен непосредственно в документе, который нужно «украсить». Таблица стилей в этом случае может находиться между пометками <style> и </style>. А четвертый способ предполагает размещение правил в основе одного из тегов, через атрибут style. Тогда правила будут затрагивать отдельный параметр, который находится в границах определенного текста.
Первые два метода ознаменовали появление внешних таблиц стилей, а вторые – внутренних.
Шрифты
Для чего вообще используют шрифты? Конечно, каждый владелец сайта желает, чтобы его ресурс выглядел не просто красиво, но и уникально. Хочется разместить на страницах особые элементы, которые могли бы выделяться среди всех. Также часто замечаешь заголовки или меню нестандартного написания.
Возникает много вопросов по этому поводу. Возможно, веб-мастера использовали картинку, нарисованную в «Фотошопе». Может быть, такой вариант появился благодаря Flash. Есть вариант, что использовали Javascript. Но как показывает практика, первый вариант неудобный и медленный, второй устаревший, а третий слишком замороченный. Чтобы создать нечто новое и красивое, можно попробовать подключить шрифты CSS.
Свойства
Стоит понимать, что в нашем случае шрифты – это не только определенный стиль, но и набор ряда свойств, которые нужны, чтобы управлять внешним видом текста. Использовать можно несколько вариантов. Назначить определенный шрифт для заголовка, абзаца, цитаты, основного текста, меню и т. д.
Несмотря на то что пользователю доступно огромное разнообразие начертаний, размеров, насыщенностей и т. д., важно не забывать о читабельности. Лучше избежать большого нагромождения разных стилей. Достаточно будет двух шрифтов на страничке.
Семейства
Чтобы была возможность выбирать начертание шрифта, используют семейство font-family. Очень трудно однозначно понять, есть ли на ПК читателя вашего ресурса определенный шрифт, лучше вписать все однотипные варианты. В этом случае веб-обозреватель будет выбирать из них такой, который найдется в системе пользователя.
У этого семейства есть ряд значений. К примеру, family-name представлен названием семейства шрифтов. Значение generic-family определяет пятерку основных семейств шрифтов.
Семейство font-style отвечает за выбор начертания. Этот стиль так же наследуется, как и предыдущий. Среди значений есть обычное или наклонное начертание и курсив. Стиль font-variant отвечает за малые заглавные буквы. Для насыщенности используют font-weight и т. д. Шрифту можно назначить размер и цвет.
Нестандартное решение
Помимо стандартных шрифтов, можно использовать нестандартные решения. Обычно они более уникальны и, скорее всего, вы не заметите их на сайтах конкурентов. Для этого вам не придется использовать картинки, javascript и flash. Достаточно будет взять правило @font-face. Оно позволяет пользователю загружать внешний файл в документ.
Этот способ дает возможность подключить шрифт CSS OTF и TTF. Это особые форматы, которые неплохо справляются с подобными задачами. Проблемы могут возникнуть только с браузером Internet Explorer. Несмотря на то что он впервые начал использовать сторонние шрифты еще в 1997 году, сейчас он ставит строгие требования.
Он многое делает для того, чтобы испортить вам работу. Часто может сжать файл со шрифтом, иногда может его зашифровать. Поэтому происходят разного рода хаки.
Форматы
Сейчас есть несколько форматов шрифтов, которые нужно знать. В противном случае вы столкнетесь с рядом несоответствий и несовместимостей. Можно подключить шрифт CSS TTF. Этот формат сейчас поддерживается всеми веб-обозревателями. Исключением может стать браузер Internet Explorer версии 8 и ниже, а также Opera Mini 5.0-8.0.
С EOT может работать только IE. Ситуация с WOFF такая же как и с TTF. А вот SVG функционирует в браузерах Chrome до 37 версии, а также Safari, iOS Safari, Android Browser. Как показывает практика, лучше всего использовать TTF. Это наиболее универсальный вариант, который редко вызывает проблемы. Он самый распространенный.
Правило
Итак, чтобы подключить шрифт одного из вышеуказанных форматов, достаточно использовать правило @font-face, о котором мы говорили ранее. Чтобы было понятно, нужно проследовать по определенному алгоритму. У вас есть файл со шрифтом font.ttf. Чтобы его использовать для основного текста, нужно для начала скопировать сам файл в папке, где находятся все файлы сайта.
Если вы хотите использовать не один шрифт, можете тут создать специальную папку, в которую будете их загружать. Так вам намного легче будет находить их и изменять содержание такой папки.
Теперь нужно сделать так, чтобы браузер самостоятельно загрузил наш шрифт. Для этого нужно дать ему указание. Используем директиву @font-face. Команда у нас будет выглядеть следующим образом:
@font-face {
font-family: MyUniqueFont;
src: url('fonts/ font.ttf');
}
Команда font-family отвечает за то, чтобы шрифт получил свое имя и после его можно было использовать в написании стиля. Во второй строке имеется указание пути, по которому браузер должен найти стиль и подключить его. Это не универсальный адрес. В зависимости от того, куда вы поместили файл со шрифтом, будет отличаться и этот путь. Так вы узнаете, как подключить шрифт CSS из папки.
Подключения
Если вы не знаете, как подключить несколько шрифтов CSS, на этот счет также есть инструкция. Она позволяет указать сразу несколько файлов. К примеру, их можно подключить с десяток. Для этого нужно использовать уже вышеуказанное правило @font-face. По примеру того, как вы ранее подключали один файл из папки, точно так же с новой строки указываете ссылки на другие варианты шрифта.
Если у вас сайт построен на базе WordPress, подключить стили еще проще. Когда вам нужно заменить начертание заголовка, достаточно просто войти в панель администратора. Там поискать «Настройки темы». В разделе «Типография» будет целый список разнообразных вариантов. Нужно лишь выбрать и сохранить изменение.
Другие варианты
Очень часто для подключения шрифтов используют сервис Google Fonts. Это популярный инструмент для выбора и подключения стилей. Тут находится огромное количество наборов шрифтов. Чтобы подключить их, достаточно перейти на официальный сайт.
Перед вами появится целый список с примерами и возможностью экспериментировать. После того как вы добавите нужный стиль, не забудьте выбрать кириллицу, если ваш ресурс на русском языке. Далее можно будет выбрать размер, начертание либо сразу выбрать несколько вариантов на все случаи жизни.
После у вас будет готов код, который необходимо установить в файл CSS. В этом случае также действует правило способов добавления. К примеру, если таблицы стилей представлены отдельным документом, тогда команду отправляем на первую строку. Если же таблицы стилей у вас находятся непосредственно в файле HTML, тогда нужно его добавить в тело тегов <style> и </style>.
Выводы
Добавить себе на сайт новые шрифты несложно. Важно определиться сразу с методами и вариантами. В зависимости от того, на какой системе находится ваш сайт, нужно и продумывать эти действия. Если у вас самописный ресурс, вариантов в этом случае немного. Если же, например, на WordPress, тогда эта операция намного проще, чем может показаться.
Спасибо автору!