Все типы шрифтов css

CSS/Шрифты и текст

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

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

p  font-family: Verdana, Helvetica, Arial, sans-serif; > 

Существуют 5 семейств шрифтов:

1. serif — шрифты с засечками
2. sans-serif — шрифты без засечек
3. monospace — моноширинные
4. cursive — курсивные
5. fantasy — декоративные

Пример, как выглядят такие шрифты:

serif sans-serif monospace cursive fantasy

font-style [ править ]

Существуют три значения этого свойства:

Браузеры последний стиль обычно отображают как курсивный

font-variant [ править ]

1. normal — обычный (значение по умолчанию)
2. small-caps — капитель, то есть все строчные символы становятся уменьшенными заглавными

font-weight [ править ]

Это свойство устанавливает вес (насыщенность) шрифта.

1. 100
2. 200
3. 300
4. 400 или normal (значение по умолчанию)
5. 500
6. 600
7. 700 или bold
8. 800
9. 900

font-size [ править ]

Возможные значения этого свойства:

1. абсолютные константы: xx-small, x-small, small, medium (значение по умолчанию), large, x-large, xx-large
2. относительные константы: smaller, larger
3. абсолютные и относительные единицы измерения CSS

line-height [ править ]

Межстрочный интервал, часто применяется вместе с font-size

1. normal — нормальное значение (по умолчанию)
2. number — число (больше либо равно 0), на которое умножается текущий размер шрифта
3. length — фиксированное значение в единицах измерения CSS
4. % — проценты от текущего размера шрифта

font [ править ]

Это сокращённая форма записи свойств шрифта. Необходимо лишь указать font-size и font-family. Остальные свойства шрифта указываются при желании

p  font: bold italic small-caps 150%/1.4 Arial, Helvetica, sans-serif; > 

Также можно указывать ключевые слова: caption, icon, menu, message-box, small-caption, status-bar

web-шрифты [ править ]

Свойство, которое позволяет отображать на экране компьютера любой шрифт. Впервые появилось в CSS2. Используется правило @font-face

Шрифты бывают следующих типов:

1. eot — embedded opentype (.eot)
2. ttf — truetype (.ttf)
3. otf — opentype (.ttf, .otf)
4. svg — svg-шрифты (.svg, .svgz)
5. woff — web open font format (.woff)

Текст [ править ]

text-align [ править ]

1. left — по левому краю (значение по умолчанию)
2. right — по правому краю
3. center — по центру
4. justify — по ширине

letter-spacing/word-spacing [ править ]

Интервал между буквами/словами

1. normal — нормальное значение (по умолчанию)
2. length — значение в единицах измерения CSS (допускаются отрицательные значения)

text-decoration [ править ]

1. underline — подчёркнутый текст
2. overline — линия над текстом
3. line-through — перечёркнутый текст
4. blink — мигающий текст
5. none — отмена всех эффектов (значение по умолчанию)

text-indent [ править ]

1. length — фиксированное значение в единицах измерения CSS (значение по умолчанию равно 0)
2. % — проценты от ширины строки

text-transform [ править ]

1. none — нет трансформации (значение по умолчанию)
2. uppercase — преобразование всех строчных символов в заглавные
3. lowercase — преобразование всех заглавных символов в строчные
4. capitalize — преобразование первой буквы каждого слова в заглавную

vertical-align [ править ]

Выравнивание элемента по вертикали

Применяется только к строчным элементам и к ячейкам таблицы

Возможные значения для строчных элементов:

1. baseline — по базовой линии (значение по умолчанию)
2. sub — нижний индекс
3. super — верхний индекс
4. top — верх элемента выравнивается с самым высоким элементом строки
5. text-top — верх элемента выравнивается с верхом шрифта родительского элемента
6. middle — по середине
7. bottom — по нижней части
8. text-bottom — низ элемента выравнивается с низом шрифта родительского элемента
9. проценты
10. величины CSS

1. baseline — содержимое ячейки по базовой линии (значение по умолчанию)
2. top — по верхнему краю
3. bottom — по нижнему краю
4. middle — по середине ячейки таблицы

Для строчных элементов это свойство выравнивает сам элемент, а не его содержимое. Для ячеек таблицы — наоборот

white-space [ править ]

1. normal — обычное поведение (значение по умолчанию)
2. pre — пробелы и переносы учитываются
3. nowrap — пробелы и переносы не учитываются
4. pre-wrap — пробелы учитываются, текст переносится
5. pre-line — пробелы не учитываются, текст переносится

text-shadow [ править ]

Добавление тени к тексту (CSS3)

1. h-shadow — смещение тени по горизонтали
2. v-shadow — смещение тени по вертикали
3. blur — радиус размытия тени
4. color — цвет тени
5. none — нет тени (значение по умолчанию)

text-overflow [ править ]

Видимость текста, если он не влезает в ширину блока (CSS3)

1. clip — текст обрезается по размеру блока (значение по умолчанию)
2. ellipsis — текст обрезается с добавлением многоточия

