Czcionka załadowana w systemie Windows wygląda naprawdę źle. Których czcionek używasz do renderowania?

EDYCJA : Problem polegał na tym, że w ustawieniach systemu Vista nie miałem włączonej opcji „Cleartype”. To pytanie może nie mieć większego znaczenia, jeśli masz zainstalowany system Cleartype w systemie Windows.

W sieci pojawił się nowy typograficzny wiatr, a właściwość font-face CSS3 umożliwia ładowanie czcionek innych niż zestaw OS / system. Mój komputer Mac renderuje wiele doskonale, podczas gdy mój komputer z systemem Windows nie. Którego zestawu czcionek powinienem użyć, aby lepiej renderował się w systemie Windows?

Jest to podobne do pytania dotyczącego przepełnienia stosu.

A tutaj przykład strony internetowej, która wygląda źle renderowana na PC za pomocą Myriad Pro: http://css-tricks.com/

UWAGA: Nie mówię o różnicy w wygładzaniu krawędzi między wersjami przeglądarki (jak między IE9 a IE6).

Oczekuję, że w odpowiedzi na twoje testy, lista czcionek plus rozmiar (proszę użyć px), które dobrze wyglądają, a przynajmniej w taki sposób, że można ich użyć do krótkiego tekstu lub małych tytułów.

Na przykład w tej chwili „League Gothic, 30px” wygląda następująco:

To powinien być komentarz (stąd ten CW), ale myślę, że w tym pytaniu są pewne nieporozumienia i błędne założenia. Ponieważ oczywiście chcesz uzyskać odpowiedź na to pytanie (mimo wszystko zaoferowałeś nagrodę), oto moje dwa centy.

Z twojego zrzutu ekranu wydaje mi się, że ustawiłeś system Windows do regularnego renderowania czcionek (w przeciwieństwie do renderowania subpikseli) i prawdopodobnie Twoja przeglądarka nie wykonuje żadnego antyaliasingu (może, ale potem nie ma kompresji JPG).

Poniższe przykłady dotyczące okien pochodzą z XP Pro SP 3, więc można bezpiecznie założyć, że sytuacja jest co najmniej na tym samym poziomie w systemach Vista i 7.

System Windows ma (w XP) opcje używania ClearType lub nie. Bez ClearType czcionki są renderowane jak na zrzucie ekranu. Jest to mocno powiększony obraz z okna Windows bez CT:

Widzisz, że jest to operacja binarna: piksel jest czarny lub przezroczysty. Teraz z niektórymi nowoczesnymi przeglądarkami, nawet bez CT, mają pewne wygładzanie krawędzi. To jest z css-tricks.com z Windows XP i Chrome 8, a CT jest WYŁĄCZONY (jak to było na poprzednim zdjęciu):

Widzisz co się stało? Prawdopodobnie już to zrobiłeś, jak powiedziałeś w swoim pytaniu.

UWAGA: Nie mówię o różnicy antyaliasingu występującej między nowymi i starymi przeglądarkami (jak między IE9 a IE6).

Teraz ClearType !

Oto dokładnie ten sam tekst z okna Windows, tym razem z CT:

Jeśli jesteś zainteresowany tym, na czym to polega, zobacz artykuł w Wikipedii na temat renderowania subpikseli . I czy włączenie ClearType wpływa na renderowanie w przeglądarce? Ten sam „inny” tekst w systemie Windows XP i Chrome 8 oraz ClearType jest włączony:

To robi! I chociaż jesteśmy przy tym, mogę dodać, że (przynajmniej) IE 8 używa renderowania ClearType, nawet jeśli jest wyłączony na poziomie Windows.

Porównywanie tekstu antyialialnego i ClearTyped w 100% nie jest tak radykalne, jak porównywanie tekstu ClearTyped z nie-antyializowanym. Jest jednak wyraźnie odważniejszy:

aa: CT:

Aby zobaczyć, jak to wygląda bez antyaliasingu, wystarczy spojrzeć na zrzut ekranu Littlemada .

Dla porównania jest to ta sama „inna” w domyślnym renderowaniu OS X: jeszcze bardziej odważniejsza niż ClearType.

Aby odpowiedzieć na twoje pytanie: dowolna czcionka . Jeśli Twój system operacyjny renderuje czcionkę inaczej, może to wynikać z tego, że system operacyjny ustawił tak, aby czcionki były renderowane . LUB może być tak, że twoja przeglądarka nie ma możliwości antyaliasingu lub ClearType.

Innym pytaniem byłoby, dlaczego niektóre czcionki są renderowane poprawnie, a niektóre nie - jeśli tak jest w rzeczywistości (ale nie widzę żadnych problemów na stronie, o której wspomniałeś w systemie Windows). A może pytasz o czcionki, które wyglądałyby odpowiednio bez żadnego renderowania?

A oto także odpowiedź na często zadawane pytanie: „Tak, wiem to wszystko - dlaczego ClearType wygląda inaczej niż renderowanie w OS X ?!”

Ponieważ są różne. Renderowanie subpikseli nie jest łatwe do zaimplementowania. ClearType jest zastrzeżonym znakiem towarowym Microsoft i jest chroniony 10 patentami (+ 1 w toku; patrz wikipedia ). Po prostu nie mogą być tacy sami.

Jeśli problem jest taki sam jak w przypadku pytania Stackoverflow, o którym mówisz, to czy odpowiedź nie jest taka sama ?

To problem z podpowiedziami .

Podczas generowania zestawu czcionek (tak jak w FontSquirrel) musisz określić Wskazówki w opcjach Eksperta.

Wybierz Expert, aw obszarze Rendering wybierz:

Zastosuj podpowiedź - Popraw renderowanie wygranych.

ttfautohint może być użyty do przebudowania podpowiedzi kodu czcionki; ustawienia domyślne (kompatybilne z GDI) powinny pomóc systemowi Windows w renderowaniu czcionki.

Nie ma to nic wspólnego z przeglądarką, ale z samym systemem Windows.

* Systemy nix (unix / linux i OSX są w tym zawarte, ponieważ mają bazę uniksową) mają opcję dokładnego kontrolowania sposobu wyświetlania tekstu i generalnie są ustawione na renderowanie subpikseli (co ma znacznie bardziej techniczne wyjaśnienie niż to, co ja dam ci, ale w zasadzie używa subpikseli (czerwonej, zielonej i niebieskiej części pikseli ekranu) do renderowania tekstu), w których Windows używa czystego typu, co jest jego rodzajem renderowania, że ​​jestem trochę rozmyte na mechanice.

Prawie tyle, że Windows nie renderuje podpikseli, to nie są czcionki ani pliki, ale system operacyjny wyświetla te czcionki i pliki.

Włączanie ClearType w systemie Windows XP:

1) Postępuj zgodnie z tymi instrukcjami: http://blogs.msdn.com/b/virtual_pc_guy/archive/2011/10/05/enabling-cleartype-on-windows-xp-mode.aspx

2) Teraz wykonaj to na swoim IExplorer: http://www.microsoft.com/typography/cleartype/tuner/step1.aspx

Użyj poniższego kodu w CSS

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

To może ci pomóc