Serif Family

CSS-свойства для шрифтов

Шрифт в английском языке переводится как font или type. Первый вариант перевода мы будем использовать для различных css-свойств, которые позволяют управлять шрифтами на html-странице, а второй, как правило, обозначает инструмент Текст в Photoshop или в Figma, и формирует такой известный термин, как типографика (typography), т.е. наука о шрифтах.

Рассмотрим шрифтовые свойства в CSS.

1. Свойство color — цвет шрифта
2. Свойство font-family — семейство шрифта
3. Свойство font-size — размер шрифта
4. Свойство line-height — высота строки
5. Свойство font-weight — насыщенность, или жирность шрифта
6. Свойство font-style — начертание, или наклон шрифта
7. Свойство font-synthesis
8. Свойство font-variant — вид строчных букв
9. Свойство font — составное свойство для шрифта
10. Свойство font-stretch — ширина шрифта
11. Свойство font-size-adjust — относительный размер шрифта

Свойство color — цвет шрифта

Свойство color меняет цвет шрифта со стандартного черного на любой заданный вами или на прозрачный ( transparent ).

color : #ff0000 | #f00 | red |rgb ( 255,0,0 ) | rgba ( 255,0,0, 0.5 ) | hsl ( 0, 100%, 50% ) | hsla ( 0, 100%, 50%, 0.76 ) | transparent

Цвет текста влияет не только на сам текст, но и на

Наследование свойств. Значение inherit и initial

Должно быть, вы заметили, что в примере есть абзац с текстом родительского элемента, для которого вы можете задать цвет, нажав на одну из ссылок. После этого весь текст примера окрасится в соответствующий цвет. В этом и заключается наследование css-свойств. Если какое-либо свойство назначено для родительского элемента, оно, как правило, касается и вложенных, или дочерних элементов. Для дочерних элементов можно назначить другие значения наследуемых свойств, но в том случае, если вы хотите использовать значение свойства родительского элемента, следует установить значение inherit . Учтите, что использовать его просто так не стоит. Это значение имеет смысл в том случае, если для дочерних элементов назначалось какое-то другое значение, но в какой-то момент нужно вернуться к тому значению, которое было у родителя.

Значение initial возвращает элементу значение по умолчанию, которое установлено настройками браузера или его таблицей стилей.

Свойство font-family — семейство шрифта

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

Если в имени шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта. То есть шрифт Times New Roman, состоящий из 3-х слов с пробелами, необходимо указать, как ‘ Times New Roman’. Кавычки могут быть одинарными или двойными, это не меет значения, главное, чтобы они были одинаковыми

Свойство font-family наследуется от родительского элемента, поэтому можно указывать его для body , чтобы определить в качестве основного для текста страницы.

font-family
Значения:	Описание
family-name	Название (имя) семейства шрифтов, например, Lato , ‘ Times New Roman’ , «Courier New» , Tahoma , Arial . Рекомендуется указывать вместе с базовым семейством.
generic — шрифт-псевдоним	Шрифты-псевдонимы, или базовое семейство шрифта — это общее название шрифтов, которые имеют общие характеристики: засечки или наклонное начертание. Бывают 5 видов: Шрифты с засечками — serif (Times New Roman, Times, Garamond, Georgia) Рубленые шрифты — sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Моноширинные шрифты — monospace (Courier, Courier New, Andele Mono) Рукописные шрифты — cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Аллегорические шрифты — fantasy (Western, Woodblock, Klingon)
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Варианты записи font-family :

Источник

CSS Font Family

Here, font-family sets the font face of h1 element to Courier , monospace .

CSS Font Family Types

Font families are divided into two types:

• Generic family: Refers to the category of the fonts that share similar design characteristics. For example, Serif , sans-serif , Cursive , etc.
• Font family: Refers to the specific font family name like Helvetica , Arial , Georgia , etc.

CSS Font Family Syntax

The syntax of the font-family property is as follows:

font-family: family-name | generic-family | initial | inherit;

