На сегодняшний день насчитывается множество веб-сайтов, содержащих элементы оформления из шрифтов, которые отсутствуют на компьютере пользователя. Это действо предусматривает необходимость подключить шрифт к сайту. При запросе страницы шрифты будут передаваться пользователю, а затем отрисовываться в браузере пользователя. Подключать шрифты можно в любом количестве. Это означает, что можно использовать одновременно несколько шрифтов на одном сайте, однако есть кое-какие нюансы в чрезмерном употреблении подключаемых шрифтов, которые могут повлиять на скорость загрузки сайта.
Принцип использования сторонних шрифтов аналогичен шрифтам, которые уже были у пользователя на компьютере. Отличие лишь в том, что нам предстоит предварительно подключить шрифт в CSS перед его использованием. Задавать имя шрифта мы можем произвольно, и использовать его по всем CSS-файлам, подключаемым после объявления нового шрифта.
Для того чтобы подключить шрифт в CSS, используется правило:
@font-face { /* свойства шрифта */ }.
Конструкция @font-face может содержать несколько свойств, которые определяют параметры шрифта, к примеру, такие как font-family, font-size, font-style. Основное свойство это ссылка на сам файл шрифта, указывается в виде src: путь_к_файлу_шрифта. Путь к файлу может быть относительным, либо абсолютным.
Пример, как подключить шрифт в CSS:
@font-face { font-family:'DINProLt'; font-style:lighter; src:url(fonts/DINPro-Light.woff) format('woff'); } @font-face { font-family:'DINProB'; font-style:bolder; src:url(fonts/DINPro-Black.woff) format('woff'); }
Далее мы можем воспользоваться им для оформления:
p { font-family:DINProLt; } b { font-family:DINProB; }
В целом это будет выглядеть таким образом:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Как подключить шрифт в css?</title> <style> @font-face { font-family:'DINProLt'; font-style:lighter; src:url(fonts/DINPro-Light.woff) format('woff'); } @font-face { font-family:'DINProB'; font-style:bolder; src:url(fonts/DINPro-Black.woff) format('woff'); } p { font-family:DINProLt; } b { font-family:DINProB; } </style> </head> <body> <p>Этот текст будет оформлен шрифтом, который был присвоен тегу p</p> <b>Этот текст будет оформлен шрифтом, который был присвоен тегу b</b> </body> </html>
Просмотреть рабочий пример вы можете по этой ссылке.