CSS
Typografia

Składnia

• font: [ styl czcionki ] [wariant czcionki] [grubość czcionki] rozmiar czcionki [/ wysokość linii] rodzina czcionek ;
• styl czcionki : styl czcionki
• wariant czcionki : wariant czcionki
• font-weight: font-weight ;
• rozmiar -czcionki: rozmiar-czcionki ;
• wysokość linii : wysokość linii ;
• font-family: font-family ;
• kolor: kolor ;
• quotes: none | string | initial | inherit ;
• font-stretch: font-stretch ;
• text-align: text-align ;
• text-indent: length | initial | inherit ;
• przepełnienie tekstu: klip | elipsa | ciąg | inicjał | dziedziczenie ;
• transformacja tekstu: brak | wielkie litery | wielkie litery | małe litery | początkowe | dziedziczenie ;
• text-shadow: h-shadow v-shadow rozmycie promień kolor | none | initial | inherit ;
• font-size-adjust: number | none | initial | inherit;
• font-stretch: ultra-skondensowany | extra-skondensowany | skondensowany | częściowo skondensowany | normalny | częściowo rozszerzony | rozwinięty | ekstra-rozszerzony | ultra-rozszerzony | początkowy | dziedziczenie;
• łączniki: brak | instrukcja | auto ;
• tab-size: liczba | długość | początkowa | dziedziczenie ;
• odstępy między literami: normalne | długość | początkowe | dziedziczenie ;
• odstępy między wyrazami: normalne | długość | początkowe | dziedziczenie ;

Parametry

Uwagi

Rozmiar czcionki

HTML:

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

CSS:

#element-one {
    font-size: 30px;   
}

#element-two {
    font-size: 10px;
}

Tekst w #element-one będzie miał rozmiar 30 30px , a tekst w #element-two będzie miał rozmiar 10 10px .

The Shorthand

Ze składnią:

