Как да настроите размера на текста в CSS - на руски
В тази статия, ние ще обсъдим уреждането на претенции на дизайнера за точността на нуждите на потребителя, за да промените размера на текста шрифт, достигайки методи, които отговарят на проектантите и потребителите, и работи в различни браузъри.
Методи за изпитване
документ тест съдържа две колони: лява основна и допълнителна отдясно. Текстът е написан шрифт Arial, за да се постигне един и същ дисплей в различни операционни системи на различни платформи.
Браузърите, чрез които се извършват изследванията: Safari 2, Firefox 2 и Opera 9.5α под Mac OS X Tiger, както и Internet Explorer 6 (IE6) и Internet Explorer 7 (IE7) в Windows XP с включен ClearType. Разбира се, това не е пълен списък на браузъри и операционни системи, но тя обхваща най-използваните от потребителите днес.
Всяка операционна система и браузър се управлява с помощта на настройките по подразбиране. Тест всяка стъпка ви позволява да видите как всеки браузър показва текста на малки, средни, големи и много големи размери, а също така мащаб страници на ниво: 90%, 100%, 110% и 120%, ако е необходимо.
Вариантът база
Първо, уверете се, че браузърът е в състоянието, описано в момента на монтажа. Основната версия, показва, че във всеки браузър по подразбиране, когато се прилагат стилове (различни от тези, определени като браузър по подразбиране), размер 16px текст и текста се мащабира навсякъде.
Размерът на шрифта в пиксели - повторение 1
Размерът на текста по подразбиране в базовата версия е добра отправна точка, но за повечето хора (дизайнери, клиенти и техните клиенти) 16px е твърде голям текст. В нашия пример, текстът е намален до 14px и страничния панел е настроен на 12 пиксела. Първата стъпка на теста се прави точно това чрез създаване на шрифтове в пиксели:
В резултат на това, Safari и Firefox все още преоразмеряване на текста, и IE6 и IE7 не го правят. Текстът може да бъде променена в Opera и IE7 като използвате инструмента за промяна на мащаба, което увеличава оформлението на страницата: текста и снимките.
Размер на текста в ем - стъпка 2.
Въпреки че броят на потребителите на Internet Explorer 6 е намалена, че е твърде рано да се откаже от този браузър. Задаване на размера на текста в пиксели, което води до факта, че хората, които искат да променят размера си, но те не могат да направят това, оставете вашия сайт. Срещу пикселите е фактът, че потребителите на Internet Explorer 7 за промяна на размера на шрифта ще бъдат принудени да мащабирате цялата страница.
Следващият опит ще е задължителен размер на текста за тях. Ем е единица за измерване, препоръчителната W3C. Преброяване от 16px по подразбиране следните стилове трябва да дадат желания размер на текста:
Резултатът показва. че във всички браузъри при средни настройки на браузъра текст е идентичен с текста, размерът на която е определен в пиксели. Той също така показва, че размера на текста се уточнява в ем може да се променя във всички браузъри. Въпреки IE6 и IE7 неприемливо нарушава текста на увеличение с най-малкия и най-големия размер.
Размер на тялото текст на сто.
И за да се коригира ситуацията с нарушаването на размера на текста в IE6 и IE7 е възможно използването на проценти. Ето защо, оставяйки ги, когато укажете размера на текста в съдържанието, са изследвани следните стилове:
Резултатът показва. че разликата между големите и малките размери на шрифта в настройките на браузъра си за IE6 и IE7 в момента е по-слабо изразена. Сега всички браузъри правят текста на същия размер нивото на средното образование и последователна промяна на размера на текста.
Настройка на височината линия в пиксели - повторение 4
В нашия пример, подходяща височина линия - линия височина: 18px. и добави, че за тялото, както следва:
Резултатите показват. че височината на 18px линия са наследени от целия текст на страницата - текстът в дясната колона се свързва с една и съща вертикална мрежа като основен ляво. елементи в приложения (в този случай пиксела) за определяне на стойността на височина ред се дължи на наследството на стойността му на страницата. При използване на стойност линия височина: 18px без единици се наследяват фактор, който затруднява свързването на вертикалните линии на решетката.
За съжаление, резултатите показват, че онлайн-височина: 18px не мащабирате в IE6 и IE7, остава постоянна при смяна на размера на текста.
Настройка на височината линия в ем - Стъпка 5
При използване на пиксела оказа, ние се обърнахме към тях. Повторението логика ни дава следните стилове:
Резултатите показват последователно променят размера на текста и височина на реда във всички браузъри. Добре. Или почти толкова.
Monospace проблем в Safari - Стъпка 6
Ако досега сте гледали всички примери, вие вероятно сте забелязали, че поведението в Safari фиксирана ширина (Непропорционални) шрифт, включени в основния текст е в противоречие. За да пишете в пиксели, Safari прави размера на шрифта Непропорционални пропорционална на ширината на текста около нея. Въпреки това, когато размерът, определен в тях. Safari прави Непропорционални текст е много по-малко от околния текст. Това несъответствие се дължи на факта, че в Safari текст стандартния размер на 16px за "стандартен шрифт" и 13 пкс за "фиксирана ширина шрифт". Safari 3α под OS X, както изглежда, не страда от този проблем.
Можете да решите, че проблемите Непропорционални текст в Safari - Мъничко е, което вие и вашите читатели могат да живеят, и Safari 3 е вградена OS X Leopard и Тайгър последната актуализация, и проблемът на практика изчезва веднага. За тези, които се притесняват за това много и който не може да чака, алтернативно решение е да се уточни размера на текста в пиксели шрифта на Safari.
Резултатите показват, - сега правилно промените размера на текста и линия-височина с всички браузъри, включително Непропорционални текста в Safari 2.
заключение
Нашата задача е да се намери начин да се определи размера на текста, който ви позволява да се поддържа прецизен контрол върху типографията и потребители без да се нарушава правилното му размер четене. Ние тествахме различни моменти в най-разпространените браузъри. Промяна на текста на височина и ред до размера на тях. с процента, определен за тялото (и бележка по избор за Safari 2), беше показано как да се направи мащабируема текст във всички браузъри в употреба днес.