• family-name : refers to the specific font family like Arial , Helvetica , etc
• generic-family : refers to the broader category of font families with similar design characteristics like serif , sans-serif , etc
• initial : sets font-family to the default value
• inherit : inherits font-family from the parent

In the above example, the browser will first try to render Source Sans Pro . If it is not available, the browser will try to render Arial . And if it is also not available, the browser will finally use a font from the sans-serif family.

The multiple font family names should be separated by a comma and if the font family name consists of multiple words then it should be enclosed in double quotation marks.

CSS Generic Font Family Types

There are five generic families in CSS which refer to the broader category of font families with similar design characteristics.

Serif

Serif fonts have a small line or stroke at the end of each character. They are used in traditional printed materials like books, magazines, etc, and in formal documents like resumes or business letters. For example,

        
Serif font families
 
Times New Roman font
 
Georgia font
  

h1 < font-family: "Times New Roman", serif; >p.times-new-roman < /* sets the text to "Times New Roman" */ font-family: "Times New Roman"; >p.georgia < /* sets the text to Georgia */ font-family: Georgia; >

Browser Output

Some popular serif font families are Times New Roman , Georgia , Garamond , Palatino , etc.

Sans-Serif

Sans-Serif fonts do not have the small line or stroke at the end of characters. They are seen as clean and modern so often used in digital interfaces and online content. For example,

        
Serif-Serif font families
 
Helvetica font
 
Arial font
  

Browser Output

Some popular sans-serif font families are Open Sans , Poppins , Helvetica , Arial , etc.

Monospace

Monospace fonts have uniform spacing between all the characters. They are used in programming code and text editors as they are easy to read. For example,

        
Monospace font families
 
Courier font
 
Consolas font
  

Browser Output

Some popular sans-serif font families are Fira Mono , Courier , Consolas , etc.

Cursive

Cursive fonts have the joining strokes of characters and imitate the handwriting. They are often used for decorative purposes on web pages. For example,

        
Cursive font families
 
Lucida Handwriting font
 
Segoe Script font
  

h1 < font-family: "Lucida Handwriting", cursive; >p.lucida-handwriting < /* sets the text to Lucida Handwriting font*/ font-family: "Lucida Handwriting"; >p.segoe-script < /* sets the text to Segoe Script font */ font-family: "Segoe Script"; >

Browser Output

Some popular cursive font families are Lucida Handwriting , Apple Chancery , Brush Script , etc.

Fantasy

Fantasy fonts are primarily decorative fonts. They are used for creative and playful design projects. For example,

        
Fantasy font families
 
Papyrus font
 
Harrington font
  

Browser Output

Some popular fantasy font families are Papyrus , Harrington , Wisp , Arkana , Rivendell , etc.

Table of Contents

Источник

VS Code: каким шрифтом отображается текст?

Вообще в текстовом редакторе «VS Code» есть параметры для указания имени (семейства) шрифта и размера шрифта, которым отображается текст.

Но эти параметры работают примерно так же, как и при указании шрифтов в стилях CSS для HTML-элементов HTML-страниц. Это потому, что редактор «VS Code» создан с помощью фреймворка «Electron». Приложения (программы) для настольного компьютера, созданные с помощью этого фреймворка, используют для отображения текста движок «Chromium». Это тот самый движок, на базе которого созданы браузеры «Google Chrome», «Microsoft Edge», «Яндекс.Браузер» и многие другие. То есть это то самое «использование веб-технологий» о котором заявляли создатели редактора «VS Code» в статье «Зачем мы создали редактор Visual Studio Code?».

Таким образом, можно сказать, что текст в редакторе «VS Code» отображается примерно так же, как текст HTML-страниц в вышеупомянутых браузерах. Только в браузерах этот текст мы обычно читаем, а в редакторе «VS Code» мы его и читаем, и редактируем.

