freeCodeCamp

4.5 KiB

Raw Blame History

title	localeTitle
Fonts	Шрифты

Шрифты

Свойства шрифта CSS определяют семейство шрифтов, вес, размер, вариант, высоту строки и стиль текста.

Семейство шрифтов

Семейство шрифтов текста просто устанавливается с использованием свойства font-family .

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

p { 
    font-family: "Times New Roman", Times, serif; 
 }

В приведенном выше примере «Times New Roman» является шрифта, а «serif» - это , В качестве резервной копии используются общие имена механизм сохранения стиля, если фамилия недоступна. Общее имя всегда должно быть последним элементом в списке имен семейств шрифтов. общий фамилии - засечка, без засечек, моноширины, скоропись, фэнтези, система-ui.

Стиль шрифта

Свойство font-style можно использовать для указания курсивного текста.

Это свойство имеет 3 значения:

normal - текст отображается нормально
курсив - текст, выделенный курсивом
наклонный - текст показан наклонным

.normal { 
    font-style: normal; 
 } 
 
 .italic { 
    font-style: italic; 
 } 
 
 .oblique { 
    font-style: oblique; 
 }

Размер шрифта

Свойство font-size задает размер текста.

Существуют различные типы значений размера шрифта:

px (pixels) - размер текста по умолчанию 16px
em - 1em = текущий размер шрифта, поэтому 1em = 16px (рекомендуется W3C)
small , medium , large - известные как абсолютные величины
% - проценты

.with-pixels { 
    font-size: 14px; 
 } 
 
 .with-ems { 
    font-size: 0.875em; 
 } 
 
 .with-absolute { 
    font-size: large; 
 } 
 
 .with-percentage { 
    font-size: 80%; 
 }

Вес шрифта

Свойство font-weight определяет вес (или смелость) шрифта. Принимает ключевые слова ( bold , normal , bolder , lighter ) или числовые ключевые слова ( 100 , 200 , 300 , 400 и т. Д.). 400 - это то же самое, что и в normal .

p { 
   font-weight: bold 
 }

Для отптимизации CSS используют вариант сокращенной записи

font: italic small-caps lighter 14px Georgia, serif;

Отзывчивость шрифта

Размер текста можно установить с помощью блока vw (ширина видового экрана). Таким образом, размер текста будет соответствовать размеру окна браузера.

<h1 style="font-size:10vw">Hello World</h1>

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Вариант шрифта

Свойство font-variant указывает, должен ли текст отображаться в шрифте с малыми шапками (где все строчные буквы преобразуются в прописные буквы, причем они отображаются в меньшем размере шрифта, чем оригинальные заглавные буквы в тексте).

p.small { 
  font-variant: small-caps; 
 }

4.5 KiB Raw Blame History Unescape Escape