CSS Czcionki Google
Czcionki Google
Jeśli nie chcesz używać żadnej ze standardowych czcionek w HTML, możesz skorzystać z Google Fonts.
Czcionki Google są bezpłatne i mają do wyboru ponad 1000 czcionek.
Jak korzystać z czcionek Google
Wystarczy dodać specjalny link do arkusza stylów w sekcji <head>, a następnie odwołać się do czcionki w CSS.
Przykład
Tutaj chcemy użyć czcionki o nazwie „Sofia” z Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Wynik:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Przykład
Tutaj chcemy użyć czcionki o nazwie „Trirong” z Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Wynik:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Przykład
Tutaj chcemy użyć czcionki o nazwie „Audiowide” z Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Wynik:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Uwaga: Określając czcionkę w CSS, zawsze wymieniaj przynajmniej jedną czcionkę zastępczą (aby uniknąć nieoczekiwanych zachowań). Tak więc również tutaj powinieneś dodać ogólną rodzinę czcionek (takich jak szeryfowa lub bezszeryfowa) na końcu listy.
Listę wszystkich dostępnych czcionek Google znajdziesz w naszym poradniku dotyczącym czcionek Google .
Użyj wielu czcionek Google
Aby użyć wielu czcionek Google, po prostu oddziel nazwy czcionek pionową kreską ( |), w ten sposób:
Przykład
Poproś o wiele czcionek:
<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>
Wynik:
Audiowide Font
Sofia Font
Trirong Font
Uwaga: Żądanie wielu czcionek może spowolnić działanie Twoich stron internetowych! Więc bądź ostrożny.
Stylizacja czcionek Google
Oczywiście możesz dowolnie stylizować czcionki Google za pomocą CSS!
Przykład
Stylizuj czcionkę „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>
Wynik:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Włączanie efektów czcionek
Google włączyło również różne efekty czcionek, których możesz użyć.
Najpierw dodaj do Google API, a następnie dodaj specjalną nazwę klasy do elementu, który będzie używał efektu specjalnego. Nazwa klasy zawsze zaczyna się
i kończy na .effect=effectnamefont-effect-effectname
Przykład
Dodaj efekt ognia do czcionki „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>
Wynik:
Sofia on Fire
Aby zażądać wielu efektów czcionek, po prostu oddziel nazwy efektów znakiem kreski pionowej ( |), w ten sposób:
Przykład
Dodaj wiele efektów do czcionki „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">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>
Wynik:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect