CSS Google шрифты
Google шрифты
Если вы не хотите использовать какие-либо стандартные шрифты в HTML, вы можете использовать Google шрифты.
Google шрифты можно использовать бесплатно, и вы можете выбрать из более 1000 шрифтов.
Как использовать Google шрифты
Просто добавьте ссылку на специальную таблицу стилей в разделе <head>, а затем обратитесь к шрифту в CSS.
Пример
Здесь мы используем шрифт под названием "Sofia" из Google шрифтов:
<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 шрифтов:
<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 всегда указывайте хотя бы один резервный шрифт (чтобы избежать неожиданного поведения). Т.о., необходимо добавить общее семейство шрифтов (например, serif или sans-serif) в конец списка.
Чтобы просмотреть список всех доступных Google шрифтов, посетите учебник Google шрифты на нашем сайте W3Schools на русском.
Использование нескольких 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!
Пример
Стиль шрифта "Sofia":
<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 шрифт
Lorem ipsum dolor sit amet.
123456790
Попробуйте сами »
Включение эффектов шрифта
Google также включил различные эффекты шрифтов, которые вы можете использовать.
Сначала добавьте effect=effectname к Google API, затем добавьте имя специального класса к элементуe, который будет использовать специальный эффект. Имя класса всегда начинается с font-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">София в огне</h1>
</body>
Результат:
София в огне
Попробуйте сами »
Чтобы запросить несколько эффектов шрифта, просто разделите имена эффектов вертикальной чертой (|), как здесь:
Пример
Добавьте несколько эффектов к шрифту "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">Неоновый эффект</h1>
<h1 class="font-effect-outline">Эффект контура</h1>
<h1 class="font-effect-emboss">Эффект тиснения</h1>
<h1 class="font-effect-shadow-multiple">Эффект множественной тени</h1>
</body>
Результат:
Неоновый эффект
Эффект контура
Эффект тиснения
Эффект множественной тени
Попробуйте сами »
Примечание. Google шрифты будут работать, только если вы подключены к Интернету.
Все Google шрифты доступны на сайте Google по ссылке https://fonts.google.com/.
