Как установить стиль шрифта. CSS-свойство font

Свойство font используется для оформления текста на сайте. Оно позволяет задавать различные атрибуты шрифта: размер, начертание, жирность, стиль и цвет.

Свойство в общем виде записывается так:

font-family — устанавливает семейство шрифтов.

font-style — задаёт стиль шрифта.

font-variant — определяет вариант шрифта.

font-weight — задаёт жирность шрифта.

font-size — указывает размер шрифта.

line-height — задаёт высоту строки.

Значения и примеры использования

Font-family

В значении свойства font-family указывается список названий шрифтов, перечисленных через запятую. В начале списка располагают самый желаемый шрифт, затем альтернативный, а в самом конце списка — общий тип шрифта. Браузер проходит по списку слева направо и использует первый найденный в системе или на сайте шрифт.

Font-style

Можно выбрать один из стилей оформления текста: обычный шрифт normal , курсив italic , наклонный oblique .

Font-variant

У свойства font-variant несколько значений:

small-caps — все строчные символы отображаются как заглавные уменьшенного размера.

Font-weight

Насыщенность шрифта можно определить числовым значением от 100 до 900 или ключевым словом, например, обычный шрифт normal , полужирный bold .

Возможные значения font-weight :

• 100: Thin;
• 200: Extra Light (Ultra Light);
• 300: Light;
• 400: Normal;
• 500: Medium;
• 600: Semi Bold (Demi Bold);
• 700: Bold;
• 800: Extra Bold (Ultra Bold);
• 900: Black (Heavy).

Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700).

Font-size

Размер шрифта font-size измеряется в пикселях ( px ), процентах, относительных ( em , rem ) или абсолютных единицах ( pt , cm , mm ).

Абсолютную величину шрифта можно задавать не только в пикселях, пунктах или других величинах, но и особыми ключевыми словами: xx-small , x-small , small , medium , large , x-large и xx-large . Подробно об этих ключевых словах можно узнать в спецификации.

Line-height

Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. По умолчанию line-height имеет значение normal . Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта.

Наследование

Свойство font наследуется от родительского элемента на его дочерние элементы.

Нюансы

✅ Если заданы различные атрибуты шрифта в разных правилах для одного элемента, последнее применённое свойство переопределит предыдущие.

✅ Если указанное семейство шрифтов не доступно на устройстве пользователя, браузер будет искать и использовать следующий указанный шрифт из списка или использовать шрифт по умолчанию.

⭐ Свойство font поддерживается современными браузерами. Актуальная информация — на caniuse.com.

Чем заменить свойство font

Если нужно управлять отдельными атрибутами шрифта, например, размером, начертанием, жирностью, можно использовать соответствующие отдельные свойства — font-size , font-style и font-weight .

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Как оформить текст: 11 главных CSS-свойств

У любого текстового элемента есть свои стили по умолчанию. Заголовки крупные и жирные, текст в абзацах нормального размера и начертания, а ссылки обычно синие и подчёркнутые снизу.

Каждый из этих элементов можно стилизовать по-своему, например, поменять размер, начертание или цвет. Давайте посмотрим, как это сделать.

💡 Для каждого стиля мы подготовили пример в CodePen — попробуйте поменять значения и посмотрите, как изменится текст.

Сменить шрифт

Чтобы изменить шрифт элемента, используйте CSS-свойство font-family :

Первым указывается шрифт, который вы хотите добавить. После него через запятую идут альтернативные шрифты. Например, если на компьютере у посетителя сайта не установлен шрифт Roboto, браузер использует шрифт Arial.

Изменить цвет и размер текста

Цвет текста задаётся с помощью свойства color . Оно принимает значения в различных форматах: можно написать название цвета ( red , blue ), шестнадцатеричное значение ( #ff0000 , #00f ) или функцию rgb() , чтобы задать цвет с помощью трёх чисел.

Размер текста меняется свойством font-size . Оно принимает значения в пикселях ( px ), процентах ( % ) и других единицах измерения.

Добавить жирность

Свойство font-weight задаёт жирность текста. Оно принимает два вида значений.

Численные: от 100 до 900 . Например, 400 — обычный шрифт, а 700 — полужирный.

Ключевые слова: normal — обычный шрифт, bold — полужирный, bolder — жирнее, чем текущий, lighter — менее жирный шрифт по сравнению с текущим.

See the Pen Untitled by Feizerr on CodePen.

Сделать текст курсивным

Для этого есть свойство font-style . По умолчанию у него стоит значение normal , то есть текст обычный, без курсива. Чтобы поменять начертание, используйте:

Оба значения создают похожий эффект — текст выглядит курсивным, но есть и разница. Если очень упростить, то italic и oblique немного отличаются в начертании. А ещё не у всех шрифтов есть специальная курсивная версия. В таких случаях oblique делает текст похожим на курсив.

See the Pen Как сделать курсивный текст by Feizerr on CodePen.

Преобразовать текст

Свойство text-transform меняет регистр текста. Оно принимает значения:

• none — без изменений, значение по умолчанию;
• uppercase — все буквы становятся прописными;
• lowercase — все буквы становятся строчными;
• capitalize — первая буква каждого слова находится в верхнем регистре.

See the Pen Как изменить text-decoration by Feizerr on CodePen.

Добавить подчёркивание

Свойство text-decoration добавляет тексту декоративные эффекты:

• overline создаёт линию над текстом,
• line-through делает текст зачёркнутым,
• underline добавляет подчёркивание.

По умолчанию у свойства стоит значение none — без оформления.

See the Pen Как добавить подчёркивание by Feizerr on CodePen.

Создать тень

Свойство text-shadow добавляет тексту тень. Оно принимает значение в таком формате:

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) /*смещение по горизонтали, смещение по вертикали, радиус размытия, цвет тени */ 

See the Pen Как добавить тень тексту by Feizerr on CodePen.

Выровнять текст

Свойство text-align выравнивает текст по горизонтали. Оно принимает значения:

• left — влево;
• right — вправо;
• center — по центру;
• justify — выравнивание по ширине.

See the Pen Как выровнять текст by Feizerr on CodePen.

Изменить высоту строки и межбуквенное расстояние

Свойство line-height устанавливает высоту строки, указывая множитель относительно размера шрифта. Свойство letter-spacing управляет расстоянием между символами.

See the Pen Как изменить высоту строки by Feizerr on CodePen.

Нюансы

• У некоторых шрифтов нет жирного и курсивного варианта.
• Свойство text-shadow делает текст эффектным, но слишком насыщенные тени могут усложнить чтение текста или создать плохой контраст.
• Слишком большое или маленькое значение line-height и letter-spacing может нарушить интервалы между буквами и строками.
• При изменении размера шрифта ( font-size ) следует учитывать, что очень мелкий и крупный текст может плохо отображаться или стать нечитабельным.

Рекомендации

Тестируйте вёрстку. Проверяйте, как шрифты отображаются на разных устройствах и браузерах. Некоторые шрифты могут отображаться по-разному на разных платформах.

Используйте стили осторожно. Смена регистра, курсив и жирный текст помогают выделить важный контент, расставляют акценты в тексте. Используйте их умеренно, потому что крупные фрагменты текста, написанного капсом или курсивом, лишь отвлекают пользователя. Акценты теряются, и текст выглядит неаккуратно.

Помните о доступности. Используйте подходящие значения font-weight — слишком мелкий или крупный текст плохо читается. Подбирайте контрастные цвета для текстов.

Используйте несколько шрифтов. Некоторые шрифты могут быть недоступны, поэтому важно указывать альтернативные варианты.

Соблюдайте авторское право. У каждого шрифта есть лицензия, которая описывает, в каких случаях можно использовать шрифт, а в каких нельзя. Например, какие-то варианты нельзя использовать в коммерческих проектах, а какие-то предназначены только для веба или печати. Поэтому нужно внимательно читать лицензию перед загрузкой понравившегося шрифта — вдруг он не подходит под ваши цели.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Оформление текста в CSS

Положительное восприятие веб-сайта пользователем зависит не только от смыслового содержания текста, но и от его оформления.

