Jak mogę poprawić wygląd czcionki w Google Chrome?

72

Po lewej stronie znajduje się Firefox 4, po prawej chrom 12.

Po lewej stronie jest Firefox 4, po prawej chrom 12. Czy istnieje sposób, aby chrom renderował ładniejsze czcionki?

Powyższe zdjęcie zostało zrobione na Windows XP. Poniżej znajduje się inny przykład z systemu Windows 7.

wprowadź opis zdjęcia tutaj

ściska
źródło
Linux czy Windows?
Nicu Zecheru,
Windows Powyższy zrzut ekranu został zrobiony na Windows XP. Wygląda trochę lepiej na moim komputerze z systemem Windows 7, ale niektóre strony zdecydowanie cierpią. Oto inny przykład: i.imgur.com/zbuUr.png
hughes
1
Czy te domyślne czcionki systemu operacyjnego lub czcionki osadzone? (Np. Przez TypeKit.com)?
czerwony
1
To dobre pytanie. Jest to najbardziej widoczne na czcionkach osadzonych. Domyślne czcionki bezpieczne w Internecie wyglądają dobrze. Wszystko na TypeKit.com wygląda na postrzępione i okropne.
przytula
Niestety renderowanie TypeKit wygląda naprawdę inaczej w różnych kombinacjach przeglądarki \ systemu operacyjnego. :(
czerwony

Odpowiedzi:

35

Sprawdź ustawienia ClearType - zrzut ekranu Chrome wygląda na zmuszony do renderowania bez wygładzania. To zabije prawie każdą czcionkę internetową, ponieważ nie mają one monochromatycznych podpowiedzi (między innymi ze względu na rozmiar). Widziałem to jako „IE renderuje tekst lepiej”, ponieważ ignoruje ono ustawienia ClearType na poziomie systemu operacyjnego i domyślnie je włącza.

Symetria
źródło
Wow, to był cały problem. Wydaje mi się, że Firefox ignoruje również ustawienia czystego rodzaju. Dzięki! Ciesz się nagrodą!
przytula
6
ignoruje ustawienia ClearType na poziomie systemu operacyjnego ” i co?
Der Hochstapler
Również dla mnie działało przyspieszenie GPU. Zobacz lonesysadmin.net/2011/09/12/…
Jimmy Bogard
5
Gdzie można sprawdzić ustawienia ClearType?
chharvey
1
Ta odpowiedź wyjaśnia, jak to zrobić na XP - nie ma „ClearType” w Start ani w Panelu sterowania. superuser.com/a/441694/46972
ashes999
23

Wszystkie te odpowiedzi są błędne! To duży błąd w Google Chrome, zobacz oficjalny raport o błędzie / wątek, w tym wiele zrzutów ekranu: Oficjalny raport o błędach w kodzie Chrome

Obecnie najlepszym sposobem na obejście tego problemu jest po prostu nadanie temu elementowi / nagłówkowi tej prostej zasady:

-webkit-text-stroke: 1px

Dodatek od dr Johna: Znalazłem sugestię, która również html { -webkit-text-stroke: 0.25px}by działała - znalazłem ją tutaj https://groups.google.com/forum/?fromgroups#!topic/mathjax-users/dV_TmJ1QMO4

Sliq
źródło
To jeszcze bardziej poprawia. Jak domyślnie włączyć ten CSS dla wszystkich witryn?
ShuaiYuan,
@shuaiyuancn Przepraszamy, co? Dlaczego masz na myśli „wszystkie strony”? To nie ma sensu.
Sliq,
1
To ma sens. Staraj się myśleć jak użytkownik końcowy, a nie programista internetowy, jak wskazuje pierwotne zamówienie. Wyłączyłem bezpośrednie pisanie w chrome: // flags i dodałem globalną regułę -webkit-text-strokew stylowym dodatku. Teraz Chrome daje mi trochę więcej przyjemności.
ShuaiYuan,
Teraz jestem zdezorientowany, przez lata myślałem, że superużytkownik oznacza Linuksa Sudo i jest portalem dla zaawansowanych użytkowników Linuksa, a nie dla zwykłych użytkowników Internetu. Hmmm ... dziwne.
Sliq
1
Przez lata myliłeś się. Sprawdź slogan: Super użytkownik Dla entuzjastów komputerów i zaawansowanych użytkowników. Nie sądzę, żeby zwykli użytkownicy dostosowywali takie czcionki.
ShuaiYuan
16

Chrome odczytuje ustawienie ClearType, które w systemie Windows XP jest domyślnie wyłączone.

  1. Aby rozwiązać problem, najpierw zamknij przeglądarkę Chrome.

  2. Teraz kliknij prawym przyciskiem myszy dowolne miejsce na pulpicie i wybierz „Właściwości” z menu rozwijanego.

  3. Kliknij kartę „Wygląd” znajdującą się u góry w nowym oknie.

  4. I kliknij przycisk „Efekty”.

  5. Druga opcja powinna brzmieć: „Użyj poniższej metody do wygładzenia krawędzi czcionek ekranowych”.

  6. Wybierz opcję „ClearType”.

  7. Kliknij Zastosuj i ponownie otwórz przeglądarkę Chrome.

Odtąd Chrome sprawi, że twoje czcionki będą ładnie wygładzone, aby uzyskać ten płynny efekt.

Simon Beal
źródło
2
Działa
2
Działa bez ponownego uruchamiania chrome.
Quazi Irfan
Nie działało to dla mnie na XP, dopóki nie uruchomiłem ponownie Chrome.
ashes999
1
Windows 8: Panel sterowania> Wyświetlacz> Dostosuj tekst ClearType> przejdź do kreatora Dalej Dalej. Uruchom ponownie przeglądarkę - to pomaga.
wieża
Musiałem także ponownie uruchomić komputer, aby umożliwić zastosowanie zmian ClearType w systemie Windows 10. Świetne rozwiązanie BTW!
Prosty Sandman
12

Umieść plik SVG wyżej w regule css font-face, na przykład na 1. lub 2. miejscu:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Zamiast:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Przykłady tej poprawki można zobaczyć tutaj:

Przykłady
FontSpring Przykłady Adtrak

wykopać
źródło
Dzięki wielkie!! W poprzednim projekcie zauważyłem, że OTF również wyglądał naprawdę dobrze, wypróbowałem go w innym projekcie i wyglądało to okropnie! SVG wygląda naprawdę dobrze =)
zzz
6

