Hogyan lehet a legjobban kihasználni a betűtípusokat a CSS-ben?

Ez a cikk bemutat egy egyszerű, de mégis fontos témát, a Fontokat a CSS-ben, és gyakorlati bemutatót is ad a témáról.

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,



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 

Output- Font a CSS-ben - Edureka

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: verdana

adatstruktú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: verdanaVerdana egyetlen betűtípus
font-family: „Times New Roman”, Times, FutárTimes New Roman, betűcsaládok követve
font-család: Arial, kisbusz, sans-serifArial 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.