Существует вероятность, что человек не станет читать даже очень грамотно и хорошо написанный, но не оформленный или плохо оформленный текст, поэтому следует уделить особое внимание вопросу удобочитаемости.

CSS предоставляет довольно обширные возможности, позволяющие кардинально изменить внешний вид вашего текста с помощью различных цветовых решений, размера строки и т.д.

Визуальное оформление текста в CSS

В CSS оформление текста осуществляется с помощью параметра text-decoration , который может принимать следующие значения:

• blink — мерцающий текст;
• none — значение по умолчанию, оформление отсутствует;
• overline — линия расположена над текстом;
• underline — подчеркнутый линией текст;
• line-through — текст, зачеркнутый линией;
• inherit — в данном случае text-decoration наследует значение родительского элемента.

Текст ссылки Текст ссылки Текст ссылки Текст ссылки Текст ссылки

В окне браузера данный пример будет выглядеть следующим образом:

Цвет текста в CSS

Изменить цвет текста, расположенного внутри HTML элементов можно с помощью CSS свойства color .

Способы задания могут быть следующими:

• При помощи названия цвета (например, red, green, blue, white);
• При помощи значения RGB (например, rgb(221,102,212));
• При помощи шестнадцатеричного цветового значения (например, #ff00aa).

    
Текст 1 Текст 2 Текст 2
 
Текст 2 Текст 2 Текст 2
 
Текст 3 Текст 3 Текст 3
  

Визуальное оформление, реализованное с помощью приведенного выше кода, выглядит следующим образом:

Размер текста в CSS

CSS свойство font-size позволяет задать размер текста.

Единицами измерения могут быть:

• Пиксели (например, 14px);
• Пункты (например, 20pt);
• Проценты (например, 50%);
• Ключевые слова small, large и т.п.

  p p.big 
Текстовая строка размером 14 пикселей.
 

Визуальное представление приведенного выше кода выглядит следующим образом:

Отступ текста в CSS
Изначальная концепция HTML не предполагала отступы, выделяя абзацы лишь вертикальным расстоянием, а множество пробелов перед строкой браузер преобразует в один.
Однако в CSS данная проблема решается с помощью свойства text-indent .
   
Текст без отступа.
 
Текст с отступом слева 110 пикселей
 
 
Визуальное отображение кода:
 
 
Жирный и наклонный текст в CSS
 
С помощью атрибута CSS font-weight определяется жирность шрифта.
 
Данный атрибут может принимать следующие значения:
 
 
normal — обычный;
 
lighter — более светлый;
 
bold — жирный;
 
от 100 до 900, где 100 — самый тонкий шрифт, а 900 — самый толстый.
 
 
    
текст текст текст текст
 
текст текст текст текст
 
текст текст текст текст
  
 
В браузере данный код выглядит следующим образом:
 
 
Тень текста в CSS
 
CSS свойство text-shadow позволяет задать тексту тень. Данное свойство содержит в себе целый перечень эффектов: цвет, смещение вправо, смещение вниз, радиус пятна тени.
 
В том случае, если цвет тени не задан, используется цвет текста.
 
    
Текст с тенью
 
 
Представленный выше код в браузере выглядит следующим образом:
 
 
Выравнивание текста в CSS
 
Выравнивание текста по горизонтали задаётся свойством text-align , которое может принимать следующие значения:
 
 
left — выравнивание по левому краю;
 
right — выравнивание по правому краю;
 
center — выравнивание по центру;
 
justify — выравнивание по всей ширине.
 
 
С помощью свойства vertical-align выполняется выравнивание текста по вертикали.
 
Данное свойство может принимать следующие значения:
 
 
baseline — выравнивание линии элемента по базовой линии родительского элемента;
 
middle — выравнивание средней элементной точки по базовой линии родительского элемента;
 
text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
 
top — выравнивание верха элемента по верхней части самого высокого элемента строки;
 
sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.
 
 
   
 
Текст 1
 
Текст 2
 
Текст 3
 
 
 
 
Таким образом, возможности CSS позволяют произвести практически любые манипуляции с оформлением текста на веб-сайте для улучшения его восприятия пользователями.
 
Желаем удачи в изучении веб-дизайна!
 
Источник