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

27

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:

wprowadź opis zdjęcia tutaj

font-face  subpixel-rendering 
— Littlemad
źródło
Czy możesz podać więcej szczegółów: w jakich przeglądarkach nie wyświetla się dobrze? Czy możesz pokazać przykładowe zrzuty ekranu? Może występować podstawowy problem z renderowaniem tutaj, a nie problem z czcionkami
— Pekka obsługuje GoFundMonica
2
To nie tylko kwestia przeglądarki, ale systemu operacyjnego. Windows ma renderowanie czcionek, które różnią się od Mac OS. W tej chwili nie mam ze sobą komputera Mac (tylko Ipod Touch) i nie mogę pokazać różnicy, ale nawet w dobrze renderowanej przeglądarce do antyaliasingu, czcionki twarzy nie jest dobrze zaimplementowana dla niestandardowych czcionek systemu operacyjnego. Zastanawiałem się (bo mam ograniczony zestaw czcionek), których używa jedna osoba, które nie są źle renderowane na PC.
— Littlemad
@Yi Jiang: Dokładnie dlatego, że ilość czcionek jest ogromna i nie można przetestować tego wszystkiego ani mieć tego wszystkiego, że pytam, jakie są, z doświadczenia każdego, jakie są „bezpieczne czcionki i rozmiar” używać. Widzę, że nikt niczego nie opublikował i nie wiem, czy ktoś coś opublikuje (lub spróbuje przeanalizować renderowanie czcionek na komputerze), dlatego bardziej mi przykro z powodu braku opinii.
— Littlemad,
„przyzwoity” jest czysto subiektywny.
— DA01

Odpowiedzi:

18

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:

dowód 1

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):

dowód 2

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: dowód 3

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: dowód 4

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: dowód 5CT:dowód 6

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: dowód 7 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.

— koiyu
źródło
To jest CW, więc po prostu edytuj go, jeśli się mylę; lub dodaj szczegóły, jeśli znasz jakieś.
— Jari Keinänen
2
Świetne wyjaśnienie koiyu, było tak, jak podejrzewałem, ale nie byłem pewien, dopóki nie opublikował zrzutu ekranu
— JamesHenare
Twój post budzi we mnie wątpliwości. Sprawdziłem swoje ustawienia i przypomniałem sobie, że kiedy instalowałem system operacyjny Vista, zredukowałem do minimum cały efekt, aby poprawić wydajność. I zgadnij co? Typ jawny został wyłączony. Jestem taką głupią osobą, przepraszam za niedogodności. Teraz czcionki wyglądają znacznie lepiej, zdecydowanie czytelne. Więc wiem, że moje pytanie brzmi bardziej: z którego systemu operacyjnego Cleartype nie jest zainstalowany w systemie Windows?
— Littlemad,
@Littlemad nie ma problemu :) Przydało mi się również sprawdzenie źródeł, aby móc podać jakąś odpowiedź zamiast zwykłej opinii .
— Jari Keinänen
1
@Littlemad, typ jawny został po raz pierwszy wprowadzony w Windows XP, chociaż domyślnie jest wyłączony. W systemie Windows Vista jest teraz domyślnie włączony. Również w przeglądarce Internet Explorer 7 jest włączony, nawet jeśli nie jest włączony w całym systemie operacyjnym. Źródło: en.wikipedia.org/wiki/ClearType
— JamesHenare
2

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.

