CSS webes betűtípusok

Tartalomjegyzék

A CSS @font-face szabály

A webes betűkészletek lehetővé teszik a webtervezők számára, hogy olyan betűtípusokat használjanak, amelyek nincsenek telepítve a felhasználó számítógépére.

Ha megtalálta/megvásárolta a használni kívánt betűtípust, csak adja meg a betűtípust fájlt a webszerverén, és szükség esetén automatikusan letöltődik a felhasználónak.

Az Ön „saját” betűtípusait a CSS @font-face szabálya határozza meg.

Különböző betűformátumok

TrueType Fonts (TTF)

A TrueType egy betűtípusszabvány, amelyet az 1980-as évek végén fejlesztettek ki az Apple és a Microsoft. A TrueType a leggyakoribb betűformátum a Mac OS és a Microsoft számára egyaránt Windows operációs rendszerek.

OpenType Fonts (OTF)

Az OpenType a méretezhető számítógépes betűtípusok formátuma. TrueType-ra épült, és bejegyzett védjegye Microsoft. Az OpenType betűtípusokat ma gyakran használják a nagyban számítógépes platformok.

A Web Open Font Format (WOFF)

A WOFF egy weblapokon használható betűtípus. 2009-ben fejlesztették ki, és az is most W3C ajánlás. A WOFF lényegében OpenType vagy TrueType tömörítés és további metaadatok. A cél a betűtípus-terjesztés támogatása szerverről kliensre sávszélesség-korlátozott hálózaton keresztül.

A Web Open Font Format (WOFF 2.0)

TrueType/OpenType betűtípus, amely jobb tömörítést biztosít, mint a WOFF 1.0.

SVG-betűtípusok/-alakzatok

Az SVG-betűtípusok lehetővé teszik, hogy az SVG-t karakterjelként használják szöveg megjelenítése során. Az SVG 1.1 specifikáció definiáljon egy font modult, amely lehetővé teszi betűtípusok létrehozását egy SVG dokumentum. Alkalmazhatja a CSS-t SVG-dokumentumokra és a @font-face szabályt is alkalmazható az SVG dokumentumok szövegére.

Beágyazott OpenType Fonts (EOT)

Az EOT betűtípusok az OpenType betűtípusok kompakt formája, amelyet a Microsoft tervezett használatra beágyazott betűtípusként a weboldalakon.

Böngésző támogatása a betűformátumokhoz

A táblázatban szereplő számok az első böngészőverziót jelzik, amely teljes mértékben támogatja a betűtípus formátum.

Font format
TTF/OTF	9.0*	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	14.0	36.0	39.0	10.0	26.0
SVG	Not supported	Not supported	Not supported	3.2	Not supported
EOT	6.0	Not supported	Not supported	Not supported	Not supported

*IE: A betűtípus csak akkor működik, ha "telepíthető"-re van állítva.

A kívánt betűtípus használata

A @font-face szabályban; először adjon meg egy nevet a betűtípusnak (pl. myFirstFont), majd mutasson a betűtípusfájlra.

Tipp: Mindig használjon kisbetűt a betűtípus URL-jeként. A nagybetűk nem várt eredményeket adhatnak az IE-ben.

A betűtípus HTML-elemhez való használatához tekintse meg a betűtípus nevét (myFirstFont) a font-family tulajdonságon keresztül:

Példa

@font-face
{
   
font-family: myFirstFont;
   
src: url(sansation_light.woff);
}

div
{
   
font-family: myFirstFont;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>

</body>
</html>

Félkövér szöveg használata

Hozzá kell adnia egy másik @font-face szabályt, amely leírókat tartalmaz a félkövér szöveghez:

Példa

@font-face
{
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
   
font-weight: bold;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

@font-face {
   font-family: myFirstFont;
   src: url(sansation_bold.woff);
   font-weight: bold;
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>

</body>
</html>

A "sansation_bold.woff" fájl egy másik betűtípusfájl, amely a Sansation betűtípus félkövér karaktereit tartalmazza.

A böngészők ezt használják, amikor a "myFirstFont" betűtípuscsaláddal rendelkező szöveg félkövéren jelenik meg.

Ily módon sok @font-face szabállyal rendelkezhet ugyanahhoz a betűtípushoz.

CSS betűtípus-leírók

A következő táblázat felsorolja a @font-face szabályon belül definiálható összes betűtípus-leírót:

Leíró:

font-family

Értékek:

name

Leírás:

Kívánt. Meghatározza a betűtípus nevét

Leíró:

src

Értékek:

URL

Leírás:

Kívánt. Meghatározza a betűtípusfájl URL-címét

Leíró:

font-stretch

Értékek:

normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

Leírás:

Választható. Meghatározza, hogy a betűtípust hogyan kell megnyújtani. Az alapértelmezett a "normál"

Leíró:

font-style

Értékek:

normal
italic
oblique

Leírás:

Választható. Meghatározza a betűtípus stílusát. Az alapértelmezett a "normál"

Leíró:

font-weight

Értékek:

normal
bold
100
200
300
400
500
600
700
800
900

Leírás:

Választható. Meghatározza a betűtípus vastagságát. Az alapértelmezett a "normál"

Leíró:

unicode-range

Értékek:

unicode-range

Leírás:

Választható. Meghatározza a betűtípus által támogatott UNICODE karakterek tartományát. Az alapértelmezett "U+0-10FFFF"