A CSS3 Font modul, avagy lehetőségeink a szépírásra

Egészen eddig meglehetősen bonyolult volt a saját betűtípusok használata és a böngészők jobb esetben nem hibával, hanem valami saját betűtípussal cserélték ki az általunk definiáltat. Engedjétek meg, hogy a CSS3-nak bemutassam a font modulját, ami sokaknak már ismerős lesz, de azért remélem mindenki talál benne magának való részt. Természetesen, a CSS1 és CSS2-ben is megtalálható volt a zöme az itt bemutatásra kerülő lehetőségeknek. De pl. a @font-face csak a CSS3-ban tudott igazán teret nyerni. Szerencsére a böngészők is hellyel közzel már támogatják. Az itt bemutatott példákat teszteltem a népszerűbb böngészőkkel (IE, Firefox, Safari, Chrome), azok legfrissebb változatával, tehát ha valami nem jelenne meg jól, akkor itt a lehetőség, hogy frissítsétek a böngészőtöket (http://download.chip.eu/hu/Boengesz__1906.html). Megéri!

@font-face demo

@font-face demo

Talán nem kell elmondanom, hogy mennyire siralmas a helyzet, ha tényleg szép weboldalt, egyedi fontokat akarunk használni, erre kínál egy jó megoldást a CSS3 font modulja. Lássuk milyen alapvető lehetőségeink vannak, azokat hogyan használhatjuk.

1. Alapvető font tulajdonságok

1.1 A font-family

Meghatározza a használni kívánt betűtípus nevét (family-name), lehetőség van többet is felsorolni vesszővel elválasztva. A működése viszonylag egyszerű, a user-agent végigmegy a listán és az első olyat amit felismer/támogat, azt fogja használni. Ha egyiket sem ismeri fel, akkor a sans serif font családot fogja megjeleníteni alapértelmezésben.

Léteznek úgynevezett generic-family típusok is, ezek a következők:

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

Használata rendkívül egyszerű:

body {
font-family: Helvetica, Verdana, barmibarmennyifont;
}

Itt találtok egy konkrét példát a használatára és a generic-family összes típusára.

1.2 A font-weight (betű vastagság) tulajdonság

Természetesen a betűk vastagságát állíthatjuk vele. 100-900 közötti értékkel.Illetve, használhatjuk még a következő paramétereket:

  • normal (400-nak felel meg)
  • bold (700-nak felel meg)
  • bolder (a szülőhöz képest vastagabb)
  • lighter (a szülőhöz képest halványabb, vékonyabb)
  • inherit (a szülőtől örökölt)
CSS3 font-weight

CSS3 font-weight

Példa:

font-weight:{ 100 | 200 | 300 | 400 | 500 | 600 | 700 |
800 | 900 | bold | bolder | lighter | normal | inherit }

A font-weight példát itt meg tudjátok nézni, érdemes ezeknek a forrását is megtekinteni, mert az egyszerűség kedvéért itt csak az adott rész használatát írtam le.

1.3 A font-stretch (betűszélesség) tulajdonság

Mint ahogy látjátok, az adott font szélességét tudjuk vele állítani. Jelenleg nem minden böngésző támogatja, az általam megnézett (fentebb találod) 4 közül, csak az IE és a Firefox új verziója támogatta. A font-stretch paraméterei a következők:

font-stretch:{normal | ultra-condensed | extra-condensed | condensed |semi-condensed
| semi-expanded | expanded | extra-expanded | ultra-expanded | inherit }
CSS3 font-stretch

CSS3 font-stretch

 A példát itt meg tudjátok nézni.

1.4 A font-style tulajdonság

Az adott font “dőltségét” határozza meg. Paraméterei a következők lehetnek:

  • normal
  • italic
  • oblique (az italic-nál lényegesen jobban döntött)
  • inherit
font-style:{ normal | italic | oblique | inherit }

A font-style demót itt tudod megnézni.

Érdekes, hogy az oblique stílus egyik böngészőben sem jelenik meg helyesen, mert a specifikáció szerint, közel 45 fokos döntéssel kéne hogy megjelenjen, ehhez képest egy az egyben az italic dőlésszögével jelenik meg. (nyomtatásban is)

1.5 A font-size (betűméret) tulajdonság

Szerencsére a betűméret gyakorlatilag nem változott az eddigiekhez képest. Paraméterei:

  • <absolute-size>(lehet: xx-small | x-small | small | medium | large | x-large | xx-large )
  • <relative-size> (lehet: larger | smaller )
  • <length> (lehet: tetszőleges pozitív szám px-ben)
  • <percentage> (lehet: tetszőleges érték %-ban)
  • inherit (szülőtől örökölt)

Példa:

body {
font-size:xx-small;
}
/*vagy*/
body {
font-size:12px;
}
/*vagy*/
body {
font-size:130%;
}

1.6 A font-size-adjust tulajdonság

A font-size-adjust megadja a font “aspektus értékét”, ami a méret különbség a nagy “X” karakter és a kis “x” karakter magassága között. Gyakorlatilag a “betűméretet” tudjuk vele állítani. Az általam tesztelt böngészők közül jelenleg csak a Firefox támogatja.

Paraméterei:

  • number – egy szám ami megadja a fenti különbséget
  • none – alapértelmezett értékek meghagyása
  • inherit – a szülőtől örökölt

Példa:

body {
font-size-adjust:0.5;
}

Az egyszerű font-size-adjust demo itt megtalálható.

1.7 a font tulajdonság

Gyakorlatilag az eddigieket tudjuk a segítségével rövid formában felírni. Paraméterezése: font:<‘font-style’> <‘font-weight’> <‘font-size’> <‘font-family’> | caption | icon | menu | message-box | small-caption | status-bar | inherit

Hosszú forma:

body {
font-style: normal;
 font-variant: normal;
 font-weight: 600;
 font-size: 10px;
 line-height: normal;
 font-family: sans-serif;
}

Rövid forma:

body {
font: 600 10px sans-serif;
}

De hogy egy bonyolultabbat is nézzünk:

body {
font: oblique 12pt "Helvetica Neue", serif;
font-stretch: condensed; /*ezt nem tudjuk a rövid formába betteni*/
}

Az első részét a fentiekben tárgyaltuk, hogy oda mi kerülhet, de a végén var pár érdekes dolog, nézzük most azokat:

  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar
  • inherit

A fentieket azért nem részleteztem, mert gyakorlatilag ezekhez az “egységekhez” tartozó alap betűtulajdonságokat rendeli a szöveghez, ahol használjuk. Pl. a message-box esetén az általános párbeszédpanel tulajdonságú szöveget. Úgy gondoltam egy példa lényegesen jobban szemlélteti. A font tulajdonság példa itt megtekinthető.

2. A @font-face tulajdonság

Azért vettem ezt külön részbe, mert ez jóval terjedelmesebb és szerteágazóbb téma, régen nem működött, pedig volt, most van de még mindig nem az igazi. Akkor most hogy is van ez? Hát úgy, hogy a böngészők egy része támogatja, egy része azt hiszi hogy támogatja, mi meg ülünk középen és vagy megjelenik normálisan az oldalunk, vagy nem. A következőkben erre a problémakörre szeretnék egy megoldást mutatni. A szabvány úgy szól, hogy a true-type fontokat minden böngésző ismeri, de mi tudjuk, hogy ez nincs így. De a bonyolult bevezetés után nézzük, meg milyen egyszerű is használni ezt a remek eszközt.

Az alapkoncepció az, hogy fogjuk az általunk kiválasztott betűtípust és a CSS segítségével meghivatkozzuk, hogy azt használja. Valahogy így

@font-face {
  font-family: demobetu;
  src: url(http://example.com/fonts/demobetu.ttf);
}

Ez eddig nem tűnik bonyolultnak. Csakhogy, ez működik abban az esetben, ha a böngészőnk tudja kezelni a ttf típussal rendelkező fontokat. Hol van a trükk, hát ott, hogy van vagy 5 féle font típus. 🙂 Lássuk őket:

String Font Format Common extensions
“woff” WOFF (Web Open Font Format) .woff
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

Azaz, a böngésző okozta keveredésre az a legbiztosabb megoldás, ha mind az 5 féle típust belepakoljuk a @font-face -ébe. Lássuk, ez hogy néz ki úgy, hogy még működjön is:

@font-face {
font-family: 'Demobetu';
src: url('Demobetu.eot');
src: url('Demobetu.eot?#iefix') format('embedded-opentype'),
url('Demobetu.woff') format('woff'),
url('Demobetu.ttf') format('truetype'),
url('Demo-betu.svg#Demobetu') format('svg');
}

Egyébként jogdíj mentes és használható betűtípusokat itt találunk: http://www.fontsquirrel.com/

Ha nekünk csak egy darab ttf betűtípusunk van, akkor a fenti oldal @font-face generátorát is igénybe vehetjük: http://www.fontsquirrel.com/fontface/generator

No, de lássunk egy konkrét példát (a példában szereplő betűtípusok az említett honlapról valók):

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>@Font Face tutorial html5.ugyesen.com</title>

<style>
@font-face {
font-family: 'TeutonicNo1DemiBold';
src: url('teutonic1-webfont.eot');
src: url('teutonic1-webfont.eot?#iefix') format('embedded-opentype'),
url('teutonic1-webfont.woff') format('woff'),
url('teutonic1-webfont.ttf') format('truetype'),
url('teutonic1-webfont.svg#TeutonicNo1DemiBold') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'TeutonicNo2DemiBold';
src: url('teutonic2-webfont.eot');
src: url('teutonic2-webfont.eot?#iefix') format('embedded-opentype'),
url('teutonic2-webfont.woff') format('woff'),
url('teutonic2-webfont.ttf') format('truetype'),
url('teutonic2-webfont.svg#TeutonicNo2DemiBold') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'TeutonicNo3DemiBold';
src: url('teutonic3-webfont.eot');
src: url('teutonic3-webfont.eot?#iefix') format('embedded-opentype'),
url('teutonic3-webfont.woff') format('woff'),
url('teutonic3-webfont.ttf') format('truetype'),
url('teutonic3-webfont.svg#TeutonicNo3DemiBold') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'TeutonicNo4DemiBold';
src: url('teutonic4-webfont.eot');
src: url('teutonic4-webfont.eot?#iefix') format('embedded-opentype'),
url('teutonic4-webfont.woff') format('woff'),
url('teutonic4-webfont.ttf') format('truetype'),
url('teutonic4-webfont.svg#TeutonicNo4DemiBold') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'ArmaliteRifleRegular';
src: url('armalite_rifle-webfont.eot');
src: url('armalite_rifle-webfont.eot?#iefix') format('embedded-opentype'),
url('armalite_rifle-webfont.woff') format('woff'),
url('armalite_rifle-webfont.ttf') format('truetype'),
url('armalite_rifle-webfont.svg#ArmaliteRifleRegular') format('svg');
font-weight: normal;
font-style: normal;
}

h1.fontface {font: 60px/68px 'TeutonicNo1DemiBold', Arial, sans-serif;letter-spacing: 0;}
p.style1 {font: 18px/27px 'TeutonicNo1DemiBold', Arial, sans-serif;}
p.style2 {font: 18px/27px 'TeutonicNo2DemiBold', Arial, sans-serif;}
p.style3 {font: 18px/27px 'TeutonicNo3DemiBold', Arial, sans-serif;}
p.style4 {font: 18px/27px 'TeutonicNo4DemiBold', Arial, sans-serif;}
p.style5 {font: 18px/27px 'ArmaliteRifleRegular', Arial, sans-serif;}

#container {
width: 900px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>

<body>
<div id="container">
<h1 class="fontface">Ez bizony egy @font-face demo</h1>

<p class="style1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="style2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
<p class="style3">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
<p class="style4">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p class="style5">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus."</p>
</div>
</body>
</html>

A példa itt elérhető. Itt pedig becsomagolva.

Ezzel a módszerrel már a legtöbb böngésző helyesen jeleníti meg a kiválasztott betűtípusunkat. Remélem mindenki számára hasznos volt ez a kis leírás.

Jó pihenést a hosszú hétvégén mindenkinek!

Forrás:

http://www.w3.org/TR/css3-fonts/

Creative Commons Licenc
A CSS3 Font modul, avagy lehetőségeink a szépírásra  a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...