Источник

Виды шрифтов в CSS

Привет! В этой статье мы продолжим знакомство с CSS, а именно поговорим о шрифтах.

Какие есть виды шрифтов

Шрифты — важная часть вида веб-страницы. Существует множество различных, не похожих друг на друга шрифтов.

Тем не менее, все шрифты можно разделить на 4 группы:

Группа 1 — с засечками (serif)

Давайте посмотрим на следующую картинку:

Слева мы видим шрифт без засечек, справа — с засечками.

Шрифты с засечками по-английски называются «serif» (англ. «serif» — «засечка», «выступ», «штрих»). К таким шрифтам относятся, например:

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

Группа 2 — шрифты без засечек (sans-serif)

Шрифты без засечек (‘»sans-serif», от фр. «sans» — «без», и англ. «serif» — «засечка»).

К шрифтам без засечек относятся, например:

Шрифты без засечек часто используются для заголовков .

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

Группа 3 — рукописные шрифты (handwritten)

Вот Вам пример рукописного шрифта:

Рукописные шрифты обычно используются для декоративных элементо в на страницах.

Группа 4 — моноширинные шрифты

Моноширинные шрифты — это шрифты, в которых ширина всех букв одинаковая.

К моноширным шрифтам относятся, например:

Моноширными шрифтами часто пишется программный код.

Например, если Вы пользуетесь текстовым редактором Sublime Text, тогда знайте, что когда Вы набираете код в Sublime, Вы его набираете моноширным шрифтом 🙂

Зачем front-end разработчику знать типы шрифтов?

Действительно — зачем? Разве мы как разработчики не должны просто подключить шрифт, который указан в задании?

Все дело в том, что может так получиться, что человек зашел к Вам на сайт, а при разработке сайта использовали такой шрифт, который по тем или иным причинам не установлен у него на компьютере. И все, беда. Чтобы перестраховаться от таких ситуаций необходимо использовать такое понятие как fonts fallback или просто «фоллбэк».

То есть этой строчкой мы указали, что:

• Все параграфы должны отображаться шрифтом Times New Roman.
• Если же вдруг у пользователя нет такого шрифта на компьютере, тогда все тексты параграфов необходимо отображать шрифтом Georgia.
• Если же и этот шрифт не найдется на компьютере пользователя, тогда отображать любым стандартным шрифтом, относящимся к группе шрифтов с засечками (serif).

Как видите, fallback читается браузером слева — направо.

Выделяют 4 группы шрифтов:

Front-end разработчику необходимо знать какие есть виды шрифтов, например, для написания fallback.

Надеемся, данная статья была Вам полезна и теперь Вы знаете чуть больше о видах шрифтов 😉 Читайте дальше наши статьи или приходите учиться к нам на курсы по front-end. Детальнее о наших курсах у нас на сайте здесь.

Источник

Все типы шрифтов css

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

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

В данном случае устанавливается шрифт Arial.

Шрифт свойства font-family будет работать, только если у пользователя на локальном компьютере имеется такой же шрифт. По этой причине нередко выбираются стандартные шрифты, которые широко распространены, как Arial, Verdana и т.д.

Также нередко применяется практика нескольких шрифтов:

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

Если название шрифта состоит из нескольких слов, например, Times New Roman, то все название заключается в кавычки:

Кроме конкретных стилей также могут использоваться общие универсальные шрифты, задаваемые с помощью значений sans-serif и serif :

Так, если ни Arial, ни Verdana не поддерживаются на компьютере пользователя, то используется sans-serif — универсальный шрифт без засечек.

Типы шрифтов

Шрифты с засечками

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

Распространенные шрифты с засечками: Times, Times New Roman, Georgia, Garamond. Универсальный обобщенный шрифт с засечками представляет значение serif .

Шрифты без засечек

В отличие от шрифтов с засечками шрифты из этой группы не имеют засечек. Наиболее распространенные шрифты этой группы: Arial, Helvetica, Verdana.

Моноширинные шрифты

Моноширинный шрифт преимущественно применяется для отображения программного кода и не предназначен для вывода стандартного текста статей. Свое название эти шрифты получили от того, что каждая буква в таком шрифте имеет одинаковую ширину. Примеры подобных шрифтов: Courier, Courier New, Consolas, Lucida Console.

Толщина шрифта

Свойство font-weight задает толщину шрифта. Оно может принимать 9 числовых значений: 100, 200, 300, 400. 900. 100 — очень тонкий шрифт, 900 — очень плотный шрифт.

В реальности чаще для этого свойства используют два значения: normal (нежирный обычный текст) и bold (полужирный шрифт):

font-weight: normal; font-weight: bold;

Курсив

Свойство font-style позволяет выделить текст курсивом. Для этого используется значение italic :

Если надо отменить курсив, то применяется значение normal :

Цвет шрифта

Свойство color устанавливает цвет шрифта:

Источник