Jak najlepiej wykorzystać czcionki w CSS?

Ten artykuł wprowadzi Cię w prosty, ale ważny temat, jakim są Czcionki w a także przedstawi praktyczną demonstrację na ten temat. Poniższe wskazówki zostaną omówione w tym artykule,

• Czcionki w CSS
• Atrybuty w czcionce CSS
• atrybut stylu czcionki
• atrybut wagi czcionki
• atrybut rozmiaru czcionki
• atrybut rodziny czcionek

Witryny internetowe zawierają treści w postaci obrazów, audio, wideo i treści tekstowych. Jednak większość stron internetowych nadal opiera się na tekście jako dominującym formacie. Dzieje się tak, ponieważ zwykły tekst ma kilka bardzo znaczących zalet.

Czytelność nieinwazyjna - chcesz sprawdzić najnowszy wynik meczu w biurze. Oczywiście potrzebujesz szybkiej aktualizacji tekstu, a nie hałaśliwego wideo!
Niskie wymagania dotyczące przepustowości sieci - treść tekstowa może być ładowana nawet w obszarach o słabej łączności z Internetem, podczas gdy multimedia nie mogą.
Przyjazny dla wyszukiwania - witryny internetowe zawsze zwracają uwagę na to, jak łatwo ich treść jest zauważana w wyszukiwarkach. Tekst najlepiej się do tego nadaje, przynajmniej do czasu, gdy sztuczna inteligencja całkowicie przejmie internet!

Podczas formatowania treści tekstowej projektanci stron internetowych mają tylko kilka parametrów do pracy - czcionkę, wyrównanie, podświetlenie i kolor. Wybór odpowiedniej czcionki do tekstu to kluczowy wybór. Standardową praktyką jest używanie znaczników czcionek CSS do definiowania czcionek tekstu na stronach HTML.
Jeśli dopiero zaczynasz przygodę z programowaniem w języku HTML, obejrzyj tutaj podstawową prezentację dla początkujących. Możesz przeczytać podstawy CSS, zanim zaczniesz poznawać czcionki CSS.

Aby zapoznać się z obszernym samouczkiem dotyczącym CSS, odwiedź Samouczek Edureka CSS dla początkujących. Otrzymasz doskonałą informację na temat sposobu, w jaki CSS ma być używany do rozszerzania projektowania stron internetowych HTML.

Przechodząc do tego artykułu o czcionkach w CSS

Czcionki w CSS

Czcionka to w zasadzie zestaw cech związanych z wyświetlaniem tekstu. Czcionki różnią się między sobą rozmiarem, wcięciem, szerokością, pochyleniem i tak dalej. Zacznijmy od podstawowego wyświetlania tekstu przy użyciu różnych czcionek.

Przykład 1: Nagłówki i akapity z różnymi czcionkami

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Akapit zapisany kursywą i pogrubioną czcionką Georgia
 

 Przykład 1: Wyjście 

W przykładzie 1 mamy 3 różne wiersze tekstu w różnych czcionkach. Można zauważyć, że każda z czcionek różni się szerokością znaków, wcięciami itp.

Przechodząc do tego artykułu o czcionkach w CSS

Atrybuty w czcionce CSS

Czcionki CSS mają 4 podstawowe atrybuty - styl, wagę, rozmiar i rodzinę. Atrybut stylu oznacza normalny lub kursywę. Grubość pokazuje czcionkę jako zwykłą lub pogrubioną. Wagę można również wyrazić liczbowo. Rozmiar to po prostu rozmiar czcionki większy rozmiar, większy wygląd tekstu. Istnieje wiele sposobów przypisania rozmiaru czcionki, szczegółowe opisy podano w dalszych rozdziałach. Atrybut rodziny polega na przypisaniu nazwy czcionki do tekstu.

W przykładzie 1 użyliśmy różnych nazw czcionek w nagłówkach i akapitach. Pod tagami h1 i p widzimy listę dwóch nazw czcionek, podczas gdy znacznik h2 nazywa tylko jedną czcionkę. To jest definicja rodziny czcionek, więcej o tym później.

Przechodząc do tego artykułu o czcionkach w CSS

atrybut stylu czcionki:

Można ustawić dwa podstawowe style: „normalny” i „kursywa”. Kursywa ma być z natury pochylona. Normalna jest domyślną opcją, która jest prosta. Jest jeszcze jedna rzadziej używana opcja o nazwie „ukośny”, która przypomina kursywę w większości czcionek. Możesz także ustawić styl na „dziedziczenie”, aby pobierał styl czcionki z elementu nadrzędnego.

