Что такое веб-безопасные шрифты?
Шрифт считается веб-безопасным, если он установлен почти во всех браузерах и на всех устройствах.
Резервные шрифты
Ни один шрифт не является полностью веб-безопасным, так как любой из них может отсутствовать или быть установлен неправильно. Поэтому всегда следует использовать резервные шрифты.
В свойстве font-family перечислите по порядку похожие резервные шрифты: если один не работает, браузер переходит к следующему. Общее семейство шрифтов всегда должно идти последним.
Пример
Здесь первым идёт Tahoma, а в резерве — Verdana и затем общий sans-serif.
<style> задайте для <p> font-family: Tahoma, Verdana, sans-serif, где второй и третий являются резервными. Добавьте абзац.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<p>If Tahoma is not available, the browser falls back to Verdana, then to a generic sans-serif font.</p>
</body>
</html>
Веб-безопасные шрифты для HTML и CSS
Для HTML и CSS выделяются несколько веб-безопасных шрифтов. Среди шрифтов sans-serif: Arial, Verdana, Tahoma и Trebuchet MS. Среди шрифтов serif: Times New Roman, Georgia и Garamond. Для monospace — Courier New, а для cursive — Brush Script MT.
Примечание: Перед публикацией проверяйте свои шрифты в разных браузерах и на разных устройствах и никогда не обходитесь без резервных шрифтов.
Arial (sans-serif)
Ни один шрифт не используется в онлайн- и печатных материалах так широко, как Arial, который также является шрифтом по умолчанию в Google Docs. Он есть во всех основных операционных системах, что делает его одним из самых безопасных веб-шрифтов.
Пример
Arial, применённый к образцу текста.
<style> установите font-family для <div> в Arial, sans-serif. Внутри добавьте заголовок, строку текста и цифры 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Verdana (sans-serif)
Даже при маленьких размерах очень популярный шрифт Verdana остаётся читаемым.
Пример
Verdana, применённый к образцу текста.
<style> установите font-family для <div> в Verdana, sans-serif. Внутри добавьте заголовок, строку текста и цифры 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Tahoma (sans-serif)
В Tahoma символы расположены ближе друг к другу, и пространства между ними меньше.
Пример
Tahoma, применённый к образцу текста.
<style> установите font-family для <div> в Tahoma, sans-serif. Внутри добавьте заголовок, строку текста и цифры 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Trebuchet MS (sans-serif)
Компания Microsoft разработала Trebuchet MS в 1996 году. Его поддерживают не все мобильные операционные системы, поэтому используйте его осторожно.
Пример
Trebuchet MS, применённый к образцу текста.
<style> установите font-family для <div> в "Trebuchet MS", sans-serif. Внутри добавьте заголовок, строку текста и цифры 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Trebuchet MS", sans-serif;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Times New Roman (serif)
Немногие шрифты в мире так же узнаваемы, как Times New Roman. Благодаря профессиональному виду он широко распространён в газетах и на новостных сайтах и поставляется вместе с Windows.
Пример
Times New Roman, применённый к образцу текста.
<style> установите font-family для <div> в "Times New Roman", serif. Внутри добавьте заголовок, строку текста и цифры 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Times New Roman", serif;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Georgia (serif)
Элегантный serif-шрифт Georgia хорошо читается при разных размерах, что делает его хорошим выбором для адаптивного дизайна на мобильных устройствах.
Пример
Georgia, применённый к образцу текста.
<style> установите font-family для <div> в Georgia, serif. Внутри добавьте заголовок, строку текста и цифры 0-9.
Output: complete HTML page
<!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>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Garamond (serif)
Многие печатные книги набраны классическим шрифтом Garamond, известным своим вневременным видом и хорошей читаемостью.
Пример
Garamond, применённый к образцу текста.
<style> установите font-family для <div> в Garamond, serif. Внутри добавьте заголовок, строку текста и цифры 0-9.
Output: complete HTML page
<!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>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Courier New (monospace)
Среди моноширинных serif-шрифтов Courier New используется шире всего. Вы часто увидите его в коде, многие почтовые сервисы используют его по умолчанию, а в киносценариях он служит стандартным шрифтом.
Пример
Courier New, применённый к образцу текста.
<style> установите font-family для <div> в "Courier New", monospace. Внутри добавьте заголовок, строку текста и цифры 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Courier New", monospace;
}
</style>
</head>
<body>
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>
Brush Script MT (cursive)
Образцом для Brush Script MT послужил рукописный текст. За его элегантность приходится платить: он может быть трудночитаемым, поэтому используйте его осторожно.
Пример
Brush Script MT, применённый к образцу текста.
<style> установите font-family для <div> в "Brush Script MT", cursive. Внутри добавьте заголовок, строку текста и цифры 0-9.
Output: complete HTML page
<!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>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
</body>
</html>