CSS: Изменение шрифта
Некоторые сайты привлекают пользователей не анимацией, не картинками или фотографиями, не видео-роликами, а исключительно своим текстовым содержимым. Текст — это неотъемлемое содержимое многих популярных сайтов. В предыдущих уроках мы рассмотрели CSS свойства, которые позволяют изменить цвет текста, добавить к нему тень, выровнять его и добавить к нему подчеркивание, надчеркивание или вовсе его зачеркнуть. В этом уроке будет рассмотрено какие семейства шрифтов бывают и как изменить шрифт текста, установленный по умолчанию.
Разница между семействами шрифтов Sans-serif и Serif
PuzzleWeb.ru — шрифт sans-serif
PuzzleWeb.ru — шрифт serif
Семейства шрифтов в CSS
В CSS шрифты разделены на семейства, каждое семейство состоит из набора шрифтов, обладающих общими характеристиками. Существует всего пять семейств шрифтов:
- sans-serif — шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
- serif — семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки — декоративные штрихи и черточки по краям букв.
- monospace — семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
- cursive — шрифты, имитирующие рукописный текст.
- fantasy — художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.
Свойство font-family дает возможность изменить шрифт, заданный по умолчанию. Обычно оно содержит список взаимозаменяемых шрифтов, разделенных запятыми, принадлежащих одному семейству. Если имя шрифта состоит более чем из одного слова, то его нужно указывать в кавычках. В конце списка обычно указывается название семейства:
body
Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:
- Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента )
- Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри .
- Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри .
- И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.
Название документа p.exserif < font-family: "Times New Roman", Times, serif; >p.exsansserifCSS свойство font-family
Абзац использующий шрифт Times New Roman.
Абзац использующий шрифт Arial.
Примечание: при выборе только одного определенного шрифта важно понимать то, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. Если шрифт не будет найден, то текст будет отображен шрифтом «Times New Roman», который задан по умолчанию во всех браузерах.
С этой темой смотрят:
- Отступ текста в CSS
- Выравнивание текста в CSS
- Цвет и тень текста в CSS
- CSS стиль и размер шрифта
- Стандартные (безопасные) шрифты
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
Каскадные таблицы стилей CSS советы & приёмы
После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.
Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.
Стили шрифтов
Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.
Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.
Навигация по сайту
Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy
Created 17 Jan 2001;
Last updated Ср 06 янв 2021 05:40:49
Как подключить шрифт на сайт в CSS
Подключение нового шрифта на сайт не самая простая задача. Где выбрать, скачать и как подключить шрифт на сайт в CSS? В этой статье мы покажем один из самых удобных способов установки и подключения шрифта на сайт.
Как подключить шрифт на сайт в CSS
Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках h1 нашего сайта. Для этого выполняем следующие действия:
В корневой папке сайта создаём папку fonts и копируем туда наш Raleway.ttf;
В самом низу файла стилей style.css прописываем правило:
@font-face // название шрифта(чтобы не запутаться лучше указать название папки со шрифтом)
font-family: «RalewayRegular»;
// адрес шрифта и тип
src: url(«../fonts/RalewayRegular.ttf») format(«truetype»);
font-style: normal;
font-weight: normal;
>
А также в файле стилей задаём правило для всех заголовков:
Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.
Если вы хотите подключить несколько шрифтов или их начертаний, то просто добавьте их под предыдущим:
@font-face font-family: «RalewayRegular»;
src: url(«../fonts/RalewayRegular.ttf») format(«truetype»);
font-style: normal;
font-weight: normal;
>
@font-face font-family: «RalewayBold»;
src: url(«../fonts/RalewayBold.ttf») format(«truetype»);
font-style: normal;
font-weight: normal;
>
Вы могли заметить, что есть разные форматы шрифтов — .ttf, .woff, .eot, .svg и другие. Еще существует формат для современных браузеров .woff2, но о нем мы расскажем в одной из следующих статей.
Обычно каждый шрифт подключается сразу в 3-х форматах. Это сделано, чтобы шрифт правильно отображался во всех браузерах в том числе и старых. Выглядит это так:
@font-face
font-family: «RalewayRegular»;
src: url(«../fonts/RalewayRegular/RalewayRegular.eot»);
src: url(«../fonts/RalewayRegular/RalewayRegular.eot?#iefix») format(«embedded-opentype»),
url(«../fonts/RalewayRegular/RalewayRegular.woff») format(«woff»),
url(«../fonts/RalewayRegular/RalewayRegular.ttf») format(«truetype»);
font-style: normal;
font-weight: normal;
>
Здесь следует обратить внимание на порядок подключения — это важно!
Не будем вдаваться в подробности, просто запомните вид этой конструкции.
Если у вас есть шрифт только в одном формате, то воспользуйтесь различными конверторами шрифтов. Вот один из них.
Как подключить шрифт с помощью различных сервисов
Также можно воспользоваться сервисом fonts4web для подключения шрифтов:
- Находим нужный шрифт или выбираем из уже имеющихся;
- Скачиваем архив и добавляем его в папку fonts;
- Копируем уже готовый CSS-код для файла style.css;
Самый простой способ подключения шрифтов
- Заходим на сайт https://fonts.google.com;
- Находим нужный шрифт или несколько:
- Нажимаем на красный круг в правом верхнем углу в блоке шрифта;
- Внизу нажимаем на появившееся чёрное поле:
- При желании кастомизируем шрифт;
- Копируем ссылку и вставляем ее в тег head:
Как подключить шрифт к шаблону Moguta.CMS
- Через хостинг загрузить необходимый шрифт в папку /mg-templates/mg-default/fonts;
- Через административную панель открыть файл стилей;
- Прописать в самом верху новый шрифт;
- Ниже в файле стилей найти интересующий нас элемент и задать или изменить свойство font-family: *название нового шрифта* ;
Как добавить ссылку с Google Fonts в шаблон Moguta CMS
- Заходим Настройки—>Шаблон—>template.php;
- Перед закрывающим тегом head вставляем ссылку сгенерированную гуглом;
- Затем в файле стилей задаём новый шрифт к нужному элементу:
Теперь вы знаете как подключить шрифт на сайт в CSS и не только. Мы с радостью ответим на все ваши вопросы в группе или комментариях.
Как подключить шрифт в css
можете сами себя проверять, клик на этот значок и потом курсор наводите на элемент, появляется подсказка
Отслеживать
ответ дан 18 мая 2022 в 18:54
Александр Сычёв Александр Сычёв
2,129 3 3 золотых знака 5 5 серебряных знаков 18 18 бронзовых знаков
- html
- css
- шрифты
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.