Турбо-страницы в Яндексе
22 ноября 2017 года Яндекс анонсировал, что турбо-страницы открыты для всех. Отличить их от обычных просто – рядом со ссылкой показывается...
Как задать стиль шрифта текста на CSS в HTML
Внешний вид текста на странице сайта влияет на его восприятие, поэтому чтобы сайт производил хорошее впечатление, его шрифты должны сочетаться с дизайном.
Чтобы изменить гарнитуру шрифта текста на сайте необходимо прописать в атрибуте style css свойство font-family и задать в нем название шрифта. Если в названии шрифта есть пробелы, то его нужно взять в одинарные кавычки, если для style используются двойные или, наоборот, взять в двойные кавычки, если style свойства обрамлены одинарными.
Пример, как задать стиль шрифта текста в html: Содержание с измененным <span style=»font-family:Tahoma»>словом 1 </span> и <span style=»font-family:’Trebuchet MS’ «>словом 2</span> внутри текста. В данном примере с помощью свойства font-family мы задаем шрифт под названием «Tahoma» и «Trebuchet MS» отдельным словам. Обратите внимание, что шрифт Trebuchet MS в примере обрамлен дополнительными кавычками, т. к. в названии есть пробелы.
Безопасные шрифты в css
У каждого браузера и операционной системы свой набор поддерживаемых шрифтов. Если на устройстве пользователя не установлен шрифт, который вы прописали в свойствах, то он может некорректно отображаться или быть видоизмененным на заданный по умолчанию. Чтобы избежать некорректного отображения:
- Используют безопасные шрифты. Безопасными шрифты в css называются потому, что они поддерживаются большинством браузеров и операционных систем, а значит и отображаться, скорее всего, будут корректно. Основные безопасные шрифты приведены ниже.
- Указывают несколько шрифтов. В свойстве font-family можно указать несколько шрифтов через запятую, в этом случае вначале будет предпринята попытка найти первый написанный шрифт, если он неизвестен, то будет повторная попытка со следующим, указанным через запятую и так далее, пока шрифт не найдется. Первый найденный шрифт в свойстве font-family и будет использован для отображения. Если ни один из указанных через запятую шрифтов не нашелся, то, скорее всего, будет использован заданный по умолчанию в браузере.
Пример, как задать нескольких шрифтов в css: Содержание с <span style=»font-family:Georgia, ‘Palatino Linotype'»>измененным шрифтом </span> внутри текста. В данном примере с помощью свойства font-family мы задаем шрифт под названием Georgia, и если он не будет найден, то будет попытка поиска шрифта ‘Palatino Linotype’. Обратите внимание, что шрифт ‘Palatino Linotype’ обрамлен одинарными кавычками поскольку в его названии присутствует пробел.
Названия безопасных шрифтов
1. Семейство sans-serif (без засечек)
Семейство sans-serif — шрифты без засечек с прямыми и четкими контурами(обычно используются для заголовков и меню).
| Безопасные шрифты | |
| ‘Arial Black’ | Пример фразы |
| Verdana | Пример фразы |
| ‘Lucida Sans Unicode’ | Пример фразы |
| ‘Comic Sans MS’ | Пример фразы |
| Arial | Пример фразы |
| ‘Trebuchet MS’ | Пример фразы |
| Tahoma | Пример фразы |
| Impact | Пример фразы |
2. Семейство serif (с засечками)
Семейство serif — шрифты с засечками
| Безопасные шрифты | |
| ‘Palatino Linotype’ | Пример фразы |
| Georgia | Пример фразы |
| Serif | Пример фразы |
3. Семейство monospace (одинаковая ширина букв)
Семейство monospace — шрифты с одинаковой шириной всех букв.
| Безопасные шрифты | |
| ‘Lucida Console’ | Пример фразы |
| Courier | Пример фразы |
4. Семейство cursive (рукописные)
Семейство cursive — шрифты, имитирующие почерк.
| Безопасные шрифты | |
| ‘Comic Sans MS’ | Пример фразы |
Если ни один из написанных выше шрифтов вам не подошел, вы можете сделать надписи в графическом редакторе и сохранить их в виде картинок, которые затем вставить на сайте. На практике данный способ нередко используют для создания редких и оригинальных шрифтов у заголовков, ссылок меню.
Пример, как изменить гарнитуру шрифта в css
Результат в браузере
Пример кода html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
</head>
<body>
<span style="font-family:Arial">Пример фразы Arial</span> <br>
<span style="font-family:Georgia">Пример фразы Georgia</span> <br>
<span style="font-family:'Comic Sans MS'">Пример фразы Comic Sans MS</span> <br>
<span style="font-family:'Lucida Console'">Пример фразы 'Lucida Console'</span> <br>
</body>
</html>В примере выше, показан как изменить гарнитуру шрифта текста на css внутри тега span, но как вы понимаете, задать стиль аналогичным образом можно у любого тега, отображающего текст: div, p, td, h1, h2 и т. п.
Нужна доработка сайта?
Команда Hardkod профессионально доработает ваш сайт: добавим новый функционал, улучшим существующие процессы, подключим платежные системы и CRM. Мы технически поддержим ваше развитие, превращая пожелания в рабочие инструменты для увеличения продаж. Вы фокусируетесь на стратегии — мы на её техническом воплощении. Звоните 8 (800) 350-81-86 или оставляйте заявку на сайте.
Кейсы 
Продвижение бережного медицинского такси San-taxi.ru
Продвижение лидера российской зооиндустрии Валта Пэт Продактс
Продвижение производителя кормов для кошек и собак Bowl Wow
Остались вопросы? Оставьте заявку
Закажите услугу прямо сейчас и получите консультацию специалиста бесплатно
Оставить заявкуЧитайте также
Как перенести видео с Youtube на Rutube: пошаговая инструкция и ответы на популярные вопросы
15 августа Rutube предоставил возможность пользователям переносить в автоматическом режиме видео со своего канала на видеохостинге...
Индексация: как попасть в поиск или закрыть страницы от поисковых систем
Создание сайта – только начальный шаг на пути развития ресурса. Причем совершенно неважно, речь идет о лендинге или об интернет-магазине...
Написать в Telegram
Написать в WhatsApp
Звонок 8 800 350 81 86