Текст является одной из важнейших частей сайта. Для пользователя важна не только информация, которую несет текст, но и сложность её восприятия. Для того, чтобы пользователю было легче воспринимать информацию, а также, чтобы текст соответствовал дизайну сайта - иногда возникает необходимость задать тексту свой собственный шрифт.
Безопасные web-шрифты
Обычно, рекомендуется использовать на сайте так называемые "безопасные шрифты". Это стандартные шрифты, которые по умолчанию установлены на большинстве компьютеров. Это такие шрифты, как Arial, Times New Roman, Tahoma, Verdana и еще несколько подобных шрифтов. Используя безопасные шрифты вы будете уверены, что текст будет отображаться одинаково на большинстве устройств. Если вы будете использовать нестандартный шрифт, то текст будет отображаться этим шрифтом только на тех устройствах, где установлен этот шрифт. В противном случае, текст будет показан стандартным шрифтом, который установлен в браузере по умолчанию.
Использование нестандартных шрифтов на сайте
Рассмотрим на простом примере, как подключить пользовательский шрифт к сайту. Этим способом можно подключить любой шрифт к странице сайта и все будет работать, как на компьютере, так и на телефоне или планшете (проверялась работоспособность в браузере Google Chrome на ПК и Android). В самом верху статьи вы видете надпись "Как сделать пользовательский шрифт на сайте?", которая написана нестандартным шрифтом Segoe Script. Исходный код страницы с этой надписью:
<html>
<head>
</head>
<body>
<p align="center" style="font-family: 'Segoe Script'; font-size: 30px">Как сделать пользовательский шрифт на сайте?</p>
</body>
</html>
Страница будет отображаться корректно на моем компьютере, т.к. у меня установлен шрифт Segoe Script. У всех остальных пользователей, у которых нет этого шрифта, надпись будет написана стандартным шрифтом. Наша задача - подключить к странице шрифт Segoe Script и загрузить файлы шрифта на сайт, чтобы шрифт был доступен автономно любому пользователя сайта, независимо, установлен у него этот шрифт или нет.
1. Скачивание файла шрифта
Для начала, нам необходим файл шрифта Segoe Script. Поскольку у меня этот шрифт уже установлен, я возьму файл шрифта из папки шрифтов Windows. Для этого необходимо зайти в Панель управления (Control Panel) и открыть папку Шрифты (Fonts), найти в списке файл Segoe Script и скопировать его, например, на рабочий стол.
Теперь на рабочем столе появился файл segoesc.ttf.
2. Конвертация шрифта для web
Далее необходимо конвертировать этот файл шрифта, чтобы он был пригодным для использования на сайте. Для этого мы будем использовать сервис Font2Web. Необходимо нажать кнопку "Выберите файл" и выбрать файл шрифта. Теперь нужно нажать "Convert & Download" и дождаться окончания загрузки шрифта, после чего сохранить полученный архив.
3. Подключение шрифта к сайту
Архив содержит папку fonts с файлами шрифта Segoe Script в различных форматах (.woff, .ttf, .svg, .otf и .eot) и файл стилей fonts.css. Необходимо залить полученную папку со шрифтами в корень сайта, например, мой-сайт.com/fonts. Теперь у нас на сайте есть шрифт Segoe Script в разных форматах. Далее необходимо к каждой странице сайта, где будет использован шрифт Segoe Script, подключить файл стилей fonts.css. Но сперва необходимо изменить значение font-family с 'Conv_segoesc' на 'Segoe Script'. Вот так должен выглядеть измененный файл:
/** Generated by FG **/
@font-face {
font-family: 'Segoe Script';
src: url('fonts/segoesc.eot');
src: local('☺'), url('fonts/segoesc.woff') format('woff'), url('fonts/segoesc.ttf') format('truetype'), url('fonts/segoesc.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Подключить стили к странице сайта можно двумя способами.
Способ 1. Залить в корень сайта измененный файл fonts.css и в код страницы добавить строку <link type="text/css" rel="stylesheet" href="fonts.css"> между тегами <head> и </head>:
<html>
<head>
<link type="text/css" rel="stylesheet" href="fonts.css">
</head>
<body>
<p align="center" style="font-family: 'Segoe Script'; font-size: 30px">Как сделать пользовательский шрифт на сайте?</p>
</body>
</html>
Способ 2. Скопировать содержимое измененного файла fonts.css и вставить его в код страницы между тегами <head> и </head>, заключив в теги <style> и </style>:
<html>
<head>
<style>
/** Generated by FG **/
@font-face {
font-family: 'Segoe Script';
src: url('fonts/segoesc.eot');
src: local('☺'), url('fonts/segoesc.woff') format('woff'), url('fonts/segoesc.ttf') format('truetype'), url('fonts/segoesc.svg') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<p align="center" style="font-family: 'Segoe Script'; font-size: 30px">Как сделать пользовательский шрифт на сайте?</p>
</body>
</html>
Оба способа работают одинаково. Таким образом на сайте можно использовать любой шрифт.
| 