Czy masz włączoną akcelerację GPU w Google Chrome? Wpisz about:flagsi wyszukaj GPU Accelerated Canvas 2D, wyłącz ją, jeśli jest włączona. Czcionki na niektórych stronach wydają się naprawdę postrzępione, gdy przeglądam z włączonym przyspieszeniem.

czerwony
źródło
Kiedyś włączałem to sam, ale po wersji 10 renderowanie czcionek stało się hitem. Mam nadzieję, że Google rozwiąże problem w pewnym momencie.
czerwony
To było wyłączone. Próbowałem tymczasowo włączyć to, aby zobaczyć, co się stanie, i nie zauważyłem żadnej różnicy.
przytula
W porządku. Jeśli uda Ci się znaleźć, co było nie tak, pamiętaj o aktualizacji tutaj.
czerwony
W moim przypadku wyłączenie akceleracji GPU naprawiło aliasing.
kcbanner
Pracował dla mnie! Windows 7, Chrome 52
Vincent
2

W przeglądarce Google Chrome kliknij Klucz> Opcje> Pod maską> [obok Treści WWW] kliknij Dostosuj czcionki.

Zmień ustawienia, aby Twoja strona wyglądała jak mojaMój ekran opcji

Następnie kliknij x i sprawdź, czy problem został rozwiązany.

Jeśli to nie rozwiąże problemu, może być jeszcze jedna rzecz ... ale poczekam, aż spróbujesz.

wizlog
źródło
Już identyczne: i.imgur.com/zhTBS.png choć zauważysz, że nawet porównując nasze zrzuty ekranu, domyślne czcionki są bardzo postrzępione na moim komputerze.
przytula
OK ... kto tworzy twoją kartę wideo?
wizlog
Ponadto ... przejdź do google.com/webfonts. Czy wszystkie są tak samo popsute? Wiem, że poszedłeś na typekit.com ... ale może być inaczej. Spróbuj przejrzeć różne filtry i sprawdź, czy twój problem dotyczy wszystkich z nich (np. Czy to tylko serif, czy ...)
wizlog
3
Zmienia to krój pisma („czcionki”). Nie ma to nic wspólnego z renderowaniem czcionek .
Andres Riofrio,
2

Chrome nie renderuje obecnie dobrze czcionek internetowych. W tym celu jest kilka błędów w narzędziu do śledzenia problemów. Proszę oznaczyć je gwiazdką, aby zwrócić na nie większą uwagę.

Sam Hasler
źródło
2

Miałem dokładnie ten sam problem, renderując strony internetowe z http://www.google.com/webfonts w Chrome. Wypróbowałem wszystkie sugestie dotyczące tego i kilku innych witryn i żadna z nich nie działała.

W końcu zacząłem sprawdzać właściwości CSS tekstu, którego dotyczy problem, okazało się, że rzeczywisty kolor czcionki był przyczyną problemu. Podany tytuł color:#454545źle się renderuje, ale ten sam tytuł, biorąc pod uwagę następujące: color:#333działał dobrze. Dzięki Bogu za arkusze stylów specyficzne dla klienta użytkownika!

ukdesignservices
źródło
2

W Windows XP właśnie zmieniłem opcję wygładzania z „Domyślny” na „Wyczyść
tekst ” w Display → Właściwości → Wygląd → VisualEffects.

Berau
źródło
2

Chrome przyjmuje wartość systemową clearType dla czcionek. Wyjaśnia to lepszy wygląd w systemie Windows 7. Podejrzewam, że na Macu wygładzanie jest włączone dla wszystkich czcionek powyżej rozmiaru 8. Spróbuj włączyć lub zmienić opcję clearType komputera z systemem Windows

Aktualizacja : Wydaje się, że Chrome 22 i nowsze ignorują ustawienia systemowe dlaclearType

Om Shankar
źródło
1

Miałem ten problem tak poważnie w systemie Windows XP SP3, że uniemożliwił on używanie Chrome we wszystkich celach i celach. Zauważyłem, że zainstalowałem funkcję Clear Type Tuning w Panelu sterowania i próbowałem odznaczyć opcję „Włącz wygładzanie czcionek” na karcie Zaawansowane. Po ponownym uruchomieniu Chrome. było ok, nawet po ponownym włączeniu wygładzania czcionek. Postanowiłem zaznaczyć pole „Zastosuj wszystkie ustawienia do wartości domyślnych dla nowych użytkowników i systemu”.

użytkownik318333
źródło
1

Dla mnie nie było to ustawienie ClearType w Windows 10.1 x64, ale okazało się, że jest to ustawienie w mojej przeglądarce Chrome o nazwie DirectWrite.

  1. Na pasku adresu w przeglądarce Chrome wpisz: chrome://flags/#directwrite
  2. I włącz DirectWrite, tytuł tego ustawienia mówi Wyłącz DirectWrite i upewnij się, że przycisk pod nim pokazuje słowo: Włącz

To rozwiązało problem.

Alexscended
źródło
0

Wygląda na to, że długa i trudna odpowiedź brzmi: nie możesz. W Pomocy Chrome jest wiele dyskusji i sugestii , ale nie widzę nic wartego sugestii.

Najważniejsze pytanie brzmi: jak to wygląda tak źle ?! Używam Chrome do pisania w tym polu ... Nawet powiększyłem całą wiązkę i nie widzę nic takiego jak ty. Jeśli nadal masz pytania, wyjaśnij społeczności swoją konfigurację.

Mbb
źródło
0

Chociaż Chrome jest „użyteczny” dla czcionek, wygląda cienko i jest wyprany w miejscach, w których renderuje zwłaszcza ukośne linie. IE renderuje znacznie lepiej, ale IE jest wolniejszą przeglądarką, więc FireFox.

Uważam, że jest to nieodłączne w kodzie Chrome.

BTW, HackToHell, gdzie mogę zmienić kolor renderowania?

Spróbuję tego.

DBDooDoo
źródło
0

naciśnij klawisz Windows + R, a następnie wpisz tam cttune.exe

alternatywną metodą jest naciśnięcie klawisza Windows, następnie wpisanie czystego tekstu, a następnie wybranie Dostosuj tekst ClearType

i postępuj zgodnie z instrukcjami, jeśli nadal masz problemy, wypróbuj inne przykłady

to działało dla mnie, musisz wypróbować różne przykłady, podobnie jak w przypadku kalibracji kontrastu / jasności, ale zamiast tekstu

Do Twojej wiadomości: wyłączenie przyspieszenia 2d może pomóc chromowi w grze z narzędziem dostrajania systemu Windows

nwgat
źródło
0

Jeśli chcesz, aby czcionki internetowe były czytelne przy jednoczesnym wyłączeniu wygładzania / czyszczenia typu czcionki, rozwiązaniem jest wyłączenie czcionek internetowych w Google Chrome. W takim przypadku przeglądarka będzie używać standardowych czcionek systemu operacyjnego, które są renderowane poprawnie, gdy wyłączony jest tryb czyszczenia / wygładzania. Aby to zrobić, przekaż /disable-remote-fontsflagę do chrome.exe. Kliknij i przytrzymaj skrót Google Chrome na pulpicie, wybierz Właściwości, przejdź do zakładki Skrót i ustaw Cel na:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" /disable-remote-fonts

Może być jeden problem z wyłączonymi czcionkami internetowymi. Jeśli witryna używa ikon z czcionek internetowych, nie będą się wyświetlać.

Odpowiedni problem w narzędziu do śledzenia Chromium:

„Ogólnosystemowe ustawienie ClearType nie jest przestrzegane dla czcionek internetowych” https://code.google.com/p/chromium/issues/detail?id=319429

Czarek Tomczak
źródło
0

Przejdź do chrome://flags/(lub about:flags) i wyłącz opcję Zastąp listę renderowania oprogramowania .

Przyspieszone płótno 2D również powinno być wyłączone.

Ta kombinacja pomogła mi.

Andriej Żytkiewicz
źródło
-1

Przejdź do chrome: // flags / i ustaw „antyaliasing tekstu LCD” na włączony. Uruchom ponownie przeglądarkę.

GregC63
źródło