Стандартные и безопасные шрифты CSS

Безопасные шрифты – это набор шрифтов, устанавливаемый вместе с операционной системой (Windows, MacOS, Unix/Linux).

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

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

body {
	font-family: шрифт_1, шрифт_2, семейство;
}
CSS

Список безопасных шрифтов:

'Times New Roman', Times, serif Съешь же ещё этих мягких французских булок
Georgia, serif Съешь же ещё этих мягких французских булок
Arial, Helvetica, sans-serif Съешь же ещё этих мягких французских булок
'Arial Black', Gadget, sans-serif Съешь же ещё этих мягких французских булок
Verdana, Geneva, sans-serif Съешь же ещё этих мягких французских булок
'Trebuchet MS', Helvetica, sans-serif Съешь же ещё этих мягких французских булок
Impact, Charcoal, sans-serif Съешь же ещё этих мягких французских булок
'Comic Sans MS', cursive, sans-serif Съешь же ещё этих мягких французских булок
'Courier New', Courier, monospace Съешь же ещё этих мягких французских булок

Далее о каждом шрифте подробнее:

1
Windows MacOS Unix/Linux Семейство
Times New Roman Times Nimbus Roman No9 L serif

CSS:

body {
	font-family: 'Times New Roman', Times, serif;
}
CSS

Пример шрифта:

2
Windows MacOS Unix/Linux Семейство
Georgia Georgia serif

CSS:

body {
	font-family: Georgia, serif;
}
CSS

Пример шрифта:

3
Windows MacOS Unix/Linux Семейство
Arial Helvetica Nimbus Sans L sans-serif

CSS:

body {
	font-family: Arial, Helvetica, sans-serif;
}
CSS

Пример шрифта:

4
Windows MacOS Unix/Linux Семейство
Arial Black Gadget Nimbus Sans L sans-serif

CSS:

body {
	font-family: 'Arial Black', Gadget, sans-serif;
}
CSS

Пример шрифта:

5

Tahoma не является безопасным шрифтом.

Windows MacOS Unix/Linux Семейство
Tahoma Geneva sans-serif

CSS:

body {
	font-family: Tahoma, Geneva, sans-serif;
}
CSS

Пример шрифта:

6
Windows MacOS Unix/Linux Семейство
Verdana Geneva DejaVu Sans sans-serif

CSS:

body {
	font-family: Verdana, Geneva, sans-serif;
}
CSS

Пример шрифта:

7
Windows MacOS Unix/Linux Семейство
Trebuchet MS Helvetica Garuda sans-serif

CSS:

body {
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
}
CSS

Пример шрифта:

8

Lucida Sans Unicode не является безопасным шрифтом.

Windows MacOS Unix/Linux Семейство
Lucida Sans Unicode Lucida Grande Garuda serif

CSS:

body {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
CSS

Пример шрифта:

9
Windows MacOS Unix/Linux Семейство
Impact Charcoal CY sans-serif

CSS:

body {
	font-family: Impact, Charcoal, sans-serif;
}
CSS

Пример шрифта:

10
Windows MacOS Unix/Linux Семейство
Comic Sans MS Monaco CY sans-serif

CSS:

body {
	font-family: 'Comic Sans MS', cursive, sans-serif;
}
CSS

Пример шрифта:

11
Windows MacOS Unix/Linux Семейство
Courier New Courier Nimbus Mono L monospace

CSS:

body {
	font-family: 'Courier New', Courier, monospace;
}
CSS

Пример шрифта:

12

Lucida Console не является безопасным шрифтом.

Windows MacOS Unix/Linux Семейство
Lucida Console Monaco monospace

CSS:

body {
	font-family: 'Lucida Console', Monaco, monospace;
}
CSS

Пример шрифта:

26.04.2022, обновлено 09.12.2022
49293

Комментарии

, чтобы добавить комментарий.

Другие публикации

Текст с градиентом
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
53412
+6
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
67175
+9
Буквица CSS
Буквица, или инициал – первая буква главы или раздела, выделяется цветом и шрифтом. В CSS есть несколько способов задать стили первой букве...
9314
+2
Расстояние между буквами, строками, ширина табуляции в CSS
Демонстрация возможностей CSS для настройки расстояний между буквами, строками, табуляции и других свойств шрифтов.
27117
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
47966
+35
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
72413
+35