2011-10-18 6 views
30

Natknąłem się na problem, muszę ułatwić użytkownikom czytanie tekstu, więc użyłem odstępu między literami 1 px, ale wygląda to brzydko, więc pomyślałem, że użyję pół piksela, więc 0.5px, ale to nie działa, próbowałem używać atrybutów em, ale nie osiągnąłem tego zadania.Czy istnieje sposób na utworzenie odstępów między literami css: 0,5 px?

Więc czy jest jakiś sposób, aby się rozstaw pół piksela (cross przeglądarki rozwiązanie jeśli to możliwe)

+1

Prawdopodobnie napotkasz problemy z wyrównaniem pikseli za pomocą [font-hinting] (http://en.wikipedia.org/wiki/Font_rasterization); prawdopodobnie przesuwasz się o pół piksela, ale potem rasteryzer zmienia krawędzie tekstu na piksel. Efekty 0,5px mogą się racjonalnie różnić w zależności od systemu operacyjnego i przeglądarki oraz przeglądarki. – Phrogz

+0

Ponieważ jest to najlepsze wyniki Google, aby pomóc innym początkującym rekordzistom, ułamkowe odstępy między literami są obsługiwane przez wszystkie główne przeglądarki z końcem 2013 r. –

Odpowiedz

17

Ten błąd został zgłoszony w 2008 roku i jest potwierdzone. Więc jeśli ktoś ma ochotę włamać się do webkita, który sprawi, że wielu projektantów będzie zadowolonych.

https://bugs.webkit.org/show_bug.cgi?id=20606

+0

Wygląda na to, że łatka w końcu trafiła do webkita! A Chrome/blink został naprawiony jakiś czas temu. Będziemy więc mogli bezpiecznie używać ułamkowego odstępu między literami już wkrótce. – idFlood

+0

Nadal nie działa w Safari ... –

+0

Właśnie testowałem z najnowszym safari (8.0) i teraz działa:) – idFlood

1

rozmiary subpiksel prawne, ale mogą mieć nieprzewidywalne skutki w różnych przeglądarkach. Rzeczy takie jak tekst również próbują dopasować się do całych pikseli (jak mówi Phrogz), więc są szanse, że wynikowe błędy zaokrąglania mogą sprawić, że rzeczy wyglądają nierównomiernie.

+2

Według [Dane techniczne CSS2] (http://www.w3.org/ TR/1998/REC-CSS2-19980512/tekst.html # spacing-props) ilość odstępów wynosi _ "** oprócz ** domyślnej przestrzeni między znakami" _; posiadanie dodatkowych 0,5px jest rozsądnym i czytelnym pragnieniem. – Phrogz

+0

OK, wtedy błąd usunięty z odpowiedzi. – Toomai

6

Odstępy między pikselami działają dobrze na FF, ale nie na WebKit (przynajmniej w systemie Windows). Zobacz ten przypadek testowy:
http://jsfiddle.net/fZYqL/2/

Ten test pokazuje również, że nie jest to literalna wartość subpiksela, która stanowi problem. Używanie ułamkowych wartości, które powodują mniej niż 1 piksel odstępów między literami, nie jest również honorowane w pakiecie Webkit, ale działa równie dobrze w Firefoksie.

Firefox versus Webkit

2

@Zach Re: Cząstkowe pikseli. Chociaż nie istnieją fizycznie, są symulowane cyfrowo przez folie i zmiany koloru. Dobrym przykładem są ikony i szeryfy typu. Bliższe spojrzenie na to, co wydaje się być bardzo cienką linią, szybko pokaże, że jest symulowane poprzez renderowanie linii o jaśniejszym kolorze, który oszukuje oko. Więc nawet jeśli nie istnieją, oprogramowanie graficzne od dawna zajmuje się pikselami ułamkowymi. Szkoda, że ​​przeglądarki webkit wciąż tego nie robią.

Re: odstępy między literami. Można go określić i działa dobrze w przeglądarkach niezwiązanych z webkitem (raz dla IE). W przeglądarkach webkit odstępy między literami są zaokrąglane do najbliższej liczby całkowitej (uważam, że jest zaokrąglana w dół). To zaokrąglenie ma miejsce nie tylko wtedy, gdy odstęp między literami jest określony bezpośrednio jako piksel ułamkowy, ale także wtedy, gdy jest określony jako wartość procentowa lub em, a końcowe obliczenie w pikselach powoduje powstanie ułamkowego piksela. Bardzo frustrujące.

5

Ten błąd został fixed in Chromium i wylądował w Chrome 30. Wartości ułamkowe są teraz obsługiwane przez Firefox, Chrome i Opera.

+0

To jest przeznaczone do naprawienia, ale wciąż widzę to w najnowszym (na razie) '31.0.1650.48 m'. –

+0

Testowałem powyższy przykład (http://jsfiddle.net/fZYqL/2/) w Chrome w wersji 31.0.1650.48, który działał dobrze dla mnie. – Max

+0

Testowany i wydaje się również pracować nad IE9 + – Wolverine

Powiązane problemy