Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



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 on Fire

Попробуйте сами »

Чтобы запросить несколько эффектов шрифта, просто разделите имена эффектов символом трубы (|), например:

Добавить несколько эффектов к шрифту "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>

Результат:

Neon Effect

Outline Effect

Emboss Effect

Multiple Shadow Effect

Попробуйте сами »


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.