ГРУППА КУРСА
|
Главная >
Учебник CSS >
Как изменить или подключить шрифт в CSSБольшинство текстовых элементов по умолчанию имеют шрифт Times New Roman. В CSS есть возможность установить другие шрифты. Также в CSS можно подключить шрифт, который изначатьно не был предусмотрен в браузерах. В этой теме мы рассмотрим, как это сделать. Семейства шрифтовШрифты подразделяются на семейства. Существуют такие семейства шрифтов: serif - с засечками sans-serif - без засечек monospace - моноширинные cursive - курсивные fantasy - декоративные Безопасные шрифтыСуществует достаточно много шрифтов. Сложность их использования заключается в том, что каждая операционная система имеет свой набор шрифтов. Кроме того, различные браузеры также отображают не все шрифты. Если для какого-то текстового элемента установлен шрифт, которого нет в операционной системе компьютера пользователя, то текст будет отображаться каким-то другим шрифтом. Шрифты, которые отображаются на всех компьютерах и во всех браузерах, называются безопасными. Считается, что абсолютно безопасных нет. Но всё же, существует ряд шрифтов, которые есть у абсолютного большинства пользователей. Далее приведены безопасные шрифты с указанием их семейства. Times New Roman, serif Georgia, serif Arial, sans-serif Verdana, sans-serif Tahoma, sans-serif Impact, sans-serif Trebuchet MS, sans-serif Courier New, monospace Comic Sans MS, cursive Другие шрифты Вы можете найти, если наберёте в любом поисковике: стандартные шрифты. Установка шрифтаЧтобы изменить или подключить шрифт в CSS используется свойство font-family. Значением этого свойства является название шрифта. Для примера создадим абзац и установим ему шрифт: Стиль: +
HTML код:
Если в названии шрифта больше одного слова, то оно пишется в кавычках. Пример:
Свойство font-family позволяет указать несколько шрифтов через запятую. Также можно указать семейтсво шрифтов. При этом, будет использоваться шрифт, указанный первым. Если такого нет, то используется следующий шрифт, и так далее. В основном, на реальных страницах так и делают. Это делается для того, чтобы быть уверенным, что страница будет отображаться так, как нужно. Пример:
Как подключить нестандартный шрифт в CSSКроме шрифтов, которые содержатся в операционной системе пользователя, можно использовать и другие шрифты. Их можно найти в интернете или создать самостоятельно. Существует много нестандартных шрифтов. Их можно найти, через поисковик. Файл шрифта нужно скачать и присоединить к странице. Некоторые шрифты являются платными. Об этом должна быть информация на странице, с которой Вы скачиваете шрифт. Сложность использования нестандартных шрифтов заключается в том, что каждый браузер поддерживает свой набор форматов. Поэтому, при использовании нестандартрого шрифта нужно проверять, как отображается страница в разных браузерах. Форматов шрифтов достаточно много. Наиболее универсальным является формат woff. Он должен работать в большинстве современных браузеров. Также распространены ttf и otf. Чтобы подключить нестандартный шрифт CSS используется правило @font-face. В нём обязательно должны быть два свойства: в свойстве font-family указывается название шрифта, под которым он будет использоваться на сайте. Название Вы выбираете сами. А в свойстве src указывается путь к файлу шрифта. После этого, шрифт можно использовать для любого селектора. В свойстве font-family нужно указать название, которое Вы выбрали для шрифта. Для примера я использую файл шрифта unineue.woff. Он располагается в той же папке, что и страница. Шрифт я назову Nfont. Стиль:
HTML код:
Чтобы шрифт работал в разных браузерах, можно использовать несколько файлов с разными форматами. В свойстве src путь к файлам пишется через запятую. Каждый браузер сам определяет, какой тип файла использовать. При этом желательно указывать форматы файлов, чтобы браузер мог правильно выбрать файл. CSS правило @font-face будет выглядеть так:
|