На тази страница

The рендиране на текст Свойството CSS предоставя информация на механизма за рендиране за това за какво да се оптимизира при изобразяване на текст.

каскадни

Браузърът прави компромиси между скоростта, четливостта и геометричната прецизност.

Забележка: Свойството за рендиране на текст е SVG свойство, което не е дефинирано в нито един CSS стандарт. Браузърите Gecko и WebKit обаче ви позволяват да приложите това свойство към HTML и XML съдържание на Windows, macOS и Linux.

Един много видим ефект е optimizeLegibility, който позволява лигатури (ff, fi, fl и др.) В текст, по-малък от 20px за някои шрифтове (например Calibri, Candara, Constantia и Corbel на Microsoft, или семейството на шрифтовете DejaVu).

Синтаксис

Стойности

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

В SVG, когато текстът се мащабира нагоре или надолу, браузърите изчисляват окончателния размер на текста (който се определя от посочения размер на шрифта и приложената скала) и изискват шрифт с този изчислен размер от системата на шрифтовете на платформата. Но ако поискате размер на шрифта, да речем, 9 със скала от 140%, полученият размер на шрифта от 12,6 не съществува изрично в системата на шрифтовете, така че вместо това браузърът закръглява размера на шрифта до 12. Това води до стълбищно мащабиране на текста.

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

Забележка: WebKit точно прилага посочената стойност, но Gecko третира стойността по същия начин като optimizeLegibility .

Официално определение

Начална стойност Отнася се заНаследениИзчислена стойностТип анимация
Автоматичен
текстови елементи
да
Както е посочено
отделен

Официален синтаксис

Примери

Автоматично прилагане на optimizeLegability

Това показва как optimizeLegibility се използва от браузърите автоматично, когато размерът на шрифта е по-малък от 20px .

Резултат

optimizeSpeed ​​срещу optimizeLegability

Този пример показва разликата между появата на optimizeSpeed ​​и optimizeLegibility (във вашия браузър; други браузъри могат да се различават).