În acest articol, vom satisface nevoia designerilor pentru un design atent al textului, lăsând posibilitatea utilizatorilor de a-l mări cât mai mult. Vom găsi cea mai bună implementare, potrivită atât pentru designeri cât și pentru utilizatori, și de asemenea funcțională în toate browserele și sistemul de operare.
Set test
Pentru testare, sa folosit markup. Se compune din două coloane - coloana principală din stânga și bara laterală din partea dreaptă. Fontul Arial a fost ales pentru a se potrivi cu diferitele sisteme de operare și platforme.
Testarea a fost realizat pe browsere: Safari de 2, Firefox 2 și 9.5α Opera pe Mac OS X Tiger, precum și Internet Explorer 6 (IE6) și Internet Explorer 7 (IE7) pe Windows XP cu netezirea fonturi ClearType. În mod clar, aceasta nu este o listă exhaustivă de browsere, sisteme de operare și instrumente de vizualizare, dar astăzi corespund nevoilor celor mai mulți utilizatori.
Fiecare dintre browsere și sistemul de operare a fost lansat cu setările implicite. La fiecare pas, se testează un browser afișează o, medie, dimensiunea fontului mari și mici uriașă, ceea ce corespunde la 90%, 100%, 110% și 120% creștere în browsere de text, acolo unde există această posibilitate.
Exemplu de sursă
Mai întâi a trebuit să vă asigurați că toate browserele au fost configurate în același mod. În exemplul original, puteți vedea că dimensiunea implicită a textului în fiecare browser este de 16 pixeli, iar textul este scalat în același mod pretutindeni. Această condiție este îndeplinită dacă nu sunt aplicate stiluri (altele decât stilurile implicite pentru browsere).
Dimensiunea textului în pixeli - pasul 1
Dimensiunea implicită a textului din exemplul original este un bun punct de pornire, dar pentru majoritatea oamenilor (designeri, clienți și clienți) 16px este prea mult pentru textul implicit. În exemplul nostru, dimensiunea textului principal a fost redusă la 14 pixeli, iar textul din bara laterală la 12 pixeli. În primul pas, am stabilit dimensiunea textului în pixeli:
Ca rezultat, Safari și Firefox vă permit încă să scalați textul, în timp ce IE6 și IE7 nu. Dimensiunea textului în Opera și IE7 poate fi modificată utilizând instrumentul de mărire a paginii, care mărește atât textul, cât și imaginile - adică scalarea întregii pagini.
Dimensiunea textului în em - pasul 2
Deși procentul de browsere pe care utilizatorii îl favorizează este diferit pentru fiecare site, este sigur să spunem că IE6 este încă folosit de majoritatea oamenilor. Astfel, prin setarea dimensiunii textului în pixeli, nu permitem multor oameni să-l scaldă. Un alt argument este de la utilizatorii IE7, care, de asemenea, nu vor putea să schimbe dimensiunea fontului fără a utiliza instrumentul de scalare.
Prin rezultate este vizibil faptul că dimensiunea textului la ajustările standard ale browserelor corespunde dimensiunii stabilite în pixeli. Aceste rezultate servesc și ca dovadă că textul dat în em. se poate scala cu ușurință în oricare dintre browsere. Cu toate acestea, IE6 și IE7, deși acceptabile, dar exagera încă mărimea textului atunci când scade.
Textul principal specificat în procent - pasul 3
Soluția la problema scalării incorecte a textului în IE6 și IE7 este de a seta valoarea fontului etichetei corporale în procente. Deci, lăsându-le pentru restul conținutului, vom testa următoarele stiluri:
Rezultatul arată că diferențele dintre browserele IE6, IE7 și alte browsere au devenit mai puțin pronunțate. Acum, toate browserele afișează și scară textul în același mod.
Setați înălțimea liniei în pixeli - pasul 4
Pentru exemplul nostru, înălțimea corespunzătoare a liniei este de 18 pixeli. Aplicăm acești parametri în textul principal:
Conform rezultatelor arată că înălțimea rândului din 18px moștenită de toate elementele de pe pagina - De asemenea, rețineți că atingând textul are aceeași înălțime a liniei, și că textul principalelor difuzoare. După determinarea unităților de mărime (în cazul nostru px) pentru înălțimea liniei, această valoare este moștenită de toate elementele paginii. Dacă am determinat înălțimea unui rând fără unități de măsură. - acest coeficient este moștenit de toate elementele, dar va fi proporțional cu dimensiunea fontului fiecăruia dintre elemente, încălcând astfel consistența verticală.
Din păcate, rezultatele ne spun că înălțimea rândului în 18px nu este scalat în IE6 și IE7, în timp ce dimensiunea fontului este schimbat, iar atunci când imaginea este mărită - linie prost presate una împotriva celeilalte.
Setați înălțimea liniei în em - pasul 5
Dacă pixelii nu au eșuat - vom folosi em. Modificați înălțimea liniei în stilurile noastre:
Ca rezultat, vom obține o creștere corectă și proporțională a dimensiunii fontului și a înălțimii liniei în toate browserele. Excelent. Ei bine, sau aproape perfect.
Problema cu fonturile monospațiale din Safari este pasul 6
Probabil ați observat o mică problemă în Safari: fontul monospațiat al textului principal este afișat în moduri diferite. Pentru text în pixeli, Safari afișează corect un font monospațial de aceeași dimensiune ca fontul proporțional care o înconjoară. Dacă textul este specificat în em, atunci Safari afișează un text monospațial mult mai mic decât textul înconjurător. Diferențele apar datorită unei dimensiuni diferite a fontului în mod implicit pentru fontul proporțional (16px) și monospațial (13px). În Safari 3a pe OS X, nu există o astfel de problemă.
Puteți decide că textul cu dimensiuni reduse nu interferează cu dvs. și cu cititorii dvs. utilizând Safari. Pentru cei care nu pot aștepta, o soluție alternativă este să setați fontul în pixeli pentru Safari.
Rezultatul arată că acum fontul din toate browserele arată la fel, inclusiv textul monospațiat din Safari 2.
concluzie
Scopul nostru a fost de a găsi o modalitate de a stabili parametrii textului, ceea ce ar permite designerilor să mențină un control atent asupra design-ului, fără a sacrifica capacitatea utilizatorului de a configura textul. Am testat diferite unități în browserele populare. Specificarea dimensiunii fontului și a înălțimii liniei în em. cu valori procentuale pentru elementul de corp (și cu prevederi suplimentare pentru Safari) s-a arătat cum să facă textul ordonat și claritate, lăsând în același timp posibilitatea de scalare. Aceste metode vă pot pune în siguranță cunoștințele și utilizarea ca fiind una dintre cele mai bune modalități de a seta parametrii de text în CSS care să satisfacă atât designerii cât și utilizatorii site-ului.
cerere
Articole similare
Trimiteți-le prietenilor: