# 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:**\
\&#xNAN;*normal, bold, bolder, lighter*\
\
**Használható számértékek:**\
\&#xNAN;*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;
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://digikiad.gitbook.io/digitalis-kiadvanyok/css/szoevegek-szoevegkoezi-elemek.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.