Przechodząc do tego artykułu o czcionkach w CSS

atrybut wagi czcionki:

Ten atrybut decyduje, czy czcionka powinna być gruba, czy cienka. Może być ustawiony na „normalny” lub „pogrubiony”. Wartość domyślna to normalna. Ta wartość może być również ustawiona jako numeryczna. Waga 400 oznacza normalną, a 700 pogrubioną. Istnieje kilka innych ustawień (od 100 - bardzo lekkie do 900 - bardzo pogrubione), ale nie są one obsługiwane przez wszystkie czcionki. Wszystkie opcje wagi pokazano w przykładzie 3.

Przechodząc do tego artykułu o czcionkach w CSS

atrybut rozmiaru czcionki:

Atrybut rozmiaru można ustawić na wiele sposobów. Wypiszmy poniżej te sposoby.
● Wartość wyliczona, np. „Średni”, „duży”. W rzeczywistości, podobnie jak rozmiary odzieży, wartości mogą wynosić od XX Small do XX Large!
● Ustaw w stosunku do elementu nadrzędnego jako „większy” lub „mniejszy”.
● Wartość procentowa rozmiaru elementu nadrzędnego.
● Ustaw jako „dziedziczenie”, aby bezpośrednio przyjąć rozmiar elementu nadrzędnego.
● Jako wartość bezwzględna w jednostkach px (piksele), pt (punkty) lub cm (centymetr)
„Średni” to domyślna wartość ustawiona dla tego parametru.

Przechodząc do tego artykułu o czcionkach w CSS

atrybut rodziny czcionek:

W HTML rodzina czcionek CSS służy do ustawiania nazwy czcionki. Możesz po prostu umieścić jedną nazwę czcionki w tagu. Możesz też przypisać wiele wartości jako listę rodzin czcionek, która określa priorytet, w jakim przeglądarka powinna wybrać czcionkę.
Lista ma priorytet od lewej do prawej w postaci systemu awaryjnego. Wybiera się pierwszą wartość, jeśli jest dostępna, lub sterowanie przechodzi do następnej, aż do osiągnięcia końca listy. Domyślna rodzina czcionek jest zdefiniowana w preferencjach przeglądarki.
Istnieją dwa rodzaje rodzin czcionek CSS - rodziny ogólne i rodziny czcionek.
● Rodziny ogólne - na podstawie pewnych ogólnych cech czcionki są grupowane jako „szeryfowe”, „bezszeryfowe”, „o stałej szerokości” itp. Na przykład czcionki bezszeryfowe oznaczają czcionki bez stylu szeryfowego.
● Nazwy rodzinne - czcionki należące do określonych hierarchii rodzin. Times, Arial, Courier to rodziny czcionek, a Times New Roman to przykładowa czcionka z rodziny Times.
W przykładzie 4 poniżej przedstawiono różne opcje użycia rodzin czcionek.

Kilka wspólnych punktów do zapamiętania

● Podobnie jak kilka innych właściwości CSS, niektóre ustawienia czcionek różnią się w różnych przeglądarkach. Przed użyciem niektórych rzadkich ustawień czcionek sprawdź, czy są obsługiwane przeglądarki.
● Możesz ustawić ustawienia czcionki oddzielnie, używając indywidualnych tagów stylu czcionki, grubości czcionki itp. Alternatywnie, jeśli wolisz zwarty kod, możesz użyć atrybutu skróconej czcionki ze wszystkimi wartościami w tym samym wierszu.
● W scenariuszach użytkownika, w których chcesz, aby czcionka różniła się rozmiarem w zależności od rozmiaru przeglądarki, istnieje przydatne ustawienie rozmiaru czcionki zwane elastycznym ustawieniem czcionki. Można go ustawić za pomocą jednostki vw, co oznacza „szerokość okna”. W ten sposób rozmiar tekstu będzie odpowiadał rozmiarowi okna przeglądarki.

Mam nadzieję, że znalazłeś informacje, których szukałeś w Czcionkach w CSS. Podziel się z nami swoim doświadczeniem w sekcji komentarzy poniżej. Miłego projektowania!

algorytm planowania okrężnego w c

Jeśli chcesz dowiedzieć się więcej o tworzeniu stron internetowych, zapoznaj się z przez Edureka. Szkolenie w zakresie certyfikacji w zakresie rozwoju sieci pomoże Ci nauczyć się, jak tworzyć imponujące witryny internetowe przy użyciu HTML5, CSS3, Twitter Bootstrap 3, jQuery i interfejsów API Google oraz wdrażać je w Amazon Simple Storage Service (S3).