CSS -шрифты Google
Гугл шрифты
Если вы не хотите использовать какие-либо стандартные шрифты в HTML, вы можете использовать шрифты Google.
Google Fonts бесплатны для использования и имеют более 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>
Результат:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Пример
Здесь мы хотим использовать шрифт под названием «Trirong» из Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Результат:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Пример
Здесь мы хотим использовать шрифт с именем «Audiowide» из Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Результат:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Примечание. При указании шрифта в CSS всегда указывайте как минимум один запасной шрифт (во избежание непредвиденного поведения). Итак, также здесь вы должны добавить общее семейство шрифтов (например, с засечками или без засечек) в конец списка.
Чтобы просмотреть список всех доступных шрифтов Google, посетите наше руководство How To — Google Fonts Tutorial .
Используйте несколько шрифтов 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>
Результат:
Audiowide Font
Sofia Font
Trirong Font
Примечание. Запрос нескольких шрифтов может замедлить работу ваших веб-страниц! Так что будьте осторожны с этим.
Стилизация шрифтов 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>
Результат:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Включение эффектов шрифта
Google также включил различные эффекты шрифта, которые вы можете использовать.
Сначала добавьте в Google API, затем добавьте имя специального класса к элементу, который будет использовать специальный эффект. Имя класса всегда начинается
и заканчивается расширением .effect=effectnamefont-effect-effectname
Пример
Добавьте эффект огня к шрифту «Sofia»:
<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>
</body>
Результат:
Sofia on Fire
Чтобы запросить несколько эффектов шрифта, просто разделите имена эффектов вертикальной чертой ( |), например:
Пример
Добавьте несколько эффектов к шрифту «София»:
<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>
</body>
Результат:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect