Czcionka to zestaw znaków tekstowych o pewnym stylu i rozmiarze, które dodają wartości do aplikacji. CSS pozwala nam tworzyć niestandardowe czcionki zgodnie z naszymi potrzebami, wykorzystując „@font-face”Reguła. W tym celu należy pobrać czcionkę lub podać link do czcionek z serwera. Mówiąc dokładniej, programiści potrzebują różnych czcionek do swoich projektów, a bez reguły @font-face system będzie ograniczony do czcionek już zainstalowanych w naszym systemie.

Ten blog opowie o wykorzystaniu zasady 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. Te czcionki można załadować z serwera lub czcionek zainstalowanych systemu.

Jak używać reguły css @font-face?

Składnia do użycia reguły CSS @Font-Face jest wspomniana poniżej:

@font-face
Font-Family: MyNewfont;
src: url ()

Reguła @font-face jest zdefiniowana przez określenie wartości w właściwości rodziny czcionki i powiązanego adresu URL, skąd ta czcionka znajduje się jako atrybut 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żywać linków, jeśli używasz czcionek z serwera.

Po pierwsze, dodaj

I

tagi, a następnie zastosuj, aby dostosować czcionki do każdego z nich. Zaimplementujmy wyżej opisany scenariusz w trzech etapach.

Krok 1: Dodaj elementy do pliku HTML

W HTML, wewnątrz sekcji, dodaj

I

do dodania niektórych treści związanych ze stroną internetową:

Witamy w Linuxhint!

Witamy w Linuxhint!

Krok 2: Podaj regułę @font-face w CSS

Aby określić regułę, słowo kluczowe ”@font-face”Jest wykorzystywany w CSS. Wewnątrz kręconych nawiasów, dodaj właściwość czcionki i dodaj nazwę czcionki jako jej wartość. Następnie użyj właściwości SRC, aby określić ścieżkę URL pobranej czcionki:

@font-face
Font-Family: Myfont;
src: url ("/fonts/batuphat \ script.OTF ”);

Podobnie dodamy kolejny spersonalizowany blok czcionki:

@font-face
Font-Family: MyFont2;
src: url ("/fonts/olive_vine \ demo.OTF ”);

Teraz zastosuj stylizację do

I

elementy.

Styl Element H2

H2
Font-Family: Myfont;
Rozmiar czcionki: 50px;

Właściwości zastosowane do

Element wyjaśniono poniżej:

• "rodzina czcionek”Jest ustawiony z wartością„myfont„To właśnie zadeklarowaliśmy w regule @font-face.
• "rozmiar czcionki”Właściwość ustawia rozmiar czcionki na 50px.

Styl Element H1

H1
Font-Family: MyFont2;
Rozmiar czcionki: 70px;
kolor brązowy;

Tutaj "kolor„Właściwość służy do pokolorowania czcionki.

Można to zobaczyć z obrazu poniżej

I

Tagi są skutecznie stylizowane z nowo zadeklarowanymi czcionkami:

Podaliśmy metodę stosowania reguły CSS @Font-Face.

Wniosek

Style czcionek odgrywają ważną rolę w uczynieniu dowolnej aplikacji estetycznej. Nasz system ma ograniczone style czcionek, a programista potrzebuje różnych czcionek, aby dodać upiększenie do swoich aplikacji internetowych. W tym celu CSS pozwala nam korzystać z reguły @font-face do dodawania niestandardowych czcionek. W tym artykule pokazano regułę @font-face, za pomocą której można dostosować styl czcionki w naszej aplikacji.