В тази статия, ние ще задоволи нуждите на дизайнери в пълнотата на форматиране на текста, оставяйки потребителите да го мащаб, тъй като те моля. Ние ще намерим най-доброто възможно прилагането на подходяща и дизайнери, а потребителите и работеща във всички браузъри и операционни системи.
теста
маркировки, използвани за тестване. състояща се от две колони - основната колона на ляво и дясно равенството. ОГРОМЕН бе избрана да отговори на различни операционни системи и платформи.
Тестването е извършено на браузъри: 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 и текстът в полето 12px. В първия етап, ние само да укажете размера на текста в пиксели:
В резултат на това, Safari и Firefox все още позволяват да мащабирате текста, докато IE6 и IE7 - не. размер на текста в Opera и IE7 може да бъде модифициран с помощта на инструмента на промяна на мащаба, което увеличава и текст и изображения - това е, везни на цялата страница.
Размер на текста в ем - стъпка 2
Въпреки че делът на уеб браузъри, които предпочитат различен за всеки отделен сайт, ние със сигурност можем да кажем, че IE6 в момента се използва от повечето хора. Така определянето на размера на текста в пиксели, ние не дават много хора възможността за нейните мащаби. Друг аргумент - от потребители IE7, които също няма да могат да променят размера на шрифта, без да използвате инструмента за увеличение.
Според резултатите е видно, че размера на текста в настройката по подразбиране на браузъра, съответства на размера, определен в пиксела. Тези резултати също така да предоставят доказателства, че текста в тях. Тя може лесно да бъде намалено и да е от браузърите. Въпреки това, IE6 и IE7, въпреки приемливо, но все пак преувеличават размера на текста, когато тя се увеличава.
Основният текст, определен като процент - стъпка 3
Решение на проблема с неправилното мащабиране на текст в IE6 и IE7 е да се определи стойността на основния текст маркер като процент. Така че, оставяйки ги за останалата част от съдържанието, ние тестваме следните стилове:
Според резултатите показват, че разликите между IE6, IE7 и други браузъри са станали по-слабо изразени. Сега всички браузъри показване текст по същия начин и мащабирането.
Настройка на височината линия в пиксели - повторение 4
За нашия пример, подходяща височина линия - 18px. Ние прилагаме тези настройки в основния текст:
Според резултатите показват, че височината на реда в 18px наследен от всички елементи на страницата - ние също така имайте предвид, че подслушване текста има същата височина на линията, както и че в текста на основните говорители. След определяне на размера на единици (в този случай, пиксела) при височина на линия, тя наследява всички елементи на страницата. Ако установим, височината на реда, без единици. - това съотношение е наследен от всички елементи, но ще бъде пропорционално на размера на шрифта на всеки от елементите, като по този начин се нарушава вертикалната съгласуваност.
За съжаление, резултатите ни казват, че височината на реда в 18px не се мащабира в IE6 и IE7, а размерът на шрифта се променя, и когато бъдат увеличени в - линия лошо натиснат един срещу друг.
Настройка на височината линия в ем - Стъпка 5
Ако един пиксел не е да не работи - ние ще ги използвате. Промяна височината на реда в нашите стилове:
Резултатът е правилна, пропорционално увеличение на шрифта и разстояние между редовете във всички браузъри. Отличен. Е, почти перфектно.
Проблемът с Непропорционални шрифтове в Safari - Стъпка 6
Може би сте забелязали малък проблем в Safari: Непропорционални шрифта на основния текст се показва по различни начини. За текст в Safari пиксела надясно показва Непропорционални шрифт на същия размер като на пропорционален шрифт, около него. Ако текстът е посочен в ги, че Safari показва Непропорционални текст е много по-малко от околния текст. Разликите възникват поради различен размер на шрифта по подразбиране за пропорционалния (16px) и Непропорционални шрифт (13 пкс). В Safari 3а на OS X такъв проблем не съществува.
Може да решите, че глоба Непропорционални текст не е много на вас и вашите читатели боли използване Safari. За тези, които не могат да чакат, алтернативно решение е да инсталирате шрифт в пиксели на Safari.
Според резултатите показват, че шрифтът е вече във всички браузъри изглежда по същия начин, включително Непропорционални текста в Safari 2.
заключение
Нашата цел е да се намери начин за определяне на параметрите на текста, което би позволило на конструкторите да запазят внимателен контрол върху начина на проектиране, без да се жертва възможността потребителят да изберете текста. Ние тествахме различни мерни единици в популярни браузъри. Което показва, размера на шрифта и височина на реда в тях. с процентни стойности за тяло елемент (и с допълнителна разпоредба за Safari) е доказано, как да се направи текста подреден и яснота, като се запазва възможността за мащабиране. Тези методи, можете спокойно да поставят в своите знания и да го използват като един от най-добрите начини, за да инсталирате настройките на текстовите в CSS, който отговаря на дизайнерите, така и за потребителите на сайта.
приложение
Свързани статии