Как да направите перфектно изобразяване на текст

Изборът на красив шрифт е безполезен, ако изглежда грозно на екрана ви. За да избегнете отвратителен - или по-лошо - нечетлив текст, винаги трябва да проверявате дали шрифтът работи добре на устройствата, които вашите посетители използват. Може да се изненадате; повечето от посетителите ви вероятно не използват същото устройство, което използвате за проектиране и разработване. Всъщност по-голямата част от хората, сърфиращи в интернет, използват машини с Android и Windows.

Използване на операционна система в световен мащаб, според StatCounter Global Stats (април 2017 г.). Устройствата на Apple представляват малка част от глобалната употреба, докато Android и Windows доминират.



Използване на операционна система в световен мащаб, според StatCounter Global Stats (април 2017 г.). Устройствата на Apple представляват малка част от глобалната употреба, докато Android и Windows доминират.

Най-добрият начин да тествате поведението на шрифта е да зададете примерен текст в шрифта и да го изпробвате на всички устройства, към които сте насочени. Лошото изобразяване е особено забележимо при тънки тежести.



Например шрифт, който се представя добре на macOS, може да изглежда крехък в Windows (вижте изображението по-долу). Важно е да използвате реални устройства, тъй като инструментите за онлайн тестване на браузъри и виртуалните машини често са неточни (повече за това по-късно).

преглед на huion new 1060 plus (8192)



Jubilat Thin на Windows 7 (вляво) и macOS (вдясно). Имайте предвид, че на macOS текстът изглежда „по-тежък“, отколкото на Windows 7.

Ако все още нямате съдържание на сайта си (tsk!), Дайте на Тим Браун Образец на уеб шрифт въртене. Той задава съдържание в няколко размера на текста и с различни цветове на фона. Това не е заместител на реално съдържание, но ще стане на крачка.

Понякога имате късмет и шрифтът, който сте избрали, е проектиран изрично за екрани: ScreenSmart на Hoefler & Co, eText на Monotype и Reading Edge на Font Bureau са примери за колекции, специално проектирани с мисъл за екрани и трябва да изглеждат красиви навсякъде. Разбира се, струва си да проверите повторно изобразяването на текста, независимо от произхода на шрифта.

Но точно защо текстът изглежда различно при различните браузъри? За да отговорим на този въпрос, ще трябва да направим бърз заобиколен път към глупавите песъчинки подробности при изобразяването на текста.



Растеризиране и сглаждане

Процесът на трансформиране на контурите на шрифта в пиксели се нарича растеризация. Механизмът за визуализиране на текст на операционната система поставя контура (т.е. формата) на всеки символ с желания размер на шрифта върху пикселна мрежа. След това оцветява всички пиксели, чийто център е вътре в контура (вижте изображението по-долу).

как да стана професионален видео редактор

От кривата на Безие до пиксели. Вляво е очертанието на символа „а“. В средата този контур се наслагва върху пикселна мрежа; всеки пиксел, чийто център е в контура, е включен. Вдясно е получената растеризация.

В този пример пикселът е включен или изключен, без значение колко от контурите присъства в пиксела. Това сближаване на математически перфектни контури се нарича псевдоним; опити за сгъстяване за смекчаване на грубите външни прилики на стълби, причинени от ограничената разделителна способност на екраните.

Идеята на антиалиасинга е да се разбере каква част от контурите присъства във всеки пиксел и да се представи това със стойност на сивата скала. С други думи, ако контурът обхваща 50% от пиксела, той използва 50% от черното, за да оцвети този пиксел. Ако пикселът е изцяло в очертанията, се използва 100 процента черно и т.н. Това води до сгъстен визуализация, който намалява псевдонима (вижте изображението по-долу). Често ще виждате термина „сглаждане на сивата скала“, използван за описание на този ефект.

Изглаждането с помощта на стойности на сивата скала, за да се представи контурното покритие на всеки пиксел, дава по-добри резултати.

Изглаждането с помощта на стойности на сивата скала, за да се представи контурното покритие на всеки пиксел, дава по-добри резултати.

Докато сглаждането подобрява качеството на изобразяване на текст, възможно е да подобрите резултата допълнително, като използвате подпикселно изглаждане. Subpixel antialiasing използва характеристиките на екраните, за да увеличи разделителната способност на растеризирания текст. Всеки пиксел в дисплея се състои от три продълговати субпиксела: червен, зелен и син (съществуват и други конфигурации, но се прилагат същите принципи). Операционната система може да контролира тези субпиксели поотделно; subpixel antialiasing експлоатира това чрез прилагане на изчислението на покритието към всеки субпиксел (вижте изображението по-долу).

Чрез насочване към отделни подпиксели, подпикселното сглаждане ефективно увеличава разделителната способност на изобразения текст. Цветовете, които невъоръженото око възприема (вляво) са резултат от задаване на индивидуални стойности на покритие за всеки субпиксел (вдясно); субпикселите за червено, зелено и синьо се комбинират, за да образуват един единствен осезаем цвят.

Чрез насочване към отделни подпиксели, подпикселното сглаждане ефективно увеличава разделителната способност на изобразения текст. Цветовете, които невъоръженото око възприема (вляво) са резултат от задаване на индивидуални стойности на покритие за всеки субпиксел (вдясно); субпикселите за червено, зелено и синьо се комбинират, за да образуват един единствен осезаем цвят.

Разликата между тези опции за изобразяване на текст става очевидна, когато започнете да работите с по-малки размери на текста. Без сглаждане, героите бързо губят отличителните си очертания. Стягането на сивите скали прави мъжете размазани, но запазва формата им. Subpixel antialiasing прави остри символи, но също така въвежда някои цветни ресни около ръбовете на героя.

Съвети за изглаждане

Можете да промените настройките за сглаждане чрез нестандартни -webkit-изглаждане на шрифта и -moz-osx-изглаждане на шрифта CSS свойства. За съжаление, много CSS рамки и библиотеки използват сгладен и сива скала стойности, за да изглежда текстът по-лек в macOS. Повечето разработчици и дизайнери обаче не осъзнават, че това деактивира субпикселното сглаждане и прави текста по-размазан, като по този начин вреди на четливостта.

Промяната на предпочитания текст на някой друг да бъде по-малко четлив е много несъобразно. Ако трябва да имате по-лек текст, използвайте по-малко тегло, вместо да деактивирате субпикселното изобразяване.

как да рисувам вода с блажна боя

Двигатели за рендиране на текст

Повечето операционни системи използват свой собствен патентован механизъм за рендиране на текст, докато други използват същия двигател с отворен код (макар и не непременно със същата конфигурация). Всички те обаче поддържат сглаждане и субпикселно сглаждане, но се различават леко в тяхното изпълнение. В много операционни системи изборът на метод за сглаждане може да бъде избран от потребителя. В Windows например субпикселното сглаждане се нарича ClearType; на macOS се нарича LCD Font Smoothing.

В момента има четири основни механизма за рендиране на текст: интерфейсът на графичните устройства (известен също като GDI) и DirectWrite в Windows; Основна графика на macOS и iOS; и FreeType с отворен код за Linux, Chrome OS и Android.

Най-общо казано, браузърът ще използва механизма за рендиране на текст, който е присъщ на операционната система, на която работи. Chrome например използва DirectWrite на Windows, Core Graphics на macOS и FreeType на Android. Windows е уникален с това, че предлага два механизма за рендиране на текст: GDI и по-новия DirectWrite.

Всички съвременни браузъри използват DirectWrite, така че не е нужно да се притеснявате за GDI, освен за едно изключение: някои браузъри се връщат на по-ниското GDI изобразяване, ако машината няма специален графичен хардуер. Инструментите за онлайн тестване на браузъри и виртуалните машини често нямат специален графичен хардуер, така че изобразяването на текст на тези инструменти не е точно.

В идеалния случай целият текст се изобразява с помощта на субпикселно сглаждане, тъй като създава най-четливия текст. За съжаление това не винаги е възможно - например, субпикселното сглаждане често е деактивирано на устройства, които могат да се въртят, като таблети и телефони. Когато завъртите екрана на тези устройства, субпикселите вече не са подредени в шаблона, очакван от растеризатора, и ще накара субпикселното сглаждане да изглежда грозно.

Допълнително четене: от избора до оптимизацията, Наръчникът на Webfont ви показва как уеб шрифтовете могат да направят мрежата по-визуално разнообразна, ефективна и четлива среда.

Допълнително четене: от селекция до оптимизация, Наръчник за уеб шрифтове ви показва как уеб шрифтовете могат да направят мрежата по-визуално разнообразна, ефективна и четлива среда.

Браузърите също деактивират подпикселното сглаждане в подобни ситуации, например когато текстът се завърта или анимира. В този случай растеризираният текст вече не съответства на подпикселното оформление на първоначалната позиция на текста и ще трябва да бъде растеризиран отново. Това е скъпо, особено за анимации, така че повечето браузъри се възползват от сгъстяването на скалата на сивото, което не страда от същия проблем и работи във всякаква ориентация.

Някои браузъри - Chrome на macOS например - също деактивират субпикселното сглаждане на екрани с висока разделителна способност, за да осигурят по-последователно потребителско изживяване. Други браузъри позволяват подпикселно изглаждане само на малък текст, тъй като незначителни промени в изобразяването на текст са по-малко видими при по-големи размери.

Има няколко други случая, когато браузърите деактивират субпикселното сглаждане. Правилата, които браузърите използват за избор на метода за сглаждане, постоянно се актуализират като намерени са нови ъглови случаи и проблеми . Тези чести промени затрудняват проследяването на случващото се с визуализирането на вашия текст. Това, което някога е използвало субпикселно сглаждане, може да се върне към сивата скала със следващата актуализация на браузъра. Единственият начин да разберете със сигурност как се визуализира вашият текст е да тествате на действителни устройства.

Вероятно сте свикнали да тествате сайта си в няколко браузъра. Тестването на визуализация на текст увеличава обема на тестването, което трябва да направите многократно. Не само трябва да проверите всички комбинации от операционни системи и браузъри, но и всички често срещани настройки за изобразяване на текст.

Някои устройства могат да бъдат предварително конфигурирани да използват сглабяване на скалата на сивото, докато други използват комбинация от сменяемост на сивата скала и субпикселно изглаждане. За да бъде още по-трудно, не е възможно да се използват инструменти за тестване на онлайн браузър или виртуални машини, тъй като изобразяването на текст често се различава от това на реалните устройства.

При тестване винаги използвайте представителна извадка от вашето съдържание. Библиотеката с шаблони е идеално подходяща за тестване на рендиране на тип, защото включва широка извадка от вашето съдържание: заглавки, основен текст, етикети, цветове на фона и анимация. Наличието на примери за вашето съдържание на една страница ви позволява бързо да проверите всички комбинации от стилове и цветове на фона.

Внимавайте за текст, който не е четлив или изглежда тънък в някои операционни системи. Ако откриете проблем, преминете към друго тегло в едно и също семейство шрифтове, направете текста по-тъмен или изберете друг шрифт. Късмет.

готини неща за рисуване с пастели

Тази статия първоначално е публикувана в брой 301 на net, най-продаваното списание за уеб дизайнери и разработчици в света. Купете издание 301 или абонирайте се за net .

Свързани статии: