Rozmiar czcionki JavaScript

| | | | | | | | | |

Właściwość CSS font-size określa rozmiar czcionki dowolnego elementu tekstowego na Twojej stronie lub witrynie. Właściwość Rozmiar czcionki można zastosować do dowolnej klasy, identyfikatora lub elementu, który zawiera zawartość tekstową. Właściwość akceptuje wartości px, em, rem, vw, vh i użycie słów kluczowych.

Większość programistów używa kombinacji różnych rozmiarów czcionek do stylizacji strony internetowej. Na przykład programista sieci Web może użyć dużej czcionki do nagłówków i mniejszej czcionki do tekstu podstawowego i innych. Wielu się zastanawia: jak zmienić rozmiar czcionki w CSS lub HTML

CSS rozmiar czcionki? pozwala programistom aby ustawić rozmiar czcionki w akapicie lub wierszu tekstu na stronie internetowej.

Ten samouczek omawia, odnosząc się do przykładów, jak używać właściwości rozmiaru czcionki . Postępując zgodnie z tym przewodnikiem, będziesz ekspertem w zmianie rozmiaru tekstu.

CSS Rozmiar tekstu

Właściwy styl czcionki jest ważną częścią projektowania stron internetowych. Tekst bez stylu powoduje trudności z czytaniem dla odwiedzających, co prawie na pewno powoduje nieprzyjemne wrażenia na stronie.

Istnieje wiele stylów CSS dla czcionek, których można użyć do dostosowania wyglądu tekstu, takich jak font-weight , font-family, tekst dekoracji i kolor . Inną ważną właściwością jest rozmiar czcionki , który kontroluje rozmiar czcionki w bloku tekstu

Składnia rozmiaru czcionki CSS jest następująca:

sizeValue to rozmiar czcionki, której chcesz użyć w bloku tekstu. Istnieje kilka sposobów określenia rozmiaru czcionki używanej przez blok. tekst Metody, które omówimy w tym artykule to:

  • piksele
  • em
  • główne jednostki
  • jednostka wyświetlania
  • słowa kluczowe

Przyjrzyjmy się przykładowi zastosowania każdego podejścia do rozmiaru czcionki na stronie internetowej.

Dostosowywanie rozmiaru czcionki za pomocą pikseli

Jeden z ten najczęstszymi sposobami ustawienia rozmiaru znaku jest użycie pikseli.

Piksele są dobrą jednostką miary, ponieważ pozwalają na precyzję. Na jednostkę pikseli duży wpływ mają systemy operacyjne lub przeglądarki internetowe. Piksel na jednym ekranie to piksel na innym. Określona wartość piksela wydaje się mniej więcej taka sama w różnych przeglądarkach

Jednak użycie pikseli do ustawienia rozmiaru czcionki w bloku tekstu jest ograniczeniem:. Dostępność. Rozmiary czcionek w pikselach ustawione za pomocą pomocy nie są dostępne, ponieważ niektóre przeglądarki nie pozwalają użytkownikom na dostosowanie rozmiaru czcionki. Na przykład użytkownicy niedowidzący mogą mieć trudności z korzystaniem z witryny, która używa pikseli do ustawiania rozmiaru znaków

Załóżmy, że stworzymy strona internetowa o rozmiarze czcionki 28px dla wszystkich elementów

i 12px dla wszystkich

może użyć następującego kodu, aby to zrobić.

W naszym kodzie użyliśmy ustawia selektora CSS rozmiaru czcionki wszystkich

28px i wszystkie

12px. Poniższy fragment pokazuje, jak te elementy wyglądają w naszych nowych rozmiarach czcionek:

>

Kliknij Obraz przycisku

Innym powszechnym sposobem ustawienia rozmiaru czcionki w CSS jest użycie wymiarów em. Jednostka miary em odnosi się do rozmiaru czcionki rodzica. Jeśli nie chcesz, wprowadź rozmiar czcionki 2 em , rozmiar czcionki będzie dwa razy większy niż w przypadku elementu nadrzędnego.

Przykład skalowania czcionek CSS za pomocą ems

Załóżmy na przykład, że masz przechowywany akapit tekstu w polu. Rozmiar czcionki w polu to 20px. Jeśli określiłeś, że rozmiar czcionki akapitu tekstu to 1em, rozmiar czcionki akapitu to 20px . Jest równy rozmiarowi czcionki elementu nadrzędnego.

Jeśli nie ustawiłeś rozmiaru czcionki dla elementu nadrzędnego, przeglądarka użyje domyślnej wartości określonej dla tej przeglądarki. Zwykle jest to 16px. Przez Dlatego, jeśli nie określiłeś rozmiaru czcionki, 1em def ault 16px 2em domyślny 32px .

Załóżmy, że rozmiar czcionki naszej strony internetowej to 16px. Chcemy, aby wszystkie akapity tekstu pojawiały się przy użyciu tego rozmiaru czcionki , co oznacza, że powinniśmy użyć wartości 1em. Dodatkowo chcemy, aby wszystkie nasze głowy pojawiały się z czcionką o rozmiarze 24px, co jest równe 1.5em.

Możemy użyć następującego kod, aby to zrobić:

W naszym kodzie rozmiar wszystkich paragrafów będzie wynosił 16px (1em = 16px z domyślne) i wszystkie elementy

będą miały wartość 24px (1.5em = 24px).

Tak wyglądałby nasz tekst na stronie internetowej:

Nell "przykład powyżej, możesz zobaczyć nowe style dla obu naszych < h1> i

Należy zauważyć, że jeśli nasz

pojawił się wewnątrz pudełka z inny rozmiar czcionki, rozmiar naszego

