Cum se setează dimensiunea textului în css - în limba rusă

În acest articol, vom discuta despre soluționarea cererilor de despăgubire ale proiectantului cu privire la exactitatea nevoia utilizatorului de a schimba dimensiunea fontului textului, ajungând la metode care îndeplinesc proiectanții și utilizatorii și lucrări din diferite browsere.

Metode de testare

Document de test conține două coloane: dreptul principal și suplimentare din stânga. Textul este scris cu caractere Arial pentru a obține același ecran în diferite sisteme de operare pe platforme diferite.

Browsere, prin care a efectuat teste: Safari 2, Firefox 2 și 9.5α Opera sub Mac OS X Tiger, precum și Internet Explorer 6 (IE6) și Internet Explorer 7 (IE7) în Windows XP cu ClearType activat. Desigur, acest lucru nu este o listă completă de browsere și sisteme de operare, dar acoperă cele mai utilizate de către utilizatorii de astăzi.

Fiecare sistem de operare și browser-ul au fost executați utilizând setările implicite. Testați fiecare pas vă permite să vedeți modul în care fiecare browser-ul afișează textul de mici, mijlocii, de dimensiuni mari și foarte mari, și, de asemenea, la nivel de scară de pagini: 90%, 100%, 110% și 120%, dacă este cazul.

Varianta de bază

În primul rând, asigurați-vă că browser-ul este în starea descrisă în momentul instalării. Versiunea de bază arată că, în fiecare browser implicit, atunci când sunt aplicate stiluri (altele decât cele stabilite ca browser-ul implicit), text dimensiunea 16px, iar textul este scalat peste tot.

Dimensiunea fontului în pixeli - iterația 1

Dimensiunea textului implicit în versiunea de bază este un bun punct de plecare, dar pentru majoritatea oamenilor (designeri, clienții și clienții lor) 16px este un text prea mare. În exemplul nostru, textul a fost redus la 14px, iar panoul lateral este setat la 12px. Primul pas al testului este de a face doar că, prin stabilirea fonturilor în pixeli:

Ca rezultat, Safari și Firefox redimensiona încă textul, și IE6 și IE7 nu. Textul poate fi modificat în Opera și IE7, cu ajutorul funcției de zoom pagină, care mărește aspectul paginii: textul și imaginile.

Mărimea textului în em - pasul 2.

Deși numărul de utilizatori IE6 este redus, încă prea devreme să renunțe în acest browser. Setarea dimensiunii textului în pixeli, având ca rezultat faptul că persoanele care doresc să schimbe dimensiunea sa, dar ei nu pot face acest lucru, lăsați site-ul tău. Împotriva pixelilor este faptul că utilizatorii IE7 pentru a schimba dimensiunea fontului va fi forțat să scaleze întreaga pagină.

Următoarea încercare de va fi dimensiunea textului obligatoriu pentru ei. Em este o unitate de măsură, W3C recomandată. Numărarea de la 16px implicit, următoarele stiluri ar trebui să dea dimensiunea textului dorit:

Rezultatul arată. că, în toate browserele la setările browser de text mediu este identic cu textul, din care suma a fost specificată în pixeli. De asemenea, se arată că dimensiunea textului este specificat în em pot fi modificate în toate browserele. Cu toate acestea IE6 și IE7 denaturează în mod inacceptabil textul de zoom cu cel mai puțin și cel mai mare de dimensiunea sa.

Dimensiunea textului de corp în procente.

Și pentru a corecta situația cu denaturarea dimensiunii textului în IE6 și IE7 este posibil, folosind procente. Prin urmare, lăsându-le atunci când specificați dimensiunea textului în conținut, au fost testate următoarele stiluri:

Rezultatul arată. că diferența dintre dimensiuni mari și mici font în setările browser-ului pentru IE6 si IE7 este acum mai puțin pronunțată. Acum, toate browserele face textul de aceeași mărime la nivel secundar și modificarea consecventă dimensiunea textului.

Setarea înălțimea liniei în pixeli - iteratie 4

În exemplul nostru, o linie de înălțime potrivită - line-height: 18px. și a adăugat că pentru organism, după cum urmează:

Rezultatele arată. că înălțimea liniei 18px sunt moștenite de tot textul de pe pagina - textul din coloana din dreapta este legat la aceeași grilă verticală ca principală stângă. Unități de aplicații (în acest caz pixeli) pentru setarea unei valori a înălțimea liniei se datorează moștenirea valorii sale pe pagină. Când se utilizează valorile liniei înălțime: 18px fără unități este moștenit factor care perturbă legarea la rândurile de grilă verticale.

Din păcate, rezultatele arată că linia de înălțime: 18px nu scară în IE6 și IE7, rămâne constantă la schimbarea dimensiunii textului.

Setarea înălțimea liniei în em - Pasul 5

Când se utilizează pixeli dovedit, am apelat la ei. Logica Repetiție ne oferă următoarele stiluri:

Rezultatele indică în mod constant schimba dimensiunea textului și înălțimea liniei în toate browserele. Bine. Sau aproape.

problema Monospațiat în Safari - Pasul 6

Dacă ați urmărit toate exemplele, probabil ați observat că comportamentul în fonturi cu lățime fixă Safari (echidistante) inclus în textul principal este incompatibil. Pentru a seta textul în pixeli, Safari face dimensiunea fontului proporțională monospațiat la lățimea textului în jurul acestuia. Cu toate acestea, atunci când dimensiunea specificată în em. Safari face textul echidistante este mult mai puțin decât textul din jur. Această inconsecvență rezultă din faptul că în Safari dimensiunea textului implicit de 16px pentru „font standard“ și 13px pentru „font cu lățime fixă“. Safari 3α sub OS X, aparent, nu suferă de această problemă.

Puteți decide că problemele Monospaced textul în Safari - este un fleac, pe care tu și cititorii dvs. pot trăi și Safari 3 este încorporat OS X Leopard și Tiger Ultima actualizare, iar problema practic dispare în curând. Pentru cei care sunt îngrijorați cu privire la o foarte mult si care nu pot aștepta, o soluție alternativă este de a specifica în pixeli Safari de text dimensiunea fontului.

Rezultatele arată - acum schimba în mod corespunzător dimensiunea textului și line-height în toate browserele, inclusiv textul echidistante în Safari 2.

concluzie

Sarcina noastră a fost de a găsi o modalitate de a seta dimensiunea textului, care vă permite să păstrați un control precis asupra tipografie și utilizatorilor, fără a compromite dimensiunea corectă de lectură. Am testat diferite momente din cele mai comune browsere. Schimbarea text și înălțimea liniei la dimensiunea de em. cu procentul specificat pentru corp (și o notă opțională pentru Safari 2), sa arătat cum să facă un text scalabilă în toate browserele utilizate în prezent.