Ten blog będzie omawiał użycie reguły CSS @font-face.
Co to jest reguła CSS @font-face?
Reguła @font-face w CSS jest wykorzystywana do tworzenia niestandardowych czcionek dla naszych projektów. Czcionki te można załadować z serwera lub czcionek zainstalowanych w systemie.
Jak korzystać z reguły CSS @font-face?
Składnia reguły CSS @font-face jest wymieniona poniżej:
@czcionka-twarz {
rodzina czcionek : Moja nowa czcionka ;
źródło : adres URL ( )
}
Reguła @font-face jest definiowana przez określenie wartości we właściwości font-family oraz powiązanego adresu URL, z którego pochodzi czcionka, jako atrybutu src.
Przykład
W poniższym przykładzie dostosujemy czcionki. Aby to zrobić, najpierw pobierz czcionki z przeglądarki i dodaj je do folderu swojego projektu. Możesz także użyć linków, jeśli używasz czcionek z serwera.
Najpierw dodaj znaczniki
i , a następnie zastosuj, aby dostosować czcionki do każdego z nich. Zaimplementujmy opisany powyżej scenariusz w trzech krokach.
Krok 1: Dodaj elementy do pliku HTML
Krok 1: Dodaj elementy do pliku HTML
W HTML, w sekcji
dodaj i , aby dodać treść związaną ze stroną internetową:
< h2 > Witamy w Linuxhint! < / h2 >
< h1 > Witamy w Linuxhint! < / h1 >
Krok 2: Określ regułę @font-face w CSS
< h2 > Witamy w Linuxhint! < / h2 >
< h1 > Witamy w Linuxhint! < / h1 >
Krok 2: Określ regułę @font-face w CSS
Aby określić regułę, słowo kluczowe „ @czcionka-twarz ” jest używany w CSS. Wewnątrz nawiasów klamrowych dodaj właściwość rodziny czcionek i dodaj nazwę czcionki jako jej wartość. Następnie użyj właściwości src, aby określić ścieżkę URL pobranej czcionki:
@czcionka-twarz {
rodzina czcionek : moja czcionka ;
źródło : adres URL ( '/fonts/Batuphat\ Script.otf' ) ;
}
Podobnie dodamy kolejny dostosowany blok czcionek:
@czcionka-twarz {rodzina czcionek : moja czcionka2 ;
źródło : adres URL ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Teraz zastosuj stylizację do elementów
i .
Element stylu h2
h2 {
rodzina czcionek : moja czcionka ;
rozmiar czcionki : 50px ;
}
Element stylu h2
h2 {rodzina czcionek : moja czcionka ;
rozmiar czcionki : 50px ;
}
Poniżej wyjaśniono właściwości zastosowane do elementu
:
- “ rodzina czcionek ” jest ustawiany na wartość „ moja czcionka ”, co zadeklarowaliśmy w regule @font-face.
- “ rozmiar czcionki ” ustawia rozmiar czcionki na 50 pikseli.
Styl elementu h1
h1 {
rodzina czcionek : moja czcionka2 ;
rozmiar czcionki : 70px ;
kolor : brązowy ;
}
Tutaj ' kolor ” służy do kolorowania czcionki.
Na poniższym obrazku widać, że znaczniki
i są pomyślnie stylizowane za pomocą nowo zadeklarowanych czcionek:
Udostępniliśmy metodę korzystania z reguły CSS @font-face.
Wniosek
Style czcionek odgrywają ważną rolę w estetyce każdej aplikacji. Nasz system ma ograniczone style czcionek, podczas gdy programista potrzebuje różnych czcionek, aby upiększyć swoje aplikacje internetowe. Aby to zrobić, CSS pozwala nam używać reguły @font-face do dodawania niestandardowych czcionek. W tym artykule zademonstrowano regułę @font-face, za pomocą której można dostosować styl czcionki w naszej aplikacji.