Kerning czcionki CSS

Kaskadowy arkusz stylu, CSS to kod stylu składający się z tagów używanych do dodawania stylu do zawartości HTML, które są tworzone za pomocą tagów HTML. Wiadomo, że HTML i CSS mają znaczenie w tworzeniu i projektowaniu frontu stron internetowych. Arkusz CSS zawiera kilka właściwości stosowanych do każdej zawartości HTML w określony sposób. Podstawową zawartością HTML jest „tekst”. Jak wiemy, ilekroć widzimy jakąkolwiek stronę internetową lub stronę internetową, SMS -y są zawsze obecne w formie akapitu, nagłówka lub dowolnego linku.

Widzieliśmy również rozszerzone litery jednego słowa, które są równe z każdym innym zdaniem. To wszystko z powodu właściwości CSS związanej z tekstem. W tym artykule wyjaśniono tekst treści HTML i jedną z właściwości, które musimy zastosować do tekstu, który jest kerningiem czcionki.

Wprowadzenie do HTML i CSS

Znacznik HTML zawiera dwie sekcje: głowa i ciało . Cała zawartość HTML jest zapisywana wewnątrz sekcji ciała tagów HTML. HTML zawiera głównie treść, która ma zarówno tagi otwierania, jak i zamykające.

Rozmowy CSS pochodzi z trzech rodzajów: wbudowniczych, wewnętrznych i zewnętrznych CSS. Wewnętrzne CSS jest zadeklarowane w sekcji głowy ciała HTML. Jego dalsze wyjaśnienie jest stosowane w momencie wdrożenia. Podobnie właściwość kerningu czcionki jest stosowana w stylu znacznika głowy. Podczas gdy tekst jest deklarowany wewnątrz sekcji ciała w postaci akapitu lub nagłówka.

CSS Kerning Warun of Font

Kerning czcionki to właściwość związana z tekstem. Właściwość czcionki to styl tekstowy, który zawiera kolor, czcionkę, wyrównanie itp. Podobnie kerning jest jedną z właściwości tekstu CSS. Jest stosowany do liter słowa dowolnego zdania. Wyjaśnia, ile liter słowa są rozmieszczone. Wartość kerningu może być znakiem dodatnim lub znakiem ujemnym.

• Wartość dodatnia: Pozytywna wartość odstępów literowych rozprzestrzenia lub rozszerza się dalej. Przestrzeń między dwoma literami jest zwiększona o wartość, którą stosujemy.
• Ujemna wartość: Znak ujemny o wartości odstępu literowego zbliża postać blisko siebie, minimalizując lub wykluczając odległość między znakiem do charakteru.

Wartość odstępów listy można podać w różnych jednostkach. Na przykład wartości podano w pikselach, EM i w normalnej sytuacji. Każda jednostka ma inny efekt. Wartość normalna ma najmniejszą różnicę przestrzeni w porównaniu z czcionką bez żadnego efektu kerningu. Wpływ wartości dziesiętnej jest większy niż wartość cyfrowa. Składnia tej właściwości jest następująca:

Font-kerning: wartość;

Oprócz kerningu czcionki, możemy również użyć właściwości w zakresie odcinka liter. Teraz wdrażamy kilka przykładów, aby wyjaśnić pojęcie kerningu czcionki.

Przykład 1: Różnica z kerningiem i bez

W tym przykładzie użyliśmy właściwości odstępów literowych o wartości normalnej, aby sprawdzić różnicę między znakami, które nie zastosowały efektu kerningu, a tymi, którzy zastosowali ten efekt.

Rozważ sekcję ciała kodu HTML. Użyj znacznika nagłówka, aby zadeklarować prosty nagłówek

. Następnie użyj tagów akapitowych. Oba akapity są stosowane z nazwą klasy CSS. Te nazwy klas są zadeklarowane w znaczniku stylu głowy, który zostanie omówiony później.

tekst z kerningiem czcionki.

Podobnie zadeklarowany jest również drugi znacznik akapitu.

W znaczniku stylu użyliśmy obu przypadków zadeklarowanych w znacznikach akapitu. Klasa kerningowa zawiera wszystkie właściwości związane z czcionką, w tym normalną właściwość czcionki. Ta właściwość czcionki odnosi się do wartości odstępów literowych, która jest traktowana normalnie. Następnie rodzina czcionek jest stosowana jako serif, a właściwość rozmiaru jest również stosowana do tekstu.

.kerning
Font-kerning: Normal;
Rodzina czcionki: Serif;
Rozmiar czcionki: 20px;

Podczas gdy w klasie nieporęcznej właściwość rolowania czcionki jest traktowana jako żadna. Oznacza to, że tekst w niniejszym akapicie jest zadeklarowany bez zmiany odstępów literowych słów.

.nonkerning
Font-kerning: Brak;

Reszta właściwości pozostaje taka sama.

Zapisz kod w pliku tekstowym z rozszerzeniem HTML. W ten sposób zobaczymy, że ikona pliku jest zmieniana na ikonę przeglądarki zamiast symbolu edytora. Wykonaj ten plik w Chrome, aby zobaczyć dane wyjściowe.

Zobaczysz, że w pierwszym akapicie nie ma żadnego wpływu, w którym użyliśmy właściwości odstępów literowych lub efektu roli czcionki jako wartości normalnej. Kiedy porównujemy pierwszy akapit z drugim akapitem, który nie ma efektu kerningu, nie znajdujemy między nimi żadnych zmian.

Przykład 2:

Ten przykład zawiera różne wartości właściwości odstępów literowych. W znaczniku ciała użyliśmy pięciu akapitów, a każdy akapit jest zadeklarowany inną klasą. Nazwa klasy ujawnia działanie wartości stosowanych w momencie deklaracji. W każdej klasie używana jest inna wartość.

Na przykład używamy „.klasa EM-Wider z wartością 1EM. To sprawia, że ​​tekst jest szerszy niż inne. Podczas gdy -0.09em powoduje, że tekst staje się mocniejszy.

.Em-tight
Spacer z literami: -0.09em;

Teraz zapisz kod i zobaczymy wynik. Wszystkie linie są wyświetlane z różnymi odstępami między nimi. Pierwszy akapit to normalny. Czwarty akapit z ujemną wartością dziesiętną zbliżył litery blisko siebie.

Przykład 3:

Ten przykład obejmuje własność pierwszej linii. Jak sama nazwa wskazuje, właściwość jest zaimplementowana w pierwszym wierszu. Styl wbudowany jest stosowany do tych, którzy mają właściwość szerokości.

Tag stylu zawiera tag pierwszego wiersza akapitu, który pokazuje, że wpływa to tylko pierwsza linia obu akapitów.