A betűméret beállításának módja a css, w3 oktatásban
Ebben a cikkben kielégítjük a tervezők gondos szövegtervezésének szükségességét, így a felhasználóknak lehetősége nyílik a méretezésre, ahogyan kérem. Megtaláljuk a legjobb megvalósítást, amely megfelel mind a tervezőknek, mind a felhasználóknak, és minden böngészőben és operációs rendszerben is használható.
Tesztkészlet
A teszteléshez megjelölést használtunk. Két oszlopból áll - a bal oldali fő oszlop és a jobb oldali oldalsáv. Az Arial betűtípust úgy választották meg, hogy megfeleljen a különböző operációs rendszereknek és platformoknak.
A vizsgálatot végeztek böngészők: Safari 2, Firefox 2. és Opera 9.5α Mac OS X Tiger, valamint az Internet Explorer 6 (IE6) és az Internet Explorer 7 (IE7) Windows XP simítással ClearType betűtípusok. Nyilvánvaló, hogy ez nem a böngészők, az operációs rendszerek és a vizualizációs eszközök kimerítő listája, de ma megfelelnek a legtöbb felhasználó igényeinek.
Mindegyik böngésző és az operációs rendszer elindult az alapértelmezett beállításokkal. Minden lépésnél azt teszteli a böngésző megjelenít egy kis, közepes, nagy és hatalmas betűméret, amely megfelel a 90%, 100%, 110% és 120% -kal nőtt a szöveges böngészők, ahol ez a lehetőség fennáll.
Forrás példája
Először meg kellett győződnie arról, hogy minden böngészőt ugyanúgy konfiguráltak. Az eredeti példában láthatja, hogy az alapértelmezett szövegméret minden böngészőben 16px, és a szöveg ugyanúgy skálázható mindenütt. Ez a feltétel teljesül, ha nincsenek stílusok (a böngészők alapértelmezett stílusai kivételével).
Szövegméret képpontban - 1. lépés
Az eredeti példában az alapértelmezett szövegméret jó kiindulási pont, de a legtöbb ember (tervezők, ügyfelek és ügyfeleik) 16px túl sok az alapértelmezett szövegért. Példánkban a fő szöveg mérete 14px-ra csökkent, a szöveg pedig az oldalsávon 12px-ig. Az első lépésben csak a szöveg méretét állítjuk be képpontokban:
Ennek eredményeként a Safari és a Firefox továbbra is lehetővé teszi a szöveg méretezését, míg az IE6 és az IE7 nem. Az Opera és az IE7 szövegének mérete megváltoztatható az oldal nagyító eszközzel, ami növeli mind a szöveget, mind a képeket - azaz az egész oldalt skálázza.
Szövegméret az em - 2. lépésben
Bár a felhasználók által támogatott böngészők százalékos aránya minden webhelyen eltérő, biztos lehet mondani, hogy az IE6-ot még mindig a legtöbb ember használja. Így a szöveg méretének beállítása képpontokban nem engedi, hogy sok ember méretezhesse azt. Egy másik érvet az IE7 felhasználók, akik szintén nem tudják megváltoztatni a betűméretet a méretező eszköz használata nélkül.
Az eredmények szerint látható, hogy a böngészők szabványos beállításaiban a szöveg mérete megfelel a képpontokban beállított méretnek. Ezek az eredmények arra is szolgálnak, hogy az em. könnyen skálázható bármely böngészőben. Azonban az IE6 és az IE7, bár elfogadható, de még mindig túlméretezik a szöveg méretét, amikor mérlegel.
A fő szöveg a százalékos - 3. lépésben megadott
Az IE6 és IE7 szövegének helytelen méretezésével kapcsolatos probléma megoldása a testtáblázat betűtípusának százalékos aránya. Tehát, a többi tartalom számára a következőket teszteljük:
Az eredmény azt mutatja, hogy az IE6, IE7 és más böngészők közötti különbségek kevésbé hangsúlyosak. Most minden böngésző megjeleníti és skálázza a szöveget ugyanúgy.
A vonalmagasság képpontban állítható - 4. lépés
Példánk esetén a megfelelő vonalmagasság 18 px. Ezeket a paramétereket a fő szövegre alkalmazzuk:
Az eredmény azt mutatja, hogy egy 18px vonal magasságát az oldal összes eleme örököli - vegye figyelembe, hogy a keret szövege ugyanolyan magasságban van, mint a fő oszlop szövege. Miután meghatároztuk a méret mértékegységét (esetünkben px) a sor magasságához, ezt az értéket az oldal összes eleme örököli. Ha meghatároztuk a sor magasságát mérési egységek nélkül. - ezt az együtthatót minden elem örökölte, de arányos lesz az egyes elemek betűméretével, ezáltal megsértve a függőleges konzisztenciát.
Sajnos az eredmények azt mutatják, hogy a 18 px vonalmagasság nem skálázódik az IE6 és az IE7 között, míg a betűméret megváltozik, és a nagyításnál a vonalakat rettenetesen nyomják össze.
Állítsa be a vonalmagasságot em - 5. lépésben
Ha a képpontok nem sikertelenek - em. Módosítsa a vonal magasságát stílusainkban:
Ennek eredményeképpen a betűméret és a vonalmagasság helyes, arányos növekedése érhető el minden böngészőben. Kitűnő. Nos, vagy majdnem tökéletes.
A Safari-ban a többrétegű betűtípusok problémája a 6. lépés
Valószínűleg észrevettél egy kis problémát a Safari-ban: a fő szöveg többszörözött betűtípusa különböző módon jelenik meg. Szöveges képpontokban a Safari helyesen jeleníti meg az azonos méretű, egyforma méretű betűtípust, mint az arányos betűkészlet. Ha a szöveget em megadja, akkor a Safari egy szétosztott szöveget jelenít meg, amely sokkal kisebb, mint a környező szöveg. A különbségek alapértelmezés szerint különbözo betûméret miatt jelentkeznek az arányos (16px) és a többrétegû font (13px) esetében. Az OS X Safari 3a-ban nincs ilyen probléma.
Eldöntheti, hogy a kis szimpla szöveg nem zavarja Önt és olvasóit a Safari használatával. Azok számára, akik nem tudnak várni, egy alternatív megoldás, ha a betűtípust képpontokra állítja be a Safari számára.
Az eredmény azt mutatja, hogy most a betűtípus minden böngészőben ugyanúgy néz ki, mint például a Safari 2-ben lévő többrétegű szöveg.
következtetés
Célunk az volt, hogy megtaláljuk a módját, beállítási paraméterek a szöveg, amely lehetővé tenné a tervezők fenntartása óvatos felett a design feláldozása nélkül a felhasználó képes beállítani a szöveget. A népszerű böngészőkben különböző egységeket teszteltünk. Betűméret és vonalmagasság megadása em. Százalékos értékek váztestnek (és további rendelkezés Safari) bebizonyosodott, hogy hogyan lehet a szöveget rendezett és egyértelműség, miközben a lehetőségét méretezést. Ezeket a módszereket biztonságosan tudhatja be, és felhasználhatja a CSS-ben a szöveges paraméterek egyik legjobb módját, amely megfelel mind a tervezőknek, mind a webhelyhasználóknak.