text-renderingNieruchomość w CSS pozwala wybrać jakość tekstu nad prędkością (lub odwrotnie) i pozwala na dokładne dostrojenie optymalizacji sugerując w przeglądarce, jak powinno to uczynić tekst na ekranie. Powiedział inaczej w MDN:
Właściwość
text-renderingCSS dostarcza silnikowi renderowania informacji o tym, co należy zoptymalizować podczas renderowania tekstu. Przeglądarka oferuje kompromisy między szybkością, czytelnością i geometryczną precyzją.
Możesz zobaczyć kilka przykładów przed i po tutaj. Czasami wynikiem jest po prostu lepszy kerning:
Niektóre pliki czcionek zawierają dodatkowe informacje o sposobie renderowania czcionki. optimizeLegibilitykorzysta z tych informacji, a optimizeSpeednie.
Przykład
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Wydajność
Kiedy mówi się, że istnieje kompromis między szybkością a precyzją, nie żartują. Należy wziąć pod uwagę poważne problemy z wydajnością. Ten artykuł jest wart zacytowania w całości:
W rzeczywistości występują poważne, fatalne w skutkach problemy z wydajnością (takie jak 30-sekundowe opóźnienia wczytywania lub dłuższe) na urządzeniach mobilnych podczas korzystania z funkcji OptimizeLegibility dla długich stron. Zastosuj go tylko wtedy, gdy wiesz, jaka będzie maksymalna długość tekstu. (Unikaj też używania go dla klientów z Androidem, przynajmniej w starszych wersjach, z których wszyscy nadal korzystają: jego renderer czcionek często ma bardzo dziwne błędy, gdy ten tryb jest włączony).
Przeprowadziłem kilka testów z Instapaper, aby określić przybliżone limity wydajności OptimizeLegibility. Na przykład artykuł o objętości 5000 słów w Instapaper na iOS będzie używał funkcji optimizeLegibility tylko na urządzeniach z procesorem klasy A5 lub wyższym. Aby uniknąć problemów na starszych urządzeniach z iOS, nie polecałbym ślepego i bezwarunkowego korzystania z funkcji optimizeLegibility na stronach dłuższych niż około 1000 słów. I w ogóle nie polecałbym włączania go na Androidzie.
To kuszące:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Ale bądź cholernie ostrożny, wydaje się niebezpieczny, szczególnie w przypadku zastosowania do dowolnej strony.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Może po Blink? | nie | 2.3+? | 3+? |
Istnieje wiele błędów. Problem z Androidem z nowymi liniami. Chrome ma różne, w tym odstępy między literami. Safari (i inne) domyślnie optymalizuje szybkość, zamiast określać w locie.