Шрифты CSS Google
Шрифты Google
Если вы не хотите использовать ни один из стандартных шрифтов в HTML, вы можете использовать Google Fonts.
Шрифты Google бесплатны в использовании и имеют более 1000 шрифтов на выбор.
Как Использовать Шрифты Google
Просто добавьте специальную ссылку на таблицу стилей в разделе <head>, а затем обратитесь к шрифту в CSS.
Пример
Здесь мы хотим использовать шрифт под названием "Sofia" из Google Fonts:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Пример
Здесь мы хотим использовать шрифт с именем "Trirong" из Google Fonts:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Используйте Несколько Шрифтов Google
Чтобы использовать несколько шрифтов Google, просто разделите имена шрифтов символом конвейера (|), например:
Пример
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Примечание: Запрос нескольких шрифтов может замедлить ваши веб-страницы! Так что будьте осторожны с этим.
Стилизация шрифтов Google
Конечно, вы можете стилизовать шрифты Google, как вам нравится, с помощью CSS!
Пример
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Включение Эффектов Шрифта
Google также включил различные эффекты шрифта, которые вы можете использовать.
Пример
Добавьте эффект огня к шрифту "София":
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on Fire</h1>
Чтобы запросить несколько эффектов шрифта, просто разделите имена эффектов символом конвейера (|), например:
Пример
Добавьте несколько эффектов к шрифту "Sofia":
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
