Ez a cikk bemutat egy egyszerű, ugyanakkor fontos témát, a Fonts In-t és gyakorlati bemutatót is tart a témáról. A következő hivatkozásokkal foglalkozunk ebben a cikkben,
- Betűtípusok a CSS-ben
- Attribútumok CSS betűtípusban
- font-style attribútum
- font-weight attribútum
- font-size attribútum
- font-family attribútum
A webhelyek tartalmat kép-, hang-, video- és szöveges formában hordoznak. A legtöbb weboldal azonban továbbra is a szövegre támaszkodik, mint az uralkodó formátum. A sima szöveg ugyanis nagyon jelentős előnyökkel jár.
Nem tolakodó olvashatóság - Irodában szeretné ellenőrizni a legfrissebb mérkőzés pontszámát. Nyilván gyors szöveges frissítést szeretne, nem pedig zajos videót!
Alacsony hálózati sávszélesség-követelmény - A szöveges tartalom még rossz internetkapcsolati területeken is betölthető, míg a multimédia nem.
Keresésbarát - A webhelyek mindig figyelemmel kísérik, hogy tartalmuk mennyire könnyen felfedezhető a keresőmotorokban. A szöveg erre a legalkalmasabb, legalábbis addig, amíg az AI teljesen átveszi az internetet!
A szöveges tartalom formázása közben a webdesignereknek csak kevés paraméter áll rendelkezésükre - betűtípus, igazítás, kiemelés és szín. A szöveghez megfelelő betűtípus kiválasztása kritikus döntés. A szokásos gyakorlat a CSS betűtípus-címkék használata a HTML-oldalak szövegének betűtípusainak meghatározásához.
Ha még nem ismeri a HTML programozás világát, szerezzen be egy alapvető kezdő bemutatót itt. Érdemes elolvasnia a CSS alapjait, mielőtt továbbtanulna a CSS betűtípusokkal.
Átfogó CSS oktatóanyagért látogasson el az Edureka CSS oktatóanyag kezdőknek oldalára. Kiváló heads-upot kap arról, hogy a CSS-t hogyan kell használni a HTML webtervezés bővítéséhez.
Folytatás ezzel a cikkel a CSS betűtípusairól
Betűtípusok a CSS-ben
A betűtípus alapvetően a szöveg megjelenítéséhez kapcsolódó jellemzők összessége. A betűkészleteket méretük, behúzásuk, szélességük, ferde és így tovább különböztetik meg egymástól. Kezdjük egy alapvető szöveges megjelenítéssel különböző betűtípusokban.
1. példa: Fejlécek és bekezdések különböző betűtípusokban
body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}A bekezdés dőlt, félkövér, Georgia betűtípussal
1. példa: Kimenet
Az 1. példában 3 különböző szövegsor van, különböző betűtípusokkal. Észreveheti, hogy az egyes betűtípusok karakterszélességük, behúzásuk stb.
Folytatás ezzel a cikkel a CSS betűtípusairól
Attribútumok CSS betűtípusban
A CSS betűtípusoknak négy elsődleges attribútumuk van - stílus, súly, méret és család. A stílus attribútum normál vagy dőlt betűt jelöl. A súly sima vagy félkövér betűtípust mutat. A súly számszerűen is kifejezhető. A méret egyszerűen a betűméret nagyobb, mint a méret, nagyobb a megjelenésű szöveg. A betűméret többféle módon rendelhető hozzá, a részletes leírások a későbbi szakaszokban találhatók. A családi attribútum a betűtípus nevének a szöveghez rendelése.
Az 1. példában különböző betűneveket használtunk a címsorokhoz és a bekezdésekhez. A h1 és p tagek alatt két betűtípust látunk felsorolni, míg a h2 tag csak egy betűtípust nevez meg. Ez a betűkészlet-család meghatározása, erről később.
Folytatás ezzel a cikkel a CSS betűtípusairól
font-style attribútum:
A két elsődleges stílus beállítható: „normál” és „dőlt”. A dőlt állítólag kurzív jellegű és ferde. A Normal az alapértelmezett opció, amely egyenes. Van még egy kevésbé használt opció, az úgynevezett „ferde”, amely hasonlít a dőlt opcióra a legtöbb betűtípusban. A stílust úgy is beállíthatja, hogy „örökölje”, így elveszi a betűstílust a szülő elemtől.
| 2. példa: Betűstílusopciók | |
| font-family: verdana betűtípus: normális betűméret: 15 | Verdana normál betűtípus |
font-family: verdanaadatstruktúrák és algoritmusok a java oktatóanyagban betűtípus: dőlt betűméret: 15 | Verdana dőlt betűtípus |
| font-family: verdana betűtípus: ferde betűméret: 15 | Verdana ferde betűtípus |
Folytatás ezzel a cikkel a CSS betűtípusairól
font-weight attribútum:
Ez az attribútum dönti el, hogy a betűtípus vastag vagy vékony legyen-e. Beállítható „normál” vagy „félkövér” értékre. Az alapértelmezett érték normális. Ez az érték numerikusként is beállítható. A 400 súly a normál értéket jelenti, a 700 pedig a vastag betűket. Kevés más beállítás van (100-tól - nagyon könnyűtől 900-ig - nagyon vastag), de ezeket nem minden betűtípus támogatja. Az összes súlyopciót a 3. példa mutatja.
| 3. példa: Betűsúly beállításai | |
| font-family: verdana betű súlya: normális betűméret: 15 | Verdana normál súlyú |
| font-family: verdana betű-súly: félkövér betűméret: 15 | Verdana merész súly |
| font-family: verdana betű súlya: 500 betűméret: 15 | Verdana numerikus súlya |
Folytatás ezzel a cikkel a CSS betűtípusairól
font-size attribútum:
A méretattribútum többféleképpen állítható be. Az alábbiakban soroljuk fel ezeket a módszereket.
● Számozott érték, például „közepes”, „nagy”. Valójában, akárcsak a ruhaméretek, az értékek a XX Small-tól a XX Large-ig terjedhetnek!
● Állítsa be a szülő eleméhez viszonyítva: „nagyobb” vagy „kisebb”.
● A szülőelem méretének százalékos aránya.
● Állítsa be „öröklésre”, hogy közvetlenül átvegye a szülőelem méretét.
● Abszolút értékként pixel (pixel), pt (pont) vagy cm (centiméter) egységben
A „Közepes” az alapértelmezett érték, amelyet ehhez a paraméterhez állítottak be.
Folytatás ezzel a cikkel a CSS betűtípusairól
font-family attribútum:
HTML-ben a CSS betűtípuscsalád a betűkészlet nevének beállítására szolgál. Vagy csak egyetlen betűtípust adhat a címkéhez. Vagy hozzárendelhet több értéket font-family listaként, amely meghatározza azt az elsőbbséget, amelyben a böngészőnek ki kell választania a betűtípust.
A lista prioritása balról jobbra, tartalék rendszer formájában. Az első értéket választja, ha rendelkezésre áll, vagy a vezérlő a következőre megy, amíg el nem éri a lista végét. Az alapértelmezett betűtípuscsaládot a böngésző beállításai határozzák meg.
A CSS betűtípus-családok kétféle típusúak - általános családok és betűtípus-családok.
● Általános családok - néhány általános jellemző alapján a betűtípusokat „serif”, „sans serif”, „monospace” stb. Csoportba sorolják. Például a Sans serif a serif stílus nélküli betűtípusokat jelenti.
● Családnevek - meghatározott családi hierarchiákhoz tartozó betűtípusok. A Times, az Arial, a Courier mind a betűtípuscsalád, a Times New Roman pedig a Times család példamutatója.
A különféle betűcsalád-használati lehetőségeket az alábbi 4. példa sorolja fel.
| 4. példa: Betűtípus-család beállításai | |
| font-family: verdana | Verdana egyetlen betűtípus |
| font-family: „Times New Roman”, Times, Futár | Times New Roman, betűcsaládok követve |
| font-család: Arial, kisbusz, sans-serif | Arial után generikus családok következnek |
Néhány megjegyzendő közös pont
● Több más CSS-tulajdonsághoz hasonlóan a betűkészlet-beállítások némelyike a különböző böngészőkben eltérő lehet. Néhány ritka betűtípus-beállítás használata előtt ellenőrizze a böngésző támogatását.
● A betűkészlet-beállításokat külön megadhatja a betűstílus, a betűméret stb. Egyedi címkéivel. Alternatív megoldásként, ha inkább kompakt kódot szeretne, használhatja a gyorsírás betűtípus attribútumot az összes értékkel ugyanabban a sorban.
● Olyan felhasználói esetekben, amikor azt szeretné, hogy a betűtípus mérete a böngésző méretétől függően változzon, van egy hasznos betűméret-beállítás, amelyet adaptív betűkészlet-beállításnak hívnak. Beállítható vw egységgel, ami „nézetablak szélességet” jelent. Így a szövegméret követni fogja a böngészőablak méretét.
Remélem, megtalálta a keresett információkat a Betűtípusok a CSS-ben. Ne ossza meg velünk tapasztalatait az alábbi megjegyzések részben. Boldog tervezést!
Ha többet szeretne megtudni a webfejlesztésről, nézze meg a írta Edureka. A webfejlesztési tanúsítási képzés segít megtanulni, hogyan hozhat létre lenyűgöző weboldalakat HTML5, CSS3, Twitter Bootstrap 3, jQuery és Google API-k segítségével, és telepítheti az Amazon Simple Storage Service (S3) szolgáltatásba.