В веб-разработке правильное использование стиля шрифта обеспечивает привлекательный вид приложения. Эти стили шрифта дают визуальные подсказки о порядке чтения документа. Например, стиль шрифта заголовка документа должен быть жирным и выделяться среди других. Стиль также помогает отличить важный контент от других.
Результатами обучения по этой статье являются:
- Что такое веб-шрифты Google?
- Как импортировать шрифты Google в HTML?
- Как использовать шрифты Google в файле CSS?
Что такое веб-шрифты Google?
Веб-шрифты Google — это библиотека с открытым исходным кодом, которая содержит сотни стилей или семейств шрифтов. Он также предоставляет API, которые помогают нам использовать веб-шрифты с Android и CSS. Google Fonts намного легче, чем другие библиотеки шрифтов, и доступны бесплатно для использования в бизнесе. Их проще реализовать на любом веб-сайте.
По умолчанию CSS предлагает стили фэнтези, с засечками, без засечек, курсив и моноширинный шрифт. Google Fonts можно использовать, если вы хотите использовать другие стили шрифтов.
Как импортировать шрифты Google в HTML?
Чтобы использовать Google Fonts на HTML-странице, выполните следующие действия.
Шаг 1: выберите семейство шрифтов
Сначала откройте Гугл шрифты официальном сайте и выберите понравившийся шрифт. Например, мы выбрали « Омар Два ' семейство шрифтов:
Шаг 2: выберите стили
Затем прокрутите вниз, чтобы просмотреть список стилей. Добавьте их в свою коллекцию, нажав кнопку « + ' подписать:
Шаг 3. Просмотрите выбранные семейства
Чтобы просмотреть выбранные семейства, щелкните значок, выделенный ниже:
Шаг 4: Скопируйте ссылку для встраивания в HTML
После этого прокрутите вниз и скопируйте ссылку семейства шрифтов, используя выделенный « Копировать ' икона:
Как использовать шрифты Google в файле CSS?
Чтобы использовать копию Google Fonts в CSS для стилизации, просмотрите приведенные примеры.
Пример 1
Включите « », чтобы указать некоторый контент или абзац:
< п > «Лучший обучающий сайт» п >Чтобы импортировать шрифты Google, вставьте скопированный код в « <стиль> ” тег HTML-файла:
@ URL-адрес импорта ( 'https://fonts.googleapis.com/css2?family=Lobster+Two:ital@1&display=swap' ) ;Элемент стиля «p»
п {семейство шрифтов: 'Лобстер два' , скоропись;
выравнивание текста: по центру;
размер шрифта: 45px;
цвет: RGBA ( 64 , 3 , 162 , 0,8 ) ;
}
Следующие объясненные свойства CSS применяются к HTML « <р> ' ярлык:
- “ семейство шрифтов ” присвоено значение “ «Лобстер Два», курсив ». Это семейство шрифтов импортировано из Google Fonts.
- “ выравнивание текста » регулирует выравнивание текста.
- “ размер шрифта ” определяет размер шрифта.
- “ цвет ” задает цвет шрифта.
На изображении видно, что семейство шрифтов успешно применено:
Пример 2
Возьмем другой пример, чтобы импортировать « Нерко Один Гугл шрифт. Для этого снова вставьте код URL-адреса шрифта Google «Nerko One» в поле « <стиль> элемент:
@ URL-адрес импорта ( 'https://fonts.googleapis.com/css2?family=Nerko+One&family=Oswald:wght@500&family=Pacifico&display=swap' ) ;Элемент стиля «p»
п {семейство шрифтов: 'Нерко Один' , скоропись;
вес шрифта: 300 ;
размер шрифта: 30px;
}
“ семейство шрифтов », « вес шрифта ', и ' размер шрифта » свойства применяются к HTML « <р> элемент.
Вывод
Мы научили вас импортировать веб-шрифты Google в файл CSS.
Заключение
Чтобы импортировать шрифты Google в CSS, сначала посетите Гугл шрифты официальный сайт и выберите стиль шрифта. Затем скопируйте код, содержащий « @импорт ключевое слово и вставьте его в файл CSS или в « <стиль> » HTML-файла. Это исследование продемонстрировало полную процедуру импорта шрифтов Google в файл CSS.