— JamesHenare
źródło
1
Nie, to nie to samo, podpowiedź nie rozwiązuje problemu. Już korzystam z rozwiązania opublikowanego w Internecie na temat Font-Face, którego używa Fontsquirell. To, czego szukam: nawet jeśli nie jest dobrze renderowana czcionka, która wygląda na wystarczająco przyzwoitą do użycia na komputerze? i na jakim rozmiarze czcionki? Szukam listy bezpiecznych czcionek w bezpiecznym rozmiarze. Coś w rodzaju „najlepszych praktyk”.
— Littlemad
Najlepszą praktyką jest nieużywanie ŻADNYCH osadzonych czcionek internetowych do rozmiarów tekstu. Nie są do tego zoptymalizowane. Pozostaw je dla tytułów i nagłówków.
— DA01
1
@ DA01: Jestem projektantem stron internetowych, chcę projektować i używać dobrej typografii, nie mogę po prostu ignorować czcionek, chcę dowiedzieć się, które z nich są dopuszczalne.
— Littlemad,
@Littlemad Jestem również projektantem stron internetowych, który chce projektować i używać dobrej typografii. Wiem, że osadzanie czcionek, przynajmniej na razie, używa głównie czcionek, które nie są zoptymalizowane pod kątem małych rozmiarów tekstu na ekranach. Często brakuje im podpowiedzi, a ich parametry mogą się znacznie różnić, siejąc spustoszenie, jeśli osadzona twarz nie jest dostępna dla konkretnego użytkownika. Używanie czcionek systemowych zoptymalizowanych pod kątem rozmiarów tekstu na ekranach wymaga dobrej typografii.
— DA01
1
@ DAO1: Tak, nie jestem też wielkim fanem tego modelu, ale starałem się zauważyć, że to kwestia dobrych lub złych czcionek, a nie to, że osadzone czcionki są z natury złe.
— Russell Leggett
1

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.

— Tobu
źródło
0

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.

— dkuntz2
źródło
Dziękuję za wyjaśnienie, ale wiem, że problemem jest Windows, ale pytam więcej: jakiego rodzaju czcionek testowałeś lub używałeś na swojej stronie internetowej / kliencie-stronie, której używasz i nadal wyglądasz „całkiem” przyzwoicie na Windowsie?
— Littlemad
W rzeczywistości różni się w zależności od przeglądarki. Firefox i IE będą renderować tę samą czcionkę inaczej, choćby dlatego, że jedna używa EOT, a druga OTF / TTF / WOFF. ClearType również korzysta z renderowania subpikseli. Wiele osób po prostu woli antyaliasing czcionek w OS X niż opcje Windows.
— Calvin Huang
@Littlemad, co rozumiesz przez „dość przyzwoity”, mam na myśli, że po prostu poddałem się temu, że nie oddaje to ładnie. Oto Windows 8.
— dkuntz2
@Calvin Huang: tak, wiem o różnicy renderowania w przeglądarce, ale nie jest to główny problem. Jest to związane z systemem operacyjnym. Przeglądarka Nowdays porządnie renderuje aliasing czcionek. Windows nadal nie. @DKuntz: Co masz na myśli mówiąc „Windows 8”? Widzę wielu ludzi używających czcionek na ważnej stronie i naprawdę brzydko jest widzieć, że robi to dobry projektant. Więc szukam mniejszego zła, wciąż źle renderowanego, ale przynajmniej wystarczająco przyzwoitego, aby nie wyglądać jak tekst Commodore 16. W przeciwnym razie muszę użyć rozwiązania js, aby sprawdzić przeglądarkę i przekazać styl css, jeśli jesteś na komputerze Mac lub PC
— Littlemad
4
To wyjaśnienie jest nieprawidłowe lub przynajmniej niekompletne. Windows wykonuje anty-aliasing subpikseli - taki właśnie jest Cleartype i jest dostępny od XP. W porównaniu do OS X Windows nie renderuje czcionek niepoprawnie , robi to inaczej - różnica jest co najwyżej subiektywna i znajdziesz osoby, które wolą renderować czcionki w systemie Windows. Oprócz tego przeglądarki w systemie Windows również używają różnych metod renderowania - na przykład wszystkie czcionki w dużych rozmiarach w przeglądarce Firefox do 3,6 w systemie Windows będą wyświetlać widoczne postrzępione czcionki. Ten problem rozwiązano w wersji 4, przechodząc na interfejs API DirectWrite.
— Yi Jiang
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.