> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/css/szoevegek-szoevegkoezi-elemek.md).
# Szövegek, szövegközi elemek
## Szövegközi elemek jellemzői
A szövegközi elemek nem törik meg a szöveget sortöréssel, egyszerűen úgy viselkednek, mint egy szó, vagy mondat.
```markup
Lórum ipse nem kérlő linc, hanem izismély. Több ménylő
fejtő hajszolta ki,hogy a sörökök kedő. Sítos egyveklőjét
azért zubálja gyetlennek.
```
A szövegközi megjelenítésű elemekre nem érvényesülnek a doboz modell tulajdonságok. Nem határozhatjuk meg a szélességüket, és a magasságukat, illetve nem működik a margó.
A `padding` (belső margó), és a `border` (keret) használható, a blokkos elemektől némileg eltérő módon.
CSS-el megváltoztathatjuk az elemek megjelenítési módját szövegközire:
```css
div {
display: inline;
}
```
## Betűtípusok, bet**ű**családok
### **Betűcsalád (font-family)**
Betűcsaláddal határozhatjuk meg az elemeink szövegének a betűtípusát. Vesszővel elválasztva több betűtípust is megadhatunk, ezeket sorrendben megpróbálja betölteni a böngésző, ha az elsőt nem találja, megkísérli a következőt.
```css
p {
font-family: Arial, Helvetica, sans-serif;
}
```
A fenti példában az első az **Arial** betűtípus, ami "minden" Windows-os gépen megtalálható, a második a **Helvetica**, ami nagyon hasonlít az Arial betűtípusra, de OSX operációs rendszeren elterjedt. A **sans-serif** általános betűcsalád (generic-family), a böngésző az ebbe a kategóriába eső elérhető fontok közül próbál egyet betölteni.
Több font felsorolásával, és általános betűcsalád megadásával biztosíthatjuk, hogy a böngésző kezelni tudja a szöveg betűt**í**pusát, hiányzó fontok esetén is.
**Általános betűcsaládok:**
* *serif*
* *sans-serif*
* *cursive*
* *monospace*
* *fantasy*
```markup
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
```
### **Web biztos fontok**
Web biztos fontok azok a betűkészletek, amik széles körben elérhetőek a különböző operációs rendszereken. Az első nagyobb csomagot a Microsoft adta ki 1996-ban **Core fonts for the Web** néven.
Az alábbi fontokat tartalmazza: *Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings*
### **@font-face**
A `@font-face` segítségével mi is létrehozhatunk betűcsaládokat, és betölthetünk betűkészleteket a HTML állományainkba. Ehhez szükséges a böngészők számára is emészthető fontok (webfontok) használata.
{% tabs %}
{% tab title="@font-face" %}
```css
@font-face {
font-family: 'MyWebFont';
src: url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype');
font-weight: normal;
}
body {
font-family: 'MyWebFont', sans-serif;
}
```
{% endtab %}
{% tab title="Magyarázat" %}
```css
@font-face {
/* A font-family határozza meg a létrehozott betűcsalád nevét */
font-family: 'MyWebFont';
/* Az src-ben (source) adhatjuk meg a font
állományokat, vesszővel felsorolva.
A formátumot is meg kell adni, ez általában az
állománykiterjesztéssel egyezik.
*/
src: url('webfont.woff2') format('woff2'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype');
/* Megadhatjuk a betűcsalád tagjának betűvastagságát is
(vastagságonként egy @font-face-ben kell felvinni a fontokat) */
font-weight: normal;
}
body {
/* Itt hivatkozunk a @font-face-ben létrehozott új betűcsaládra. */
font-family: 'MyWebFont', sans-serif;
}
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
Az interneten elérhetőek `@font-face` generátorok, ezekkel egy adott fontból elkészíthetjük a böngészőkkel kompatibilis font állományokat, a webfontokat, és a szükséges CSS-t is. A legismertebb szolgáltatás a Font Squirrel (). Egy jó alternatíva a Transfonter (). Mindkét szolgáltató a letölthető állományok között ad egy HTLM állományt töltelékszöveggel, amiben megnézhetjük a generált fontokat.
Ha nem akarjuk mi kiszolgálni a font állományokat egy jó ingyenes alternatíva a Google font szolgáltatása (), ahol 500 fölötti fontot érünk el magyar ékezettel.
{% endhint %}
{% hint style="info" %}
Font formátumokról:
**EOT (Embedded Open Type)** - Az első webfont, de a böngészők közül csak a Microsoft Explorer/Edge böngészők támogatják. Már csak akkor használjuk, ha a webalkalmazásokat régi, elavult Microsoft böngészőkre is optimalizálni kell.
**TTF (True Type Font)** - Egy időben ez volt a legszélesebb körben támogatott webfont, bizonyos újabb böngészőkben feltételes a támogatottsága.
**WOFF (Web Open Font Format)** - Új webfont formátum, ami gyorsabb letöltődés tesz lehetővé, a régi típusokhoz hasonló, de optimalizált, tömörített formátum. A modern böngészők már mind támogatják.
**WOFF2 (Web Open Font Format v2)** - A WOFF2 még optimálisabb, kisebb, támogatottsága egyenlőre részleges, nem minden modern böngésző képes feldolgozni, így az egyes verzióval együtt érdemes használni.
**SVG (Scalable Vector Graphyc Font)** - Az SVG szabványon alapul, támogatottsága részleges, a modern böngészők csak egy része képes feldolgozni, ráadásul nem használ tömörítést, így az SVG fontok mérete túl nagy.
{% endhint %}
{% content-ref url="/pages/-LZR72\_HhNzjsE-LrzyA" %}
[Google Fonts](/digitalis-kiadvanyok/egyeb-eszkoezoek/google-fonts.md)
{% endcontent-ref %}
{% content-ref url="/pages/-LZRADHygcPypjdUBQTu" %}
[Font Squirrel](/digitalis-kiadvanyok/egyeb-eszkoezoek/font-squirrel.md)
{% endcontent-ref %}
## Betűméret (font-size)
A betűmérettel határozhatjuk meg a szöveg méretét. A böngészők a **nagy** **M** betű alapján méretezik a betűket (em méret), ezért az elterjedt mértékegységek a em, és a rem, illetve a pixelben megadott méret.
```css
p {
font-size: 16px;
}
span {
font-size: 1.125em;
}
```
## Betűvastagság (font-weight)
A `font-weight`-et (betűvastagságot) megadhatjuk kulcsszóval, vagy számmal (100-as lépésekben). Az hogy az adott érték érvényesül-e a szövegre nagyban függ az adott betűtípustól.
**Használható kulcsszavak:**\
*normal, bold, bolder, lighter*\
\
**Használható számértékek:**\
*100-900* -ig, ahol a *400* a normal méret, *700* a vastagon szedett (bold).
```css
p {
font-weight: 400;
}
span {
font-weight: bold;
}
```
Az hogy mely betű vastagság értéket lehet használni függ az adott fonttól. A legtöbb webfont, vagy rendszerfont a 400-as (normal), és a 700-as (bold) értékekeket támogatja csak.
## Betűstílus (font-style)
A betűstílussal tehetünk dőltté egy szöveget. Alapértéke a *normal*, a dőlt értékei *italic* vagy *oblique*.
```css
p {
font-style: normal;
}
span {
font-style: italic;
}
```
## Betűvariáns (font-variant)
Betűvariáns segítségével készíthetünk kiskapitális szöveget. A kiskapitális szövegben a kisbetűk is olyan alakúak, mint a nagybetűk, de magasságuk megegyezik a kisbetűk magasságával (bizonyos betűtípusoknál eltérhet). Alapértéke a *normal*.
```css
p {
font-variant: normal;
}
span {
font-variant: small-caps;
}
```
## Szöveg igazítás (text-align)
A `text-align` segítségével lehet igazítani egy blokkos elemen belül a szöveget vízszintesen.
**Lehetséges értékei:**
* *left: balra igazítás*
* *right: jobbra igazítás*
* *center: középre igazítás*
* *justify: sorkizárt*
```css
p {
text-align: center;
}
```
## Szöveg díszítés (text-decoration)
A `text-decoration`-al húzhatjuk át, vagy alá a szöveget.
**Lehetséges értékei:**
* *none: nincs dekoráció*
* *underline: aláhúzás*
* *overline: föléhúzás*
* *line-trought: áthúzás*
```css
p {
text-decoration: none;
}
span {
text-decoration: underline;
}
```
## Szöveg behúzás (text-indent)
A `text-indent` a bekezdés első sorában behúzást hoz létre. Negatív értéke is lehet, aminek hatására ki fog lógni az elemből az első sor. Megadhatjuk százalékban is, de inkább jellemző az em, vagy a pixeles értékadás. Alapértéke *0* (nincs behúzás).
```css
p {
text-indent: 1em;
}
p {
text-indent: -1em;
}
```
## Szöveg transzformáció (text-transform)
A `text-transform`-al csupa kis vagy nagybetűssé változtathatunk egy szöveget attól függetlenül, hogy a HTML állományban hogy szerepel.
**Értékei:**
* *none: nincs*
* *capitalize: szóeleji nagybetű*
* *uppercase: csupa nagybetű*
* *lowercase: csupa kisbetű*
```css
p {
text-transform: none;
}
span {
text-transform: uppercase;
}
```
## Sormagasság (line-height)
A `line-height` határozza meg a szöveg két sora közötti távolságot. Alapértéke *normal*, megadhatjuk százalékban, vagy hosszmértékben.
```css
p {
line-height: normal;
}
span {
line-height: 1.25em;
}
```
A tartalom terület (vörös vonalakkal határolva a fenti képen) a nagy M-betű magasságával egyező magasságú, gyakorlatban ez a font mérete (tipográfiában a verzál magasság, ezen túlnyúlhatnak a betűk fel- és lenyúló szárai). A szövegközi mező magassága a sormagasság (kék vonalakkal határolt terület a fenti képen).
A tartalom terület és a szövegközi mező külömbsége a sortávolság (adott esetben negatív értéket is felvehet) - vonjuk ki a `line-height` (sormagasság) értékéből a `font-size` (betűméret) értékét, így megkapjuk a két sor pontos távolságát.
## Szóköz (word-spacing)
A `word-spacing` határozza meg a szavak közötti távolságot. Alapértéke a *normal*, ez nullával egyenlő, a módosított értéke a betűtípus szóköz karakterének szélességét módosítja, akár negatív irányban is, ekkor egymásra csúsznak a szavak.
```css
p {
word-spacing: normal;
}
span {
word-spacing: 0.125em;
}
```
## Betűköz (letter-spacing)
A `letter-spacing` (betűköz) határozza meg a betűk karaktermezői közötti távolságot. Alapértéke a *normal*, ezt módosíthatjuk hosszmérték megadásával. Értéke lehet negatív, ebben az esetben a betűk közelebb kerülnek egymáshoz.
```css
p {
letter-spacing: normal;
}
span {
letter-spacing: 0.125em;
}
```
