CSS @font-face
Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Co to jest CSS @font-face?
@font-face to reguła CSS, która pozwala dołączyć do strony własny plik czcionki, np. w formacie .woff2, .woff, .ttf. Nie jest to zwykła właściwość CSS ustawiana bezpośrednio na elemencie.
W pytaniach egzaminacyjnych łatwo pomylić @font-face z font-family. Różnica jest prosta:
@font-face— definiuje/importuje czcionkę do użycia na stronie,font-family— wskazuje, jakiego kroju czcionki ma używać dany element.
Przykład użycia
@font-face {
font-family: 'MojaCzcionka';
src: url('fonts/moja-czcionka.woff2') format('woff2');
}
body {
font-family: 'MojaCzcionka', Arial, sans-serif;
}
W tym przykładzie @font-face rejestruje czcionkę pod nazwą MojaCzcionka, a właściwość font-family stosuje ją dla elementu body.
Ważne na egzaminie
Jeżeli pytanie brzmi: „Którą właściwością określa się krój czcionki?”, poprawną odpowiedzią jest font-family, a nie font-face. @font-face służy do zdefiniowania źródła czcionki, czyli wskazania pliku, z którego przeglądarka ma ją pobrać.