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