Czcionki CSS

Czcionki to najważniejsze elementy, które widzimy na dowolnej stronie internetowej, więc podczas budowania strony internetowej wybór prawidłowej/odpowiedniej czcionki jest bardzo ważny. Czcionki zwiększają wizualny wygląd dowolnej strony internetowej, a użycie odpowiedniej czcionki pomaga zwiększyć czytelność i skuteczność dowolnej strony internetowej.

Ogólne rodziny czcionek w CSS

Istnieje pięć rodzajów rodzin czcionek w CSS I.mi. Serif, Sans-Serif, Monospace, Fantasy i Cursive. Wszystkie te rodziny czcionek są używane do określenia wyglądu/kształtu czcionek:

1. Czcionki serifowe mają małe stylowe pociągnięcia na krawędzi liter
2. Sans-Serif Czcionki mają proste litery, bez udarzy. Te czcionki są łatwo czytelne.
3. Monospace Czcionki są literami o stałej szerokości, stałej szerokości. Głównie używane do reprezentowania kodu programowania
4. Kursywny Czcionki są bardzo podobne do pisania ludzi
5. Fantazja Czcionki mają dekoracyjny/fantazyjny wygląd

Wizualna różnica rodzinnych rodzin czcionek

Poniżej fragmentu zapewni wytyczne dotyczące zrozumienia różnicy kształtów ogólnych rodzin czcionek

Różne rodzaje ogólnych rodzin czcionek

Poniżej podana liczba przedstawia różne typy każdej ogólnej rodziny czcionek:

Właściwości czcionek CSS

W CSS wygląd tekstu można modyfikować na wiele sposobów, takich jak wybór stylu czcionki, rodziny czcionek, kolor czcionki, rozmiar czcionki itp. Ponieważ prawidłowe użycie czcionki ma duży wpływ na tekst i doświadczenie czytelnika, dlatego CSS zapewnia liczne właściwości czcionek, których można użyć do dostosowania wyglądu czcionek. Ten zapis będzie ukierunkowany na następujące właściwości czcionek:

• rodzina czcionek
• styl czcionki
• Font-variant
• rozmiar czcionki
• grubość czcionki
• Czcionek stenograficzny

Zacznijmy od rodziny czcionek.

Rodzina czcionek CSS

Ta właściwość służy do określenia rodziny czcionek dla dowolnego elementu HTML E.G. „Arial”, „Times New Roman” itp. Lub możemy użyć ogólnej rodziny czcionki E.G. Serif, kursywa itp.

Przykład

Poniższy przykład wykorzystuje czcionki serifowe dla

element i kursywne czcionki dla

elementy:

Html

Czcionki CSS

Pierwszy paragraf

Akapit drugi

CSS

H3
Font-family: „Times New Roman”, Times, Serif;

P
FONT-FAMILY: Kursywna;

Powyższy kawałek kodu wyświetla następujące dane wyjściowe:

Styl czcionki CSS

Aby zdefiniować określony styl dla elementu HTML, stosuje się właściwość w stylu czcionki. Właściwość w stylu czcionki może mieć normalną, ukośną lub kursywą wartość.

Przykład

W poniższym kawałku kodu styl czcionki

Element jest zmieniany na styl kursywny:

Html

Czcionki CSS

Pierwszy paragraf

Akapit drugi

CSS

H3
Styl czcionki: Kursywa;

Powyższy fragment pokazuje następujący wynik:

Skośne, normalne wartości można zastosować dla właściwości w stylu czcionki, wartość ukośna przyniesie wyniki bardzo podobne do stylu kursywnego.

CSS Font-Variant

Może przyjąć wartość „małe koście”, która przekształca litery TLE w małe litery kapitałowe (wielki, ale mniejszy rozmiar).

Przykład

Kod pod względem podanym poniżej pokazuje wpływ właściwości czcionki na

element:

Html

Czcionki CSS

Pierwszy paragraf

Akapit drugi

CSS

P
Font-Variant: Małe caps;

Powyższy kod zapewni następujący wynik:

CSS Font-Size

Właściwość wielkości czcionki jest sussed do ustawiania rozmiaru tekstu, a wartość wielkości czcionki można określić jako małe, duże, średnie itp., lub pod względem PX, EM, %itp.

Poniższy kod podany określa wielkość czcionki dla

element jako bardzo duży:

Html

Czcionki CSS

Pierwszy paragraf

Akapit drugi

CSS

P
Rozmiar czcionki: X-Large;

Powyższy fragment generuje następujący wynik:

Wyjście weryfikuje, że tekst

elementy są większe niż normalny rozmiar czcionki.

CSS Font-Weight

Właściwość Waseight Font jest używana do ustawiania wagi czcionki pod względem niektórych konkretnych wartości, takich jak pogrubiona, normalna, lżejsza itp. Może określić wagę pod względem wartości liczbowej, takiej jak 100, 200, 300 itp. Większa wartość określa odważniejszą/grubszą czcionkę, podczas gdy mniejsza wartość reprezentuje cieńszą czcionkę.

Poniższy element kodu ustawia masę czcionki dla

element za pomocą wartości „odważniejszej”:

Html

Czcionki CSS

Pierwszy paragraf

Akapit drugi

CSS

P
Font-Weight: Bolder;

Powyższy fragment daje następujące dane wyjściowe:

Czcionkalna nieruchomość w CSS

CSS zapewnia krótką nieruchomość dla wszystkich wyżej wymienionych nieruchomości. Za pomocą skrótów "czcionka" właściwość, którą możemy ustawić styl czcionki, rodzinę, wariant itp. w jednej linii.

Poniższy przykład pokazuje, jak używać właściwości skrót od czcionki w CSS:

Html

Czcionki CSS

Pierwszy paragraf

Akapit drugi

CSS

P
Czcionka: Bold 30px Kursywna;

Powyższy fragment określa masę czcionki, wielkości czcionki i rodzinę czcionki w jednej deklaracji za pomocą właściwości skrót od czcionki:

Powyższe wyjście weryfikuje, że właściwość skrótów z powodzeniem ustawia wagę, rozmiar i rodzinę czcionki dla

element.

Wniosek

Rodziny czcionek określają kształt czcionek, podczas gdy właściwości w stylu czcionek, wielkości czcionki, wielkości czcionki i właściwości czcionki określają odpowiednio styl, wagę, rozmiar i małe kpiny. Wszystkie te funkcje można wykonać na czcionkach w jednej deklaracji za pomocą skrótowej właściwości „czcionki”.

Ten pismo przedstawia kompleksowy przegląd czcionek CSS, ogólnych rodzin czcionek i jak ustawić styl czcionki.