Какие бывают шрифты 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 Fonts

Choosing the right font for your website is important!

Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website.

The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
3. Monospace fonts — here all the letters have the same fixed width. They create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Difference Between Serif and Sans-serif Fonts

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Some Font Examples

Generic Font Family	Examples of Font Names
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

Note: If the font name is more than one word, it must be in quotation marks, like: «Times New Roman».

Tip: The font-family property should hold several font names as a «fallback» system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma. Read more about fallback fonts in the next chapter.

Example

Specify some different fonts for three paragraphs:

.p1 <
font-family: «Times New Roman», Times, serif;
>

.p2 font-family: Arial, Helvetica, sans-serif;
>

.p3 font-family: «Lucida Console», «Courier New», monospace;
>

Источник

Виды шрифтов в 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. Детальнее о наших курсах у нас на сайте здесь.

Источник