Csak a bonyolult vagy megtanulható CSS3 számára. 4. rész 1. Betűtípusok egy HTML dokumentumban. Betűkészlet-család és @ betűkészlet-tulajdonságok

Üdvözlet, kedves olvasók az remontcompa.ru webhelyről! A nevem Roman Nahvat, és bemutatom a CSS stílusú nyelvű cikksorozat negyedik részét. Ebben a részben különféle CSS tulajdonságokat vizsgálunk meg a HTML-formátumú szöveg formázására. Mivel a szöveg formázása a CSS-ben meglehetősen kiterjedt téma, a negyedik részt több részre osztják. Senkinek sem titok, hogy egy weboldal tervezése nagymértékben függ a rajta lévő szövegrész típusától. A CSS számos tulajdonsággal rendelkezik a szöveg HTML formátumú formázásához. Ezek a tulajdonságok lehetővé teszik a betűtípusok, szín, méret, sorköz és egyéb jellemzők hozzárendelését a szöveghez. Például a CSS betűtípus-család és a @ betű-arc tulajdonságokat, amelyeket ma megvizsgálunk, úgy tervezték, hogy egy weboldal betűkészleteivel működjenek..

Csak a bonyolult vagy megtanulható CSS3 számára. 4. rész 1. Betűtípusok egy HTML dokumentumban. Betűkészlet-család és @ betűkészlet-tulajdonságok

Minden betűtípus önmagában egyedi, és stílusától különbözik egy másik betűtípustól. Ennek ellenére a betűkészleteknek közös és közös vonásaik vannak. Ez vagy a font lehet egy bizonyos családhoz tartozó. Például a Times New Roman betűtípus a serif családhoz tartozik (serif betűtípusok), és az Arial betűtípus a sans-serif családhoz tartozik (sans-serif betűtípusok). Van egy monospace család is (a családhoz tartozó betűtípusok azonos rögzített szélességű karakterekkel rendelkeznek), és a kurzív betűtípusok a kézírásos kézírást utánozzák. Az alábbi táblázat a betűtípuscsalágokat és a családok néhány képviselőjét mutatja

A CSS betűkészlet-család tulajdonság a HTML dokumentum elemében használt szöveg betűtípusának meghatározására szolgál. A betűtípust kétféleképpen lehet meghatározni: Ha a betűtípus nevét a betűkészlet-család tulajdonságának értékével írja (például betűcsalád: arial) A betűcsalád nevét a betűkészlet-család tulajdonságának értékével írja be (például betűkészlet-család: serif) Amikor a betűtípust a betűtípus-család tulajdonság alapján határozza meg, vegye figyelembe azt a tényt, hogy maga a böngésző nem rendelkezik beépített betűtípusokkal. A weboldalon a szöveg megjelenítéséhez a felhasználó számítógépén az operációs rendszerbe telepített betűkészleteket kell használni. A CSS betűkészlet-család tulajdonsága lehetővé teszi, hogy ne csak egy betűtípust, hanem több betűtípust adjon meg értékként, elnevezésük vesszővel elválasztva. Általános gyakorlat, hogy a betűkészlet lista végén feltüntetik a család nevét. Ez akkor történik meg, ha a betűkészlet-család tulajdonságának értékként megadott betűkészletek nem állnak rendelkezésre a felhasználó operációs rendszerében. Ha több betűtípust ad meg a betűkészlet-család tulajdonságának értékeként, akkor a webböngésző az első megadott betűkészlet észlelésekor ellenőrzi, hogy telepítve van-e a felhasználó számítógépére. Ha ez a betűkészlet létezik, a böngésző ezt használja a weboldal elem betűkészletének használatához. Ha az elsőként a betűtípus-család tulajdonságként megadott betűkészlet nincs beállítva, akkor a második betűtípust ellenőrzi stb. Ha a megadott betűkészletek egyikét sem találja meg, a webböngésző kiválasztja a megfelelő betűtípust a megadott betűcsaládból. Hozzon létre egy HTML dokumentumot a következő szerkezettel, és mentse el egy flash meghajtóra a CSS mappában betűkészlet és .html kiterjesztés alatt

HTML-dokumentumban, a font.html címkékkel

és

hozzon létre két bekezdést valamilyen szöveggel

A következő típusú weblapot kapjuk: font.html

A flash meghajtó CSS ​​mappájában is mentse a fonts.css stílus fájlt

Az első és a második bekezdéshez rendelje hozzá a font1 és a font2 azonosítókat

Az azonosító-választó segítségével a fonts.css stíluslapon rendelje hozzá a Georgia, Times New Roman, Times betűtípusokat az első bekezdésben szereplő szöveghez az # font1 font-család: Georgia, 'Times New Roman', Times, serif sor felírásával. Felhívhatja a figyelmet arra, hogy a betűkészletek neve után a közönséges név szerepel (serif)

A következőket kapjuk

Amikor betűtípust rendel egy HTML-dokumentum eleméhez, akkor figyelembe kell vennie magának a betűkészletnek a formátumát is, mivel a különféle böngészők támogatják a különböző betűkészlet-formátumokat. Annak érdekében, hogy ugyanaz a betűtípus megjelenjen a különféle böngészőkben, azokat különféle formátumokban kell megadnia

A beágyazott Open Type betűkészleteket (.eot kiterjesztéssel) csak az Internet Explorer támogatja.

