Часто используемые резервные стеки шрифтов
Ниже приведены несколько часто используемых резервных стеков шрифтов, сгруппированных по пяти общим семействам шрифтов: serif, sans-serif, monospace, cursive и fantasy.
Шрифты Serif
Часто используемые резервные стеки serif.
Times New Roman, Times, serif
Начинается с Times New Roman, затем переходит к Times, а потом к общему serif.
<style> задайте свойству font-family элемента <div> значение "Times New Roman", Times, serif. Внутри добавьте заголовок и абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Georgia, serif
Начинается с Georgia, затем переходит к общему serif.
<style> задайте свойству font-family элемента <div> значение Georgia, serif. Внутри добавьте заголовок и абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Garamond, serif
Начинается с Garamond, затем переходит к общему serif.
<style> задайте свойству font-family элемента <div> значение Garamond, serif. Внутри добавьте заголовок и абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Шрифты Sans-Serif
Часто используемые резервные стеки sans-serif.
Arial, Helvetica, sans-serif
Начинается с Arial, затем переходит к Helvetica, а потом к общему sans-serif.
<style> задайте свойству font-family элемента <div> значение Arial, Helvetica, sans-serif. Внутри добавьте заголовок и абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Tahoma, Verdana, sans-serif
Начинается с Tahoma, затем переходит к Verdana, а потом к общему sans-serif.
<style> задайте свойству font-family элемента <div> значение Tahoma, Verdana, sans-serif. Внутри добавьте заголовок и абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Trebuchet MS, Helvetica, sans-serif
Начинается с Trebuchet MS, затем переходит к Helvetica, а потом к общему sans-serif.
<style> задайте свойству font-family элемента <div> значение "Trebuchet MS", Helvetica, sans-serif. Внутри добавьте заголовок и абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Geneva, Verdana, sans-serif
Начинается с Geneva, затем переходит к Verdana, а потом к общему sans-serif.
<style> задайте свойству font-family элемента <div> значение Geneva, Verdana, sans-serif. Внутри добавьте заголовок и абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Моноширинные шрифты
Часто используемый резервный стек моноширинного шрифта.
Courier New, Courier, monospace
Начинается с Courier New, затем переходит к Courier, а потом к общему monospace.
<style> задайте свойству font-family элемента <div> значение "Courier New", Courier, monospace. Внутри добавьте заголовок и абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Рукописные шрифты
Часто используемый резервный стек рукописного шрифта.
Brush Script MT, cursive
Начинается с Brush Script MT, затем переходит к общему cursive.
<style> задайте свойству font-family элемента <div> значение "Brush Script MT", cursive. Внутри добавьте заголовок и абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Brush Script MT", cursive;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Декоративные шрифты
Часто используемый резервный стек декоративного шрифта.
Copperplate, Papyrus, fantasy
Начинается с Copperplate, затем переходит к Papyrus, а потом к общему декоративному шрифту.
<style> задайте свойству font-family элемента <div> значение Copperplate, Papyrus, fantasy. Внутри добавьте заголовок и абзац.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Copperplate, Papyrus, fantasy;
}
</style>
</head>
<body>
<div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>