Что это значит на практике? Получается, мы можем указать для текста в редакторе «VS Code» CSS-свойства «font-family» и «font-size». Это можно сделать с помощью параметров « editor.fontFamily » и « editor.fontSize ». Напомню, параметры можно открыть с помощью пункта главного меню «Файл – Настройки – Параметры».

По умолчанию в моем экземпляре редактора значения этих параметров следующие:

Имя (семейство) шрифта: « Consolas, ‘Courier New’, monospace ».
Размер шрифта (в пикселях): « 14 ».

Если с размером шрифта всё понятно, то что означает запись в параметре «Имя (семейство) шрифта»? Люди, которые работают со стилями CSS, знакомы с такой записью. Она значит, что для отображения текста редактор сначала попытается применить шрифт (семейство шрифтов) «Consolas». В случае отсутствия этого шрифта на компьютере пользователя редактор попытается применить для отображения текста шрифт (семейство шрифтов) «Courier New». В записи название «Courier New» указано в кавычках-апострофах, это требуется из-за пробела в названии шрифта (семейства шрифтов).

В случае отсутствия на компьютере пользователя и шрифта «Consolas» и шрифта «Courier New» редактор попытается использовать для отображения текста любой моноширинный (по-английски «monospace») шрифт, который сможет найти. Слово «monospace» в данном случае — это не название определенного шрифта, а указание редактору на то, что следует выбрать любой моноширинный шрифт из имеющихся на компьютере.

Проверим нашу теорию (изложена выше) об одинаковом отображении текста в редакторе «VS Code» и браузерах «Microsoft Edge» (на движке «Chromium») и «Google Chrome». Для этого я взял следующий код на языке JavaScript (из интерактивной среды редактора):

и поместил его в файл «test.js».

После этого я написал такой код на языке HTML:

и поместил его на HTML-страницу «test.html» (должно быть очевидно, что тут указана только интересная для нашего опыта часть кода HTML-страницы).

Оба тестовых файла я записал в кодировке UTF-8.

Просмотрим файл «test.js» в редакторе «VS Code», а файл «test.html» в браузерах «Microsoft Edge» (на движке «Chromium») и «Google Chrome», вот картинка-иллюстрация:

Невооруженным глазом видно, что тестовый код отображен во всех трех случаях одинаково, одним и тем же шрифтом (это шрифт «Consolas»), в одном и том же размере (14 пикселей).

Но не всё так просто. Ранее я уже разбирал, что когда браузер не находит в указанном в стиле CSS шрифте нужного глифа, то он берет для этого другой шрифт, в котором нужный глиф есть, несмотря на то, что шрифт с нужным глифом может даже не быть указанным в данном стиле CSS. В том случае, который я разбирал ранее, для отображения текста был указан шрифт «Times New Roman», а браузер для отображения одного из символов использовал шрифт «Cambria Math», потому что в шрифте «Times New Roman» не было подходящего глифа.

В нашем тестовом коде (указан выше) используются символы-эмодзи, изображающие автомобили. Я просмотрел все 3030 глифов шрифта «Consolas» и не нашел среди них глифов для этих символов. Напомню, коды этих символов в Юникоде — U+1F697 (automobile), U+1F699 (recreational vehicle), U+1F695 (taxi).

Что сделал браузер (а также и редактор «VS Code», ведь мы выяснили, что отображение символов в них работает одинаково) для отображения этих символов? Он взял нужные глифы из шрифта «Segoe UI Emoji», в котором они есть.

Выводы. В большинстве случаев редактор «VS Code» отображает текст шрифтом, указанным в его параметрах. В соответствующем параметре редактора можно указать несколько шрифтов по принципу: сначала наиболее желаемый, потом менее желаемый. Редактор использует тот шрифт из указанных, который есть на компьютере пользователя. Шрифт указывается по тому же правилу, что и значение для CSS-свойства «font-family». В некоторых случаях, когда редактор не может найти нужного глифа для отображения символа в указанном в параметрах шрифте, то редактор подбирает тот шрифт из измеющихся на компьютере пользователя, в котором есть нужный глиф.

Источник