element {
    font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

Możesz mieć wszystkie style związane z font w jednej deklaracji ze skrótem font . Wystarczy użyć właściwości font i ustawić wartości we właściwej kolejności.

Na przykład, aby pogrubić wszystkie elementy p czcionką o wielkości 20 pikseli i używając Arial jako rodziny czcionek, zwykle koduje się go w następujący sposób:

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

Jednak czcionka może być skrócona w następujący sposób:

p {
    font: bold 20px Arial, sans-serif;
}

Uwaga : ponieważ font-style font-variant font-weight , font-weight i line-height są opcjonalne, trzy z nich zostały pominięte w tym przykładzie. Należy zauważyć, że użycie skrótu resetuje inne atrybuty, które nie zostały podane. Inną ważną kwestią jest to, że dwa niezbędne atrybuty do działania skrótu font-size font-family . Jeśli nie są one uwzględnione, skrót jest ignorowany.

Wartość początkowa dla każdej właściwości:

• font-style: normal;
• font-variant: normal;
• font-weight: normal;
• font-stretch: normal;
• font-size: medium;
• line-height: normal;
• font-family - zależy od agenta użytkownika

Stosy czcionek

font-family: 'Segoe UI', Tahoma, sans-serif;

Przeglądarka spróbuje zastosować czcionkę „Segoe UI” do znaków w elementach objętych powyższą właściwością. Jeśli ta czcionka nie jest dostępna lub czcionka nie zawiera glifu dla wymaganego znaku, przeglądarka wróci do Tahoma i, w razie potrzeby, dowolnej czcionki bezszeryfowej na komputerze użytkownika. Pamiętaj, że nazwy czcionek zawierające więcej niż jedno słowo, takie jak „Segoe UI”, muszą zawierać pojedyncze lub podwójne cudzysłowy.

font-family: Consolas, 'Courier New', monospace;

Przeglądarka spróbuje zastosować czcionkę „Consolas” do znaków w elementach objętych powyższą właściwością. Jeśli ta czcionka nie jest dostępna lub czcionka nie zawiera glifu dla wymaganego znaku, przeglądarka wróci do „Courier New” i, w razie potrzeby, dowolnej czcionki o stałej szerokości na komputerze użytkownika.

Odstępy między literami

h2 {
  /* adds a 1px space horizontally between each letter;
     also known as tracking */
  letter-spacing: 1px;
}

Właściwość odstępów między literami służy do określania odstępu między znakami w tekście.

! odstępy między literami obsługują również wartości ujemne:

p {
  letter-spacing: -1px;
}

Zasoby: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

Przekształcanie tekstu

Właściwość text-transform pozwala zmienić wielkość liter w tekście. Prawidłowe wartości to: uppercase , uppercase capitalize , lowercase , initial , inherit i none

CSS:

.example1 {
    text-transform: uppercase;
}
.example2 {
    text-transform: capitalize;
}
.example3 {
    text-transform: lowercase;
}

HTML

<p class="example1">
    all letters in uppercase  <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
    all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
    all letters in lowercase  <!-- "all letters in lowercase" -->
</p>

Wcięcie tekstu

p {
    text-indent: 50px;
}

Właściwość text-indent określa, ile tekstu spacji poziomej należy przesunąć przed początkiem pierwszego wiersza treści tekstu elementu.

Zasoby:

• Wcięcie tylko pierwszego wiersza tekstu w akapicie?
• https://www.w3.org/TR/CSS21/text.html#propdef-text-indent
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Dekoracja tekstu

Właściwość text-decoration służy do ustawiania lub usuwania dekoracji z tekstu.

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

dekoracja tekstu może być używana w połączeniu ze stylem dekoracji tekstu i kolorami dekoracji tekstu jako skrótową właściwością:

.title { text-decoration: underline dotted blue; }

To jest skrócona wersja

.title {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

Należy zauważyć, że następujące właściwości są obsługiwane tylko w przeglądarce Firefox

• tekst-dekoracja-kolor
• linia do dekoracji tekstu
• styl dekoracji tekstowej
• pomiń tekst-dekorację

Przepełnienie tekstu

Właściwość text-overflow dotyczy sposobu, w jaki przepełniona treść powinna być sygnalizowana użytkownikom. W tym przykładzie ellipsis reprezentuje obcięty tekst.

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

Niestety text-overflow: ellipsis działa tylko na jednym wierszu tekstu. Nie ma sposobu na obsługę elipsy w ostatnim wierszu w standardowym CSS, ale można to osiągnąć za pomocą niestandardowej implementacji Flexboksów w pakiecie WebKit.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

Przykład (otwarty w Chrome lub Safari):

http://jsfiddle.net/csYjC/1131/

Zasoby:

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

Odstępy między wyrazami

Właściwość odstępów między wyrazami określa zachowanie odstępów między znacznikami i słowami.

Możliwa wartość

• dodatnia lub ujemna długość (przy użyciu em px vh cm itp.) lub procent (przy użyciu % )
• słowo kluczowe normal używa domyślnych odstępów między czcionkami
• słowo kluczowe inherit pobiera wartość z elementu nadrzędnego

CSS

.normal    { word-spacing: normal; }
.narrow    { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

HTML

<p>
  <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

Demo online

Spróbuj sam

Dalsza lektura:

• odstępy między wyrazami - MDN
• odstępy między słowami - w3.org

Kierunek tekstu

div {
    direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
    direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
    writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
    writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
    writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

Właściwość direction służy do zmiany poziomego kierunku tekstu elementu.

Składnia: direction: ltr | rtl | initial | inherit;

Właściwość writing-mode zmienia wyrównanie tekstu, dzięki czemu można go czytać od góry do dołu lub od lewej do prawej, w zależności od języka.

Składnia: direction: horizontal-tb | vertical-rl | vertical-lr;

Wariant czcionki

Atrybuty:

normalna

Domyślny atrybut czcionek.

małe czapki

Ustawia każdą literę na wielkie, ale zmniejsza małe litery (z oryginalnego tekstu) niż litery, które pierwotnie były wielkie.

CSS:

.smallcaps{
   font-variant: small-caps;
}

HTML:

<p class="smallcaps">
    Documentation about CSS Fonts
    <br>
    aNd ExAmpLe
</p>

OUPUT:

Uwaga: Właściwość font-variant jest skrótem dla właściwości: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures i font-variant-east-asian.

cytaty

Właściwość quotes służy do dostosowywania otwierających i zamykających znaków cudzysłowu znacznika <q> .

q {
    quotes: "«" "»";
}

Cień tekstu

Aby dodać cienie do tekstu, użyj właściwości text-shadow . Składnia jest następująca:

text-shadow: horizontal-offset vertical-offset blur color;

Cień bez promienia rozmycia

h1 {
  text-shadow: 2px 2px #0000FF;
}

Tworzy to efekt niebieskiego cienia wokół nagłówka

Cień z promieniem rozmycia

Aby dodać efekt rozmycia, dodaj argument opcji blur radius

h1 {
  text-shadow: 2px 2px 10px #0000FF;
}

Wiele cieni

Aby nadać elementowi wiele cieni, oddziel je przecinkami

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}