Рендиране на текст - CSS-трикове

Anonim

В text-renderingимота в CSS ви позволява да изберете качество на текст върху скоростта (или обратното), което ви позволява да направите фина настройка на оптимизация чрез внушаване на браузъра за това как тя трябва да направи текст на екрана. Каза друг начин в MDN:

В text-renderingCSS Имотът се предоставя информация за модул за визуализация за това какво да се оптимизира за когато предлагат текст. Браузърът прави компромиси между скоростта, четливостта и геометричната прецизност.

Тук можете да видите някои примери преди / след. Понякога резултатът е просто направо по-добър кернинг:

Някои файлове с шрифтове съдържат допълнителна информация за това как трябва да се изобрази шрифтът. optimizeLegibilityизползва тази информация и optimizeSpeedне я използва.

Пример

p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )

производителност

Когато се казва, че има компромис между скоростта и точността, те не се шегуват. Може да има значителни проблеми с производителността, които да се разгледат. Тази статия си струва да се цитира изцяло:

Всъщност има значителни, ефективно фатални проблеми с производителността (като 30-секундни закъснения при зареждане или по-дълги) на мобилните устройства, когато се използва optimizeLegability за дълги страници. Приложете го само ако знаете каква ще бъде максималната дължина на текста. (Също така избягвайте да го използвате за клиенти на Android, поне в по-старите версии, които все още използват всички: неговият шрифт рендер често има много странни грешки, когато този режим е активиран.)

Направих някои тестове с Instapaper, за да определя приблизителни граници на производителност optimizeLegability. Например статия от 5000 думи в Instapaper за iOS ще използва optimizeLegibility само на устройства с процесор от клас A5 или по-голям. За да избегна проблеми на по-стари iOS устройства, не бих препоръчал да използвате optimizeLegibility сляпо и безусловно на страници, по-дълги от около 1000 думи. И изобщо не бих препоръчал да го активирате на Android.

Изкушаващо е да се направи:

/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )

Но внимавайте за това, изглежда опасно, особено когато се прилага към произволна страница.

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
4+ 5+ 3+ Може би след мигане? Не 2.3+? 3+?

Има различни грешки. Проблем с Android с нови редове. Chrome има различни, включително разстояния между букви. Safari (и други) по подразбиране оптимизира скоростта, а не определя в движение.