A TrueType (.ttf) és az OpenType (.otf) betűkészleteket minden modern böngésző támogatja. Ami a TrueType és az OpenType betűkészleteket támogatja az Internet Explorer segítségével, a 6. verziótól a 8. verzióig a TrueType és OpenType betűkészleteket ez a böngésző nem támogatja, az Internet Explorer 9., 10. és 11. verziója csak részben támogatja a TrueType és OpenType betűkészleteket.

A Web Open Font (.woff) betűtípusok a TrueType vagy az OpenType betűkészletek tömörített verziója, amelyet minden modern webböngésző, valamint az Internet Explorer támogat, a 9. verziótól kezdve.

A .woff2 kiterjesztésű betűtípusok a Web Open Font formátum legújabb verziója, amelyet minden modern webböngésző támogat, de az Internet Explorer böngésző egyetlen verziója sem támogatja a kiterjesztésű betűkészleteket

A méretezhető vektorgrafikus (.svg) betűkészleteket, valamint a TrueType, az OpenType és a Web Open betűkészletet a modern böngészők támogatják, többek között a mobil eszközökön

Állítsunk be néhány betűtípust a font.html weboldal második bekezdésének szövegéhez, különféle formátumban biztosítva a webböngészőhöz. A Google Fonts webhelyen, a https://fonts.google.com címen, több mint 800 ingyenes betűtípus található a különböző családok számára.

A serif betűkészleteket a Google Fonts webhelyen jelenítjük meg a megfelelő négyzet bejelölésével.

Például a font.html weboldal második bekezdésének szövegéhez állítson be egy IM Fell DW Pica SC nevű betűtípust. Kattintson a pluszjelre a betűtípus kiválasztásához.

Ezután kattintson a letöltés gombra

Mentse el az archívumot az IM Fell DW Pica SC betűkészlet fájljával a flash meghajtóra a CSS mappába

A letöltött archívum kicsomagolása után az IM_Fell_DW_Pica_SC mappában megjelenik az IMFePIsc28P betűkészlet fájl

A letöltött betűkészlet fájl kiterjesztése .ttf, azaz TrueType formátumú betűtípus. Mint fentebb láttuk, a .ttf kiterjesztésű betűkészleteket az Internet Explorer nem támogatja. Mivel azt szeretnénk, hogy ez a betűtípus bármilyen böngészőben megjelenjen, konvertálnunk kell más formátumokra, beleértve a beágyazott nyitott típusú formátumot is, amelyet az Internet Explorer 6-11-es verziója támogat.

A letöltött IMFePIsc28P.ttf betűtípus fájl más formátumba konvertálásához lépjen a https://www.fontsquirrel.com/tools/webfont-generator webhelyre, és kattintson a Betűkészletek feltöltése gombra.

Válassza ki a letöltött IMFePIsc28P.ttf betűkészlet fájlt, majd kattintson a Megnyitás gombra

Jelölje be Igen, a feltöltött betűtípusok törvényesen beilleszthetők a webbeágyazással, és állítsák a kapcsolót Expert-re

Jelölje be a jelölőnégyzeteket azon formátumok előtt, amelyekre konvertálni akarjuk az IMFePIsc28P.ttf betűkészlet fájlt

Kattintson a Kitöltése elemre

Mentse el az archívumot az IM_Fell_DW_Pica_SC betűkészlettel, különféle formátumokba konvertálva, egy flash meghajtón a CSS mappában

Bekerülünk a webfontkit-20190307-050537 mappába, és megnézzük az IM_Fell_DW_Pica_SC betűkészlet fájlokat, amelyekben a .eot, .svg, .ttf, .woff, .woff2 kiterjesztések vannak. Szintén érdekli a .css kiterjesztésű stíluslap-fájl, amely megjeleníti a CSS @ font-face tulajdonság kódját, amelyet különféle formátumú IM_Fell_DW_Pica_SC betűkészlet összekapcsolására használunk a font.html weboldalra.

A CSS property @ font-face lehetővé teszi különféle betűtípusok használatát, még akkor is, ha nincsenek telepítve a felhasználó számítógépére. Fontolja meg részletesebben a css kódot a stíluslap.css fájlban. Az @ font-face tulajdonságon belül egy másik CSS betűkészlet-család tulajdonság is megadja a betűtípus nevét. A betűtípus nevét a jövőben arra fogjuk használni, hogy jelölje a betűtípust a szöveghez (esetünkben a font.html oldal második bekezdésének szövegéhez). Az src tulajdonság megmutatja a böngészőnek a betűkészlet-fájlok elérési útját

Másolja a CSS-kódot a stíluslap.css fájlból, majd illessze be a fonts.css stílusfájlba, amely a font.html weblaphoz kapcsolódik. A következőket kapjuk

Mivel a font.html oldalon a második bekezdéshez azonosítót rendeltünk, a font2 névvel, ezért a fonts.css stílusfájlban az azonosító választóval a második bekezdés szövegét a betűkészlethez rendeljük azzal a névvel, amelyet a betűkészlet-család tulajdonságának értékeként adtak meg, nevezetesen az im_fell_dw_pica_scregular

Írja be a fonts.css stílusfájlba a # font2 font-family: 'im_fell_dw_pica_scregular' sort.

Annak érdekében, hogy a második bekezdés szövege egy im_fell_dw_pica_scregular nevű betűtípusban jelenjen meg, másolja át ennek a betűkészletnek a különféle formátumú fájljait a webfontkit-20190307-050537 mappából a CSS mappába

A következőket kapjuk

Ha megnyitja a font.html oldalt egy böngészőben, láthatja, hogy a második bekezdés szövege az IM Fell DW Pica SC betűtípusban volt megjelenítve.