ulegnie zmianie. Dzieje się tak, ponieważ wartości em ‚Ęã‚Ęã dziedziczą swój rozmiar czcionki po rodzicach.

Zdefiniuj rozmiar czcionki za pomocą Root em

Court root em, rem to nowa jednostka miary wprowadzona w CSS3, która może być używana do ustawiania rozmiaru czcionki. Wartości przy użyciu rem są połączone z głównym elementem , a nie z elementem nadrzędnym.

wartości ‚Ęã‚Ęãsą przydatne, ponieważ pozwalają określić wartość w odniesieniu do całego dokumentu. W ten sposób rozmiar tekstu nie zostanie zmieniony, jeśli element nadrzędny ma inną wartość em

Załóżmy, że masz stronę internetową z domyślnym rozmiarem czcionki 16px. Podobnie jak w naszym poprzednim przykładzie, wszyscy chcemy, aby

pojawił się w 24px, a wszystkie akapity, aby pojawiły się w 16px. Możemy zdefiniować te rozmiary czcionek za pomocą następującego kodu:

Nasz kod jest prawie taki sam jak w poprzednim przykładzie. Jedyną różnicą jest to, że dla nas jednostką miary użycia jest rem zamiast em. W tym przykładzie nasze rozmiary czcionek zawsze będą wynosić 24px i 16px odpowiednio dla nagłówków i akapitów najwyższego poziomu. Dzieje się tak, ponieważ domyślny rozmiar czcionki na naszej stronie internetowej to 16px.

Ustaw rozmiar czcionki za pomocą słów - klawisz

Istnieją dwa rodzaje klawiszy słowa, których możesz użyć do zdefiniowania rozmiaru czcionki w CSS.

Bezwzględne słowa kluczowe służą do zdefiniowania rozmiaru czcionki, który pozostaje taki sam niezależnie od zmian na stronie internetowej. Słowa kluczowe, których możesz użyć do zdefiniowania bezwzględnego rozmiaru czcionki to:

Wartości w nawiasach są oparte na przeglądarce, której domyślny rozmiar czcionki to 16px.

Z drugiej strony, słowa kluczowe względne , definiuje rozmiar czcionki, który będzie się zmieniał w zależności od rozmiaru czcionki w innym miejscu na stronie internetowej. Względne słowa kluczowe, których możesz użyć, to: najmniejszy i największy. Te słowa kluczowe są przydatne, ponieważ umożliwiają zmianę rozmiaru czcionek, gdy inne rozmiary czcionek na stronie zmieniają się

Załóżmy, że chcemy ustawić rozmiar wszystkich elementów

na stronie na 24px (x-large) i wszystkie

; na 18px (duże). Możemy to zrobić za pomocą tego kodu:

Kliknij. „Obraz "height =" 24 "class =" wp-image-13930 "style =" szerokość: 24px; "src =" https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03/ iconfinder_play-circle-outline_326584.png? straty = 1 & band = 1 & webp = 1 "alt =" Obraz klucz " kod wykonania ", trójkąt w kole "srcset =" https://744025.smushcdn.com/1245953/wp-content/ uploads / 2020/03/iconfinder_play-circle-outline_326584-20x20.png?lossy= 1 & strip = 1 & webp = 1 20w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03 / iconfinder_play -okrąg zarys_326584.p ng? Strata = 1 i pasek = 1 i webp = 1 24w "rozmiar =". (max -width: 24px) 100vw, 24px przycisk "> w kodzie edytora powyżej, aby zobaczyć dane wyjściowe naszego HTML / CSS

Rozmiar znaków dla naszego

i

to odpowiednio 24px i 18px. Jednak nie określiliśmy ich wymiary za pomocą pikseli. Zamiast tego użyliśmy słów - klucze do domyślnego rozmiaru czcionki oferowanego przez przeglądarkę.

Ustaw rozmiar czcionki za pomocą jednostek wyświetlania

Jednostki wyświetlania są obliczane jako procent rozmiaru okna przeglądarki . Dwie jednostki wyświetlania obsługiwane przez CSS to: wysokość wyświetlania (vh) i szerokość wyświetlania (vw)

Od wyświetlane jednostki to procent rozmiaru okna przeglądarki , na przykład 1VH jest równy 1% wysokości okna . Więc jeśli masz duże okno o rozdzielczości 1000 pikseli, 1VH równa się 10px.

Korzystanie z jednostek okien jest przydatne, ponieważ rozmiar czcionki zmieni się po zmianie rozmiaru okna przeglądarki. To z kolei pomaga zapewniają bardziej przystępne środowisko użytkownika, które można dostosować do przeglądarek i urządzeń o różnych rozmiarach.

Załóżmy, że chcesz utworzyć witrynę, której nagłówki zajmują 4% szerokości okna . A których punkty stanowią 1% szerokości widocznego obszaru. Możemy to zrobić za pomocą tego kodu:

Kliknij Obraz przycisku

Jeśli zmienisz rozmiar przeglądarki, rozmiar tych nagłówków ulegnie zmianie.

Wniosek

Właściwość rozmiaru czcionki jest używana w CSS (i tym samym HTML) do zmiany rozmiaru czcionki. akceptuje szereg jednostek miary, w których można zobaczyć rozmiar czcionek, w tym piksele, emy, remy, słowa kluczowe i jednostki wyświetlania. Można go zastosować do CSS i identyfikatorów , a także samych elementów.

Ten samouczek pokazał podstawy rozmiaru czcionki CSS. Możesz teraz zacząć używać atrybutu rozmiaru czcionki jak ekspert.


Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method