Как изменить шрифт в css
Изменить используемый шрифт позволяет CSS свойство font-family . Это свойство принимает через запятую список шрифтов, которые мы хотим использовать. Когда указано несколько шрифтов, то браузер будет считывать их слева направо до первого шрифта, который он сможет использовать.
.font font-family: Georgia, "Times New Roman"; > Если у пользователя в системе есть шрифт Georgia, то будет применен именно он. В случае его отсутствия браузер будет искать шрифт Times New Roman. Если же и Times New Roman не установлен, то браузер возьмёт шрифт из своих стандартных настроек.
Чтобы в этом случае не «сломалась» визуальная составляющая сайта, можно указать основное семейство шрифтов. То есть, если ни один из шрифтов не будет найден, браузер подберет системный шрифт из указанного семейства.
Основных семейств три:
- serif шрифты с засечками
- sans-serif шрифты без засечек
- monospace все символы имеют одинаковую ширину, обычно такие шрифты используются в редакторах кода и терминалах.
.font font-family: Georgia, "Times New Roman", serif; > Так как Georgia и Times New Roman относятся к семейству шрифтов с засечками, то укажем serif .
Свойства текста
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег , задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Свойства шрифта
Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-family | имя шрифта | Задает список шрифтов | P |
| font-style | normal italic oblique |
Нормальный шрифт Курсив Наклонный шрифт |
P |
| font-variant | normal small-caps |
Капитель (особые прописные буквы) | P |
| font-weight | normal lighter bold bolder 100–900 |
Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный |
P |
| font-size | normal pt px % |
нормальный размер пункты пикселы проценты |
font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
В примере 1 показано использование параметров при работе со шрифтами.
Пример 1. Задание свойств шрифта с помощью CSS
Шрифт Заголовок
Обычный текст
Ниже приведен результат данного примера (рис. 1).
Рис. 1. Вид текста после применения стилей
В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.
| Пример | Пример | Пример | Пример | Пример |
| font-family: Verdana, sans-serif; font-size: 120%; font-weight: light | font-size: large; font-weight: bold | font-family: Arial, sans-serif; font-size: x-small; font-weight: bold | font-variant: small-caps | font-style: italic; font-weight: bold |
Свойства текста
Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| line-height | normal множитель значение % |
Интерлиньяж (межстрочный интервал) | line-height: normal line-height: 1.5 line-height: 12px line-height: 120% |
| text-decoration | none underline overline line-through blink |
Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста |
text-decoration: none |
| text-transform | none capitalize uppercase lowercase |
Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные |
text-transform: capitalize |
| text-align | left right center justify |
Выравнивание текста | text-align: justify |
| text-indent | значение % |
Отступ первой строки | text-indent: 15px; text-indent: 10% |
Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.
| Пример: и это все о нем | Пример: текст по центру | Пример: Это не ссылка, а просто текст | Пример: отступ первой строки | Пример: полуторный межстрочный интервал |
| text-transform: capitalize | text-align:center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |
font — style
Определяет начертание шрифта: обычное, курсивное или наклонное .
Пример
Скопировать ссылку «Пример» Скопировано
Попробуем выделить курсивом текст всего абзаца:
Текст ниже мы написали курсивом
Этот текст написан курсивом. А мог быть написан наклонным шрифтом, но вы всё равно бы это не отличили.body> h1>Текст ниже мы написали курсивомh1> p> Этот текст написан курсивом. А мог быть написан наклонным шрифтом, но вы всё равно бы это не отличили. p> body>
body font-family: "Roboto", sans-serif;>p font-style: italic;>body font-family: "Roboto", sans-serif; > p font-style: italic; >
Как понять
Скопировать ссылку «Как понять» Скопировано
У большинства шрифтов есть несколько вариантов написания: стандартный, курсивный или жирный. Чтобы задать курсивное написание, используй font — style : italic .
Ещё есть наклонный шрифт, который задаётся через font — style : oblique . Он очень похож на курсив, но по сути, это его имитация, которую используют, если у выбранного шрифта нет курсивного написания. Нужно помнить, что oblique может выглядеть хуже по качеству, чем курсивный шрифт. Это особенно заметно при печати страницы.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Для font — style можно выбрать одно из четырёх значений:
- normal — обычное начертание текста (значение по умолчанию).
- italic — курсивное начертание.
- oblique — наклонное начертание, которое можно использовать, если у шрифта нет курсивного варианта начертания.
- oblique — 20deg — наклонное начертание с указанием угла наклона. Допустимо указать от -90deg до 90deg. При этом шрифт будет наклоняться вперёд или назад на указанное количество градусов. Почти нигде не поддерживается, уточняйте поддержку на Can I use перед использованием.
.normal font-style: normal;> .italic font-style: italic;> .oblique font-style: oblique;> .oblique-deg font-style: oblique -20deg;>.normal font-style: normal; > .italic font-style: italic; > .oblique font-style: oblique; > .oblique-deg font-style: oblique -20deg; >
На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
�� Не стоит писать большие части текста курсивом — это сильно усложняет чтение.
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 – 2024 © puzzleweb.ru | razumnikum.ru