W Kaskadowe prześcieradła (CSS), Nieruchomość wielkości czcionki ma ogromne znaczenie. Zapewnia, że ​​tekst wyróżnia się i wzbogaca arkusz hierarchią wizualną. Hierarchia pomaga w odróżnianiu nagłówków i podgłosań od normalnego tekstu. Właściwość wielkości czcionki CSS używa wielu jednostek wielkości, takich jak piksele, EM, szerokość i wartości procentowe. Ponadto wykorzystuje również różne nagłówki, od

Do

.

W tym spisie omówi nieruchomość wielkości czcionki w CSS. Będziemy również nauczyć, jak jawnie korzystać predefiniowane i niestandardowe właściwości wielkości czcionki dla elementów tekstowych. A więc zacznijmy!

Właściwość wielkości czcionki CSS

W CSS właściwość wielkości czcionki jest wykorzystywana do ustawiania rozmiaru elementu tekstowego, a jego wartość może być „Predefiniowany” lub „niestandardowy rozmiar”.

W poniższych sekcjach krótko porozmawiamy o predefiniowanych i niestandardowych wartościach CSS wielkości czcionki w właściwości wielkości czcionki.

Właściwość wielkości czcionki CSS przy użyciu predefiniowanych wartości

CSS zapewnia predefiniowane wartości do ustawiania rozmiarów czcionek tekstów. Właściwość wielkości czcionki CSS jest wykorzystywana, gdy mamy informacje związane z fizycznym rozmiarem wyjścia. Ponadto przeglądarki nie pozwalają na modyfikację rozmiaru tekstu z powodu złych przyczyn dostępności.

Sprawdź następującą listę predefiniowanych wartości właściwości wielkości czcionki:

• XX-Small
• X-Small
• Mały
• Średni
• Duży
• X-Large
• XX-LARGE

Teraz rzućmy okiem na składnię dostarczania predefiniowanych wartości właściwości rozmiaru czcionki:

Składnia dostarczania predefiniowanych wartości właściwości wielkości czcionki

Rozmiar czcionki: Średni | duży | X-Large | XX-Large | XX-Small | X-Small | Small |;

Tutaj musimy dodać określoną wartość dla "rozmiar czcionki" nieruchomość.

Przykład: dostarczanie wstępnie zdefiniowanych wartości właściwości wielkości czcionki

W tym przykładzie określamy różne predefiniowane wartości właściwości wielkości czcionki dla elementów akapitu:

To jest xx duży tekst.

To jest tekst X.

To jest duży tekst.

To jest średni tekst.

To jest mały tekst.

To jest tekst X-MALL.

To jest tekst xx.

Otwórz plik HTML w przeglądarce po dodaniu określonego kodu. Po tym tekst akapitów będzie miał następujący format:

W następnej sekcji zademonstrujemy użycie "zwyczaj" Wartości właściwości wielkości czcionki.

Właściwość wielkości czcionki CSS przy użyciu wartości niestandardowych

Dostarczając Wartości niestandardowe do właściwości wielkości czcionki, możesz ustawić rozmiar czcionki zgodnie z otaczającymi elementami, a ta właściwość pozwala również użytkownikowi zmienić rozmiar czcionki w przeglądarkach.

W CSS właściwość wielkości czcionki zawiera następujące wartości niestandardowe:

• Rozmiar czcionki z pikselami
• Rozmiar czcionki z EM
• rozmiar czcionki z wartościami procentowymi
• Responsywna wielkości czcionki

Właściwość wielkości czcionki CSS z pikselami

W tej metodzie, „Pixels” są używane do ustawienia wartości właściwości wielkości czcionki, oferując użytkownikowi pełną kontrolę sterowania rozmiaru tekstu. Jest to statyczna wartość, która jest całkowicie niezależna.

Przykład: właściwość wielkości czcionki CSS z pikselami

Teraz ustawimy rozmiar czcionki elementów akapitu zgodnie z różnymi wartościami pikseli, takimi jak „50px”, „40px” i „30px”:

Przypisujemy „50px” do tego tekstu.

Przypisujemy „40px” do tego tekstu.

Przypisujemy „30px” do tego tekstu.

Wyjście

Jak widać z danego wyjścia, rozmiar tekstu akapitów jest ustawiany zgodnie z określonymi wartościami pikseli.

Właściwość wielkości czcionki CSS z EM

„Em” Wartości CSS właściwość wielkości czcionki są używane do ustawiania rozmiaru tekstu zgodnie z wielkością czcionki macierzystej w przeglądarkach. Wielu programistów woli „Em” nad „Pixels” Ponieważ oferuje dobry poziom kompatybilności dla przeglądarek.

Notatka: W przeglądarce domyślny rozmiar tekstu jest ustawiony 16 pikseli i jeden, co oznacza że 1 EM = 16 pikseli.

Spójrz na przykład poniżej:

Przykład: właściwość wielkości czcionki CSS z EM

W tym przykładzie ustawimy „Em” wartość dla elementów tekstowych tak samo jak poprzedni przykład. Aby to podzielić liczbę pikseli z „16” a następnie podaj wynikową wartość jako wartość właściwości wielkości czcionki dodanych elementów:

To jest 1

To jest 2

To jest akapit.

Dane wyjście oznacza, że ​​pomyślnie zastosowaliśmy właściwość wielkości czcionki „Em” Wartości:

Właściwość wielkości czcionki CSS z wartościami procentowymi

Możemy również ustawić rozmiar czcionki w odniesieniu do odsetek, W tej metodzie procent czcionki można zwiększyć z 100%.

Przykład: właściwość wielkości czcionki CSS o wartościach procentowych

Teraz przypisamy różne wartości procentowe do "rozmiar czcionki" właściwości elementów akapitu:

Ma 130% tekstu wielkości czcionki.

Ma 120% tekstu wielkości czcionki.

Ma 90% tekstu wielkości czcionki.

Ma 70% tekstu wielkości czcionki.

Wyjście

CSS responsywna właściwość wielkości czcionki

Korzystanie z CSS responsywna właściwość wielkości czcionki, Możesz także ustawić rozmiar tekstu zgodnie z szerokością okien okna przeglądarki. W tym celu „VW” Wartość jednostkowa jest wykorzystywana, podczas gdy 1VW = 1% szerokości rzutni.

Notatka: Jeśli użytkownik nie definiuje rozmiaru czcionki tekstu, domyślny rozmiar tekstu jest równy 16 px lub 1EM.

Przykład: CSS responsywna właściwość wielkości czcionki

Przykład responsywny tekst

Zmień rozmiar okna przeglądarki, aby sprawdzić skalowalność tekstu.

Wyjście

W powyższym przykładzie tekst może być zmieniany zgodnie z przeglądarką i będzie podążać za rozmiarem okna przeglądarki.

Wniosek

W CSS właściwość wielkości czcionki jest wykorzystywana do ustawiania rozmiaru elementu tekstowego, a jego wartość może być „Predefiniowane” lub „niestandardowe”. Wiele jednostek pomiarów, takich jak piksele, EM, rzutnia, szerokość i wartości procentowe są określone jako wartości właściwości wielkości czcionki. W tym spisie omówiono właściwość wielkości czcionki CSS i wykazał metodę jawnego użycia predefiniowana i niestandardowa właściwość wielkości czcionki Wartości elementów tekstowych.