Jak zmienić rozmiar czcionki w HTML

HTML jest jak dokument MS-Word i Google Docs, ale różnica polega na tym, że dokumenty HTML pokazują treść przez przeglądarkę. Teraz, gdy formatujemy tekst w MS-Word i Google Docs, HTML pozwala nam również formatować tekst w dokumentach HTML za pomocą właściwości CSS.

W tym artykule zobaczymy, jak zmienić rozmiar czcionki w HTML:

• za pomocą pikseli
• Używanie procentowego %
• Według rozmiaru ekranu
• Używając efemerycznej wartości jednostkowej

Jak zmienić rozmiar czcionki w HTML za pomocą właściwości wielkości czcionki?

W HTML rozmiar czcionki można zmienić przez właściwość wielkości czcionki CSS. Właściwość wielkości czcionki obsługuje listę opcji zmiany wielkości czcionki zgodnie z pewnymi kryteriami. W tej sekcji opisano listę możliwych opcji właściwości wielkości czcionki, aby zmienić rozmiar czcionki W html.

- Za pomocą pikseli (PX)

Możemy zmienić rozmiar czcionki za pomocą właściwości wielkości czcionki CSS i ustawić jej wartość w pikselach. Pixel to jednostka pomiarowa do określenia wysokości, szerokości, wielkości czcionki itp. 1 piksel reprezentuje 1/96. część cala na ekranie. Poniższy praktyczny przykład pokaże użycie tej właściwości z wartościami pikseli. Domyślnie rozmiar czcionki wynosi 16 pikseli.

Kod:

To jest normalny rozmiar czcionki w dokumencie HTML.

Rozmiar czcionki jest zmieniany na 30 pikseli za pomocą właściwości wielkości czcionki CSS.

W tym kodzie piszemy dwa akapity i zmieniamy rozmiar jednego akapitu na 25px za pomocą właściwości wielkości czcionki CSS.

Wyjście:

Wyjście pokazuje, że rozmiar czcionki jest skutecznie zmieniany w pikselach.

- Używanie procentowego %

Możemy również zmienić rozmiar czcionki, ustawiając wartość właściwości wielkości czcionki CSS w procentach w stosunku do wielkości ciała dokumentu HTML, co oznacza, że ​​dajemy wartość w procentach. Spójrzmy na poniższy przykład, aby lepiej zrozumieć.

Kod:

To jest normalny rozmiar czcionki w dokumencie HTML.

Rozmiar czcionki zmienia się w procentach za pomocą właściwości wielkości czcionki CSS.

W tym kodzie tworzymy dwa akapity i zmieniamy rozmiar drugiego akapitu za pomocą właściwości wielkości czcionki CSS i ustawiają jej wartość na 150 procent.

Wyjście:

To wyjście pokazuje, że pomyślnie zmieniliśmy rozmiar czcionki, określając wartość w procentach.

- Ustaw rozmiar czcionki zgodnie z rozmiarem ekranu

Rozmiar czcionki można również zmienić dynamicznie. Oznacza to dynamicznie nasz rozmiar czcionki w zależności od rozmiaru ekranu. Aby zmienić rozmiar czcionki według używanego ekranu VW (szerokość rzutni). Poniższy przykład pokazuje użycie wartości VW w właściwości wielkości czcionki CSS.

Kod:

To jest normalny rozmiar czcionki w dokumencie HTML.

Rozmiar czcionki zmienia się w procentach za pomocą właściwości wielkości czcionki CSS.

W tym kodzie tworzymy dwa akapity i zmieniamy rozmiar jednego akapit.

Wyjście:

Wyjście pokazuje, że akapit o normalnym rozmiarze tekstu pozostaje statyczny, podczas gdy akapit, który używa VW wartość, aby zmienić rozmiar czcionki zmienia się w zależności od ekranu.

- Używając efemerycznej wartości jednostkowej

Możemy zmienić rozmiar czcionki za pomocą właściwości wielkości czcionki CSS i ustawienie jej wartości na EM. Mówi się, że 1EM jest równy obecnej wielkości czcionki zorganizowanej czcionki z dokumentu HTML. Domyślnie normalny rozmiar czcionki dokumentu HTML wynosi 16 pikseli, więc możemy powiedzieć, że 1EM = 16 pikseli. Poniższy praktyczny przykład pokazuje użycie jednostki EM.

Kod:

To jest normalny rozmiar czcionki w dokumencie HTML.

Rozmiar czcionki zmienia się w procentach za pomocą właściwości wielkości czcionki CSS.

W tym kodzie zmieniliśmy rozmiar akapitu, używając właściwości wielkości czcionki CSS i ustawiliśmy jej wartość na 2 EM, która jest równa 32 pikseli.

Wyjście:

To wyjście pokazuje, że zmieniliśmy rozmiar czcionki za pomocą wartości EM właściwości wielkości czcionki CSS.

Proszę bardzo! Możesz teraz skutecznie zmienić rozmiar czcionki w HTML, używając dowolnej z wyżej wymienionych metod.

Wniosek

W HTML możemy zmienić rozmiar czcionki za pomocą właściwości wielkości czcionki CSS i ustawić jej wartości w pikselach, procentach, szerokości rzutni i efemerycznej jednostce. W tym artykule przeszliśmy przez wszystkie zestawy wartości, które można użyć z właściwością wielkości czcionki CSS, aby zmienić rozmiar czcionki w HTML. Piksele, procent i emer.