Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:
P { font-family: Verdana; }
Этот небольшой кусочек кода означает, что ко всем тегам
Применен шрифт Verdana. Свойство font-family устанавливает, какой шрифт или семейство шрифтов будет использоваться. Корректное отображение этого стиля в браузере пользователя зависит от того, установлен ли на его компьютере заданный шрифт. В нашем случае, если на компьютере пользователя отсутствует шрифт Verdana, то браузер отобразит шрифт, установленный по умолчанию.
В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:
P { font-family: Verdana, "Trebuchet MS", Geneva, sans-serif; }
При обработке этого кода браузер сначала проверит наличие шрифта Verdana на компьютере пользователя. Если шрифт присутствует, содержимое тегов
Отобразится этим шрифтом. Если шрифт отсутствует, браузер проверит наличие следующего по списку шрифта – Trebuchet MS. Если и этот шрифт отсутствует, будет проверяться наличие следующего шрифта – Geneva. Если на компьютере пользователя нет и Geneva, браузер выберет другой доступный шрифт без засечек и отобразит текст им.
Обратите внимание: в коде мы записали название шрифта Trebuchet MS в кавычках. Необходимо брать название шрифта в двойные либо одинарные кавычки тогда, когда в нем содержатся пробелы.
О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии .
Веб-шрифты
Вышеприведенный способ использования шрифтов имеет огромный минус – вы ограничены в количестве шрифтов. Вам придется довольствоваться лишь теми их вариантами, которые, вероятнее всего, установлены на большинстве компьютеров.
Каким же образом можно увеличить выбор шрифтов, чтобы сделать дизайн страницы индивидуальным, добавить оригинальности? На помощь приходят веб-шрифты. Читайте главу дальше и вы узнаете, как с ними работать.
Итак, для отображения нужного шрифта в браузере пользователя нам необходимо, чтобы этот шрифт сам загружался на его компьютер. Осуществить это довольно просто. Такой метод подключения шрифтов к CSS открывает действительно широкие возможности перед дизайнерами. Но стоит упомянуть и о ложке дёгтя в бочке мёда: во-первых, не каждый браузер поддерживает определенный формат шрифта (что приведет к тому, что шрифт не отобразится), а во-вторых, если файл со шрифтом имеет большой вес, это может замедлить загрузку страницы.
Поддержка форматов
Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:
Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com . В строку поиска необходимо ввести название формата (например, ttf).
Если вы ориентируетесь на современные браузеры, вам достаточно будет использовать формат шрифта TTF – наиболее распространенный и используемый. В случае, когда вам необходимо иметь несколько форматов одного шрифта, вы можете воспользоваться специальными онлайн-конвертерами из одного формата в другой, а затем подключить все файлы по очереди. Таким образом браузер сможет выбрать тот формат шрифта, с которым он работает.
Подключаем веб-шрифт с помощью @font-face
Предположим, у вас есть свой уникальный шрифт под названием MyUniqueFont в формате TTF и вы желаете, чтобы основной текст веб-страницы отображался именно этим шрифтом. Первое, что нужно сделать, это скопировать файл шрифта в папку, где находятся все остальные файлы сайта. Чтобы не создавать беспорядок, вы можете создать отдельную папку специально для шрифтов, назвав ее, к примеру, fonts .
@font-face { font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); }
Свойство font-family в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:
P { font-family: MyUniqueFont; }
Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.
Шрифты Google Fonts
Компания Google дает возможность легко подключать любой шрифт из коллекции Google Fonts. Всё, что вам необходимо сделать, чтобы начать использовать понравившийся шрифт, – указать несколько настроек на странице шрифта в Google, после чего скопировать специальную ссылку на этот шрифт и добавить в ваш веб-документ.
Примечание: вся коллекция шрифтов от Google доступна на сайте Google Fonts . На странице можно воспользоваться различными фильтрами для поиска шрифтов по категориям, толщине, алфавиту.
Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .
Шаг 1: выберите начертание
Первым делом на странице выбранного шрифта отобразятся варианты его начертания, а также иконка спидометра, которая означает не что иное, как скорость загрузки шрифта. Чем больше стилей для шрифта вы выбираете, тем больше времени потребуется на его загрузку. Поэтому рекомендуется выбирать только те варианты начертания, которые планируется использовать.
Шаг 2: выберите алфавит
Далее на странице есть возможность выбрать набор символов: латиница, кириллица и т. д. В зависимости от шрифта, в нем могут быть доступны не все варианты алфавита. Аналогично предыдущему пункту, лучше поставить галочку только напротив того алфавита, который понадобится.
Шаг 3: добавьте код на сайт
Первый способ подразумевает добавление в HTML-код ссылки на сервер Google, откуда и скачивается шрифт. Вам необходимо скопировать уже готовый кусок кода и поместить его между тегами
в вашем HTML-документе. Пример:...
Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:
@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);
Особенность первого способа заключается в том, что вам понадобится добавлять ссылку на шрифт в заголовок каждой страницы, где планируется его использовать. Это легко осуществить на сайтах с небольшим количеством страниц, но проблематично для крупных ресурсов. Второй способ удобен тем, что код можно поместить в самое начало внешней таблицы стилей, и тогда все страницы, к которым подключена эта таблица, получат необходимый шрифт, который будет загружаться с помощью директивы @import .
Шаг 4: создайте стиль
После осуществления предыдущих шагов можно начать применять шрифт. Как записывается такое правило CSS, вы уже видели ранее:
P { font-family: "Roboto", sans-serif; }
Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:
@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);
Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:
P { font-family: "Roboto", sans-serif; font-weight: 700; }
Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).
Главными преимуществами сервиса Google Fonts является:
- легкость использования (разобраться с сервисом сможет даже новичок, а весь необходимый код генерируется автоматически – остается только скопировать его);
- доступность шрифтов (нет необходимости за них платить);
- предусмотрены все используемые форматы шрифтов (это означает, что каждый браузер сможет загрузить именно тот формат шрифта, с которым он работает).
Среди недостатков сервиса – не очень большое разнообразие шрифтов, особенно кириллических. К слову, в интернете есть и другие похожие сервисы, например, TypeKit (платный).
Итоги
Сегодня нам доступно несколько вариантов подключения оригинальных и нестандартных шрифтов к веб-страницам. Каждый из этих способов имеет свои плюсы и минусы. Какой из вариантов лучше использовать, вам нужно определить самостоятельно. Зачастую это зависит от ситуации, и в разных случаях могут пригодиться разные подходы. На данном этапе вам достаточно просто знать способы использования шрифтов в CSS.
Чтобы создать неповторимый и красочный дизайн, приходится подключать свои шрифты. В этом уроке научимся подключать любой шрифт. Подключение нового шрифта осуществляется при помощи правила @font-face . В этом правиле, как вы наверно догадались, обязательно должны быть два свойства: имя шрифта и путь к файлу (к шрифту). Следующие примеры будут относительно шрифта Open Sans. Рассмотрим первый пример.
@font-face {
font-family: "Open Sans";
src: local("Open Sans"),
url("/font/open_sans.ttf") format("truetype");
}
Свойство font-family мы применяем, чтобы указать имя шрифта (далее будем использовать его так: p {font-family: "Open Sans" sans-serif}). Часть кода local("Open Sans") означает проверку на наличие у пользователя этого шрифта. Если вы не хотите проверять наличие шрифта у пользователя, то можно писать как во втором примере.
@font-face {
font-family: "Open Sans";
src: url("/font/open_sans.ttf") format("truetype");
}
Третий пример более полный и более кроссбраузерный.
@font-face {
font-family: "Open Sans";
src: url("open_sans.eot");
src: url("open_sans.ttf") format("truetype"),
url("open_sans.woff") format("woff");
font-weight: normal;
font-style: normal;
}
Другие способы подключения шрифтов
Способ первый (например, берем шрифт с сайта Google), код вставляется в
.Давно прошли те времена, когда выбор шрифтов для веб-дизайна ограничивался стандартным, так называемым «безопасным» набором. В него входили всего девять шрифтов, а именно Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuched MS и Verdana. С развитием языка гипертекстовой разметки и каскадных таблиц стиля, используемых для оформления внешнего вида веб-страниц, появилась возможность использования практически любых шрифтов в дизайне сайтов вне зависимости от того, установлены данные шрифты на компьютере пользователя или нет.
Чтобы использовать на своем сайте какой-то оригинальный шрифт необходимо иметь сам шрифт, привести его к определенным форматам и подключить к сайту. Рассмотрим как это можно сделать.
Как подключить шрифт к сайту
Подключение нестандартных шрифтов к сайту может быть выполнено как минимум двумя способами:
- Быстрым
, когда сам шрифт подгружается со специализированных сторонних ресурсов.
- Обычным
, когда шрифт во всех необходимых для подключения форматах хранится на том же сервере, что и весь сайт в одной из папок его шаблона.
Быстрое подключение шрифта к сайту с помощью специальных сервисов
Существуют различные сервисы, которые хранят у себя различные интересные шрифты и предоставляют возможность использования их на различных сайтах. Одним из таких сервисов является Google Fonts. На его основе подключение шрифтов выполняется следующим образом.
Еще одним подобным сервисом является сайт WebFont.ru. Подключение его шрифтов во-многом аналогично рассмотренному выше примеру.
Независимое от других сервисов подключение шрифтов
Чтобы не зависеть от сторонних сервисов желательно хранить и подключать шрифты в шаблон непосредственно на своем хостинге или сервере. Выполняется это несколько сложнее, но не настолько, чтобы эта задача была невыполнимой.
- Загрузите на свой компьютер файл со шрифтом. Чаще всего шрифты предоставляются для скачивания в формате TTF
– TrueType Font, разработанном компанией Apple и поддерживаемым многими современными операционными системами.
- Чтобы обеспечить кроссбраузерность, то есть совместимость и одинаковое отображение шрифтов в различных веб-обозревателях, необходимо подключать шрифт к сайту в следующих форматах: ttf
, eot
, woff
, svg
. Сконвертировать исходный файл со шрифтом во все необходимые форматы можно с помощью онлайн-сервисов, таких как: , .
Следует отметить, что все указанные сервисы в той или иной степени немного искажают шрифты во время конвертирования. Гораздо лучше с этой задачей справляется специальная утилита под названием FontPrep . Но она предназначена только для операционной системы Mac OS. - После получения всех необходимых для подключения к сайту шрифта форматов, создайте в шаблоне отдельную папку fonts
, в которую скопируйте полученные файлы.
- Подключение шрифта к сайту производится использование правила @font-face
следующим образом.
- Остается самая простая и приятная часть – назначение нестандартного шрифта какому-либо элементу дизайна. Например, всей странице как в следующем примере.
Body {
font-family: "ALSStory";
font-size: 12px
} В параметре font-family здесь необходимо указывать название шрифта в соответствии с аналогичным значением правила @font-face.
В заключении статьи хотелось бы порекомендовать не увлекаться украшательством сайта и не устанавливать на него много нестандартных шрифтов. Помните, что каждый новый подключаемый шрифт будет приводить к увеличению размера каждой страницы сайта и ухудшение скорости загрузки для пользователей.
Влад Мержевич
Шрифт является неотъемлемой частью веб-дизайна, придаёт сайту выразительность и узнаваемость, выражает характерный стиль сайта и непосредственно связан с восприятием текстов. Хорошо подобранный шрифт может не замечаться, но без него не будет той изюминки, придающей дизайну сайта завершённость.
Если у вас на компьютере уже установлен специфический шрифт, то в стилях достаточно добавить строку.
h1 { font-family: SuperPuperFont; }
Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам
. Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову - это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.
Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.
- Текст легко добавлять и править.
- В браузере можно пользоваться поиском и находить желаемые фразы.
- В настройках браузера можно уменьшать или увеличивать размер шрифта добиваясь комфортного просмотра.
- Поисковые системы хорошо индексируют содержимое документа.
- Текст можно выделить и скопировать в буфер, а также перевести на другой язык.
- Параметры текста вроде межстрочного расстояния, цвета, размера и тому подобное легко менять с помощью свойств CSS.
- К тексту опять же через CSS просто добавлять разные эффекты, например тень.
Как видите, преимуществ очень много. Небольшие минусы тоже имеются и для баланса их стоит упомянуть.
- Не все версии браузеров поддерживают загружаемый шрифт и один для всех формат.
- Файл, содержащий гарнитуру шрифта, может занимать большой объём, замедляя тем самым загрузку веб-страницы.
В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.
| Формат | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| TTF | 9.0+ | 4.0+ | 10.0+ | 3.1+ | 3.5+ | 2.2+ | |
| EOT | 5.0-8.0 | ||||||
| WOFF | 9.0+ | 5.0+ | 3.6+ | ||||
| SVG | 1.0+ | 9.0+ | 3.1+ | 3.5+ | 1.0+ |
Самый поддерживаемый формат - TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).
Пример 1. Подключение TTF
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Вначале загружаем сам файл шрифта с помощью правила @font-face . Внутри него пишем название гарнитуры шрифта через параметр font-family и путь к файлу через src . Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1 , как показано в примере, задаём свойство font-family с именем загруженного шрифта. Для старых версий IE через запятую перечисляем запасные варианты. В данном случае шрифт заголовка будет «Comic Sans MS», поскольку IE8 и ниже не поддерживает формат TTF.
Результат данного примера показан на рис. 1.
Рис. 1. Заголовок с загруженным шрифтом
Что делать, если вам позарез нужен витиеватый шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.
Для конвертации имеется несколько онлайновых сервисов, позволяющих загрузить TTF-файл и на выходе получить EOT-файл. К сожалению, у большинства этих сервисов одна и та же беда - файл мы получаем, но русский язык в нём не поддерживается. В итоге нужный результат не достигается, конвертация происходит неверно. Среди проверенных мной сайтов оказался один, показавший текст в IE правильно.
Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src . Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url , указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.
src: url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);
Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.
Пример 2. Подключение EOT
HTML5 CSS3 IE Cr Op Sa Fx
Современный элемент политического процесса
По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.
Что касается iOS, то делать и загружать отдельный шрифт в формате SVG как мне кажется нет особого смысла. Аудитория сайтов просматривающая его через iOS пока невелика, к тому же версию сайта под мобильные устройства стараются облегчить, и загружать дополнительные несколько десятков килобайт не желательно.
Google Web Fonts
Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts . Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.
Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).
Рис. 2. Выбор шрифтов в Google Web Fonts
Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.
Рис. 3. Загружаемые на страницу шрифты
Подключить выбранные шрифты можно одним из трёх путей, добавляемый код можно скопировать ниже по странице.
1. Через элемент . Строка будет иметь примерно следующий вид.
2. Через правило @import . Такую строку вставляем в свой CSS-файл в самом верху.
@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);
3. Через JavaScript.
В принципе, все пути равноценны, так что выбирайте по своему предпочтению.
Преимущества применения данного сервиса такие.
- Шрифты свободны для использования, вам не нужно за них платить.
- Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
- Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.
Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.
Использовать Google Web Fonts или нет решать вам. Если не нашли там подходящего шрифта, всегда можно подключить популярный и распространённый TTF. Тем более, что он поддерживается последними версиями всех популярных браузеров.
Если вы дизайнер или веб-мастер, то, скорее всего, знаете, как подключить шрифты CSS. Если же вы владелец небольшого блога и решили украсить свой ресурс и сделать его уникальным, тогда эти знания должны помочь вам. Но лучше тогда начать с самого начала, понять, что такое каскадные таблицы стилей, откуда брать шрифты и куда их устанавливать.
Описание
Итак, ответ на то, как подключить к сайту, обязан начинаться с описания непосредственно формального языка. CSS - это каскадные таблицы стилей. Этот язык используют в качестве описания внешности документа. Функционирует он в паре с языком разметки.
CSS работает над тем, чтобы указывать на визуальные особенности страниц в интернете. Последние должны быть созданы на основе специальных языков разметки HTML или XHTML.
Использование
Для кого же нужен CSS? Подключать шрифты, задавать цвета, располагать блоки и прочее нужно для веб-мастеров, программистов, которые работают над созданием сайта. Главная задача каскадных таблиц стилей в том, чтобы визуально разделить структурирование. То есть если HTML формирует сплошной блок текста, то CSS помогает условно «украсить» этот блок, выделить элементы, назначить параметры.
Разделение предоставляет документу доступность, большую гибкость и возможность управления. Позволяет избавиться от сложных и повторяемых элементов содержимого.
Подключение
Прежде чем понять, как правильно подключать шрифты в CSS, нужно разобраться в том, как же каскадные таблицы стилей синхронизируются с файлом. Правила их реализуются на одноименном языке. Сама таблица стилей обзавелась правилами CSS, которые и использует. Таблицы могут находиться как в визуально редактируемом документе, так и в отдельном файлике с расширением.css. В таком файле обычно расположены только команды и пометки к ним.
Так становится понятно, что таблицы стилей можно подключать несколькими методами. Рассмотрим их дальше.
Методы
Существует четыре варианта, которые помогут подключить шрифты CSS, назначить оттенок, определить блоки и т. д. Как уже говорилось ранее, набор правил может находиться в файле, написанном на языке HTML. Но этот вариант не любят многие дизайнеры. Вызвано это тем, что тогда во всем полотне команд трудно найти описывающие параметры и справлять это все. Намного легче стили назначать в отдельном документе.
Если CSS расположены отдельно, их подключают через тег . Его нужно поместить внутрь
и . В этой пометке нужно указать атрибут href, который покажет адрес к файлику с CSS.Если команды снова-таки собраны отдельным файлом, подключаем их к веб-документу через указание @import. Его нужно писать между пометками . Сразу после . А четвертый способ предполагает размещение правил в основе одного из тегов, через атрибут 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-family: MyUniqueFont;
src: url("fonts/ font.ttf");
Команда font-family отвечает за то, чтобы шрифт получил свое имя и после его можно было использовать в написании стиля. Во второй строке имеется указание пути, по которому браузер должен найти стиль и подключить его. Это не универсальный адрес. В зависимости от того, куда вы поместили файл со шрифтом, будет отличаться и этот путь. Так вы узнаете, как подключить шрифт CSS из папки.
Подключения
Если вы не знаете, как подключить несколько шрифтов CSS, на этот счет также есть инструкция. Она позволяет указать сразу несколько файлов. К примеру, их можно подключить с десяток. Для этого нужно использовать уже вышеуказанное правило @font-face. По примеру того, как вы ранее подключали один файл из папки, точно так же с новой строки указываете ссылки на другие варианты шрифта.
Если у вас сайт построен на базе WordPress, подключить стили еще проще. Когда вам нужно заменить начертание заголовка, достаточно просто войти в панель администратора. Там поискать «Настройки темы». В разделе «Типография» будет целый список разнообразных вариантов. Нужно лишь выбрать и сохранить изменение.
Другие варианты
Очень часто для подключения шрифтов используют сервис Это популярный инструмент для выбора и подключения стилей. Тут находится огромное количество наборов шрифтов. Чтобы подключить их, достаточно перейти на официальный сайт.
Перед вами появится целый список с примерами и возможностью экспериментировать. После того как вы добавите нужный стиль, не забудьте выбрать кириллицу, если ваш ресурс на русском языке. Далее можно будет выбрать размер, начертание либо сразу выбрать несколько вариантов на все случаи жизни.
После у вас будет готов код, который необходимо установить в файл CSS. В этом случае также действует правило способов добавления. К примеру, если таблицы стилей представлены отдельным документом, тогда команду отправляем на первую строку. Если же таблицы стилей у вас находятся непосредственно в файле HTML, тогда нужно его добавить в тело тегов .
Выводы
Добавить себе на сайт новые шрифты несложно. Важно определиться сразу с методами и вариантами. В зависимости от того, на какой системе находится ваш сайт, нужно и продумывать эти действия. Если у вас самописный ресурс, вариантов в этом случае немного. Если же, например, на WordPress, тогда эта операция намного проще, чем может показаться.