Bagaimana cara meningkatkan tampilan font di google chrome?

72

Di sebelah kiri adalah firefox 4, di sebelah kanan adalah chrome 12.

Di sebelah kiri adalah firefox 4, di sebelah kanan adalah chrome 12. Apakah ada cara untuk membuat font chrome membuat lebih cantik?

Gambar di atas diambil pada windows xp. Di bawah ini adalah contoh lain dari windows 7.

masukkan deskripsi gambar di sini

hughes
sumber
Linux atau Windows?
Nicu Zecheru
Windows. Tangkapan layar di atas diambil di windows xp. Ini terlihat sedikit lebih baik di mesin windows 7 saya, tetapi beberapa situs pasti masih menderita. Berikut contoh lain: i.imgur.com/zbuUr.png
hughes
1
Apakah ini font OS default atau font yang tertanam? (Seperti via TypeKit.com)?
merah
1
Anda tahu, itu pertanyaan yang bagus. Ini paling terlihat pada font yang disematkan. Font default web-safe terlihat bagus. Semua yang ada di TypeKit.com terlihat bergerigi dan mengerikan.
Hughes
Sayangnya rendering TypeKit sangat berbeda pada kombinasi sistem operasi browser \ operasi yang berbeda. :(
red

Jawaban:

35

Periksa pengaturan ClearType - tangkapan layar Chrome sepertinya dipaksa untuk membuat non-anti-alias. Itu akan mematikan hampir semua font web, karena mereka tidak memiliki petunjuk monokrom (untuk alasan ukuran antara lain). Saya biasa melihat ini dilaporkan sebagai "IE membuat teks lebih baik", karena mengabaikan pengaturan ClearType tingkat OS Anda dan menyalakannya secara default.

Simetri
sumber
Wow, ini masalahnya. Saya kira Firefox juga mengabaikan pengaturan cleartype. Terima kasih! Nikmati hadiahmu!
hughes
6
" Ini mengabaikan pengaturan ClearType tingkat OS Anda dan " dan apa?
Der Hochstapler
Pemutaran akselerasi GPU juga berhasil bagi saya. Lihat lonesysadmin.net/2011/09/12/12 ...
Jimmy Bogard
5
Ke mana orang akan pergi untuk memeriksa pengaturan ClearType?
chharvey
1
Jawaban ini menjelaskan cara melakukannya di XP - tidak ada "ClearType" di Start atau di Control Panel. superuser.com/a/441694/46972
ashes999
23

Semua jawaban itu salah! Ini adalah bug besar di Google Chrome, silakan lihat laporan / utas bug resmi termasuk banyak tangkapan layar di sini: Laporan bug resmi tentang Kode Chrome

Saat ini solusi terbaik adalah dengan memberikan elemen / informasi utama Anda aturan sederhana ini:

-webkit-text-stroke: 1px

Tambahan dari Dr John: Saya menemukan saran yang html { -webkit-text-stroke: 0.25px}akan berfungsi juga - menemukannya di sini https://groups.google.com/forum/?fromgroups#!topic/mathjax-users/dV_TmJ1QMO4

Sliq
sumber
Ini meningkatkan lebih lanjut. Bagaimana cara mengaktifkan CSS ini untuk semua situs secara default?
ShuaiYuan
@shuaiyuancn Maaf, apa? Mengapa yang Anda maksud dengan "semua situs"? Ini tidak masuk akal.
Sliq
1
Masuk akal. Cobalah untuk berpikir sebagai pengguna akhir, bukan pengembang web, seperti yang ditunjukkan PO asli. Saya mematikan penulisan langsung di chrome: // flags dan menambahkan aturan global -webkit-text-strokepada addon Bergaya. Sekarang Chrome memberi saya sedikit lebih banyak kesenangan.
ShuaiYuan
Saya bingung sekarang, saya pikir selama bertahun-tahun bahwa superuser adalah singkatan dari linux sudo dan merupakan portal untuk pengguna linux tingkat lanjut, bukan untuk pengguna internet biasa. Hmmm ... aneh.
Sliq
1
Anda salah selama bertahun-tahun. Periksa tagline: Pengguna Super Untuk penggemar komputer dan pengguna listrik. Saya tidak berpikir pengguna umum akan menyetel font seperti ini juga.
ShuaiYuan
16

Chrome sedang membaca pengaturan ClearType Anda yang pada Windows XP dimatikan secara default.

  1. Untuk memperbaiki masalah ini, pertama tutup browser Chrome.

  2. Sekarang klik kanan di mana saja di desktop dan pilih 'Properties' dari menu drop-down.

  3. Klik pada tab 'Penampilan' yang ditemukan di bagian atas pada jendela baru.

  4. Dan klik tombol 'Efek'.

  5. Opsi kedua di bawah harus membaca, "Gunakan metode berikut untuk memperhalus tepi font layar."

  6. Pilih opsi "ClearType".

  7. Klik Terapkan & Buka kembali browser Chrome Anda.

Mulai sekarang, Chrome akan membuat font Anda menjadi anti alias dengan efek halus.

Simon Beal
sumber
2
Ini bekerja untuk saya, opsi yang sedikit berbeda pada Windows 7
Gearoid Murphy
2
Ini bekerja tanpa me-restart chrome.
Quazi Irfan
Tidak berfungsi untuk saya di XP sampai saya memulai ulang Chrome.
ashes999
1
Windows 8: Panel Kontrol> Tampilan> Sesuaikan teks ClearType> lanjutkan dengan wisaya Next Next. Mulai ulang browser - itu membantu.
benteng
Saya juga harus me-restart komputer saya untuk memungkinkan perubahan ClearType saya berlaku di Windows 10. Solusi hebat BTW!
Simple Sandman
12

Tempatkan file SVG lebih tinggi dalam aturan font-face css, misalnya 1 atau kedua misalnya:

@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;
}

Dari pada:

@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;
}

Contoh perbaikan ini dapat dilihat di sini:

Contoh
FontSpring Contoh Adtrak

menggali
sumber
Terima kasih banyak!! Pada proyek masa lalu saya perhatikan bahwa OTF terlihat sangat bagus juga, saya mencobanya di proyek lain dan itu tampak mengerikan! SVG terlihat sangat bagus =)
zzz
6

Apakah Anda memiliki Akselerasi GPU yang diaktifkan di Google Chrome? Ketik about:flagsdan cari GPU Accelerated Canvas 2D, Nonaktifkan jika diaktifkan. Font pada beberapa situs tampak sangat bergerigi ketika saya melihat-lihat dengan akselerasi yang diaktifkan.

merah
sumber
Saya dulu sudah mengaktifkannya sendiri, tetapi setelah versi 10 rendering font terpukul. Saya berharap Google akan mengatasi masalah ini di beberapa titik.
red
Itu dinonaktifkan. Saya mencoba untuk sementara mengaktifkannya hanya untuk melihat apa yang akan terjadi, dan tidak melihat perbedaan.
hughes
Baik. Jika Anda berhasil menemukan apa yang salah, ingatlah untuk memperbarui di sini.
red
Dalam kasus saya, menonaktifkan akselerasi GPU memperbaiki alias.
kcbanner
Bekerja untukku! Windows 7, Chrome 52
Vincent
2

Dalam Google Chrome klik pada Kunci Inggris> Opsi> Di Balik Terpal> [di sebelah Konten Web] klik Kustomisasi Font.

Ubah pengaturan Anda sehingga halaman Anda terlihat seperti milik sayaLayar opsi saya

Kemudian klik x, dan lihat apakah masalah Anda telah diperbaiki.

Jika ini tidak memperbaikinya, mungkin ada satu hal lagi ... tapi saya akan menunggu sampai Anda mencoba ini.

wizlog
sumber
Sudah identik: i.imgur.com/zhTBS.png meskipun Anda akan melihat bahwa bahkan membandingkan tangkapan layar kami, font default sangat bergerigi pada mesin saya.
Hughes
OKE ... siapa yang membuat kartu video Anda?
wizlog
Juga ... buka google.com/webfonts apakah semuanya berantakan? Saya tahu Anda mengunjungi typekit.com ... tetapi ini mungkin berbeda. Cobalah untuk melihat melalui berbagai filter dan melihat apakah masalah Anda berlaku untuk semuanya (mis. Apakah hanya serif atau ...)
wizlog
3
Ini mengubah tipografi ("font"). Ini tidak ada hubungannya dengan rendering font .
Andres Riofrio
2

Chrome tidak membuat font web dengan baik saat ini. Ada beberapa bug pada pelacak masalah mereka untuk ini. Harap beri peringkat yang relevan dengan Anda, mereka untuk memberi mereka lebih banyak perhatian.

Sam Hasler
sumber
2

Saya memiliki masalah yang sama persis, merender webfonts dari http://www.google.com/webfonts di Chrome. Saya mencoba semua saran tentang ini dan beberapa situs lain dan tidak ada yang berhasil.

Akhirnya saya mulai memeriksa properti CSS dari teks yang terpengaruh, ternyata warna font aktual yang menyebabkan masalah. Judul yang diberikan color:#454545akan membuat buruk, namun judul yang sama diberikan sebagai berikut: color:#333berfungsi dengan baik. Terima kasih Tuhan untuk style sheet khusus agen pengguna!

ukdesignservices
sumber
2

Di Windows XP, saya baru saja mengubah opsi anti-alias dari "Default" ke "Clear Type" di
Display → Properties → Appearance → VisualEffects.

Berau
sumber
2

Chrome mengambil nilai clearType sistem untuk font. Terlihat lebih baik di Windows 7 menjelaskan hal itu. Pada Mac, Anti-aliasing diaktifkan untuk semua font di atas ukuran 8, saya kira. Cobalah menyalakan atau mengubah ClearType dari mesin Windows Anda

Pembaruan : Sepertinya Chrome 22 ke atas mengabaikan Pengaturan Sistem untukclearType

Om Shankar
sumber
1

Saya memiliki masalah ini sangat parah pada Windows XP SP3 sehingga Chrome tidak dapat digunakan untuk semua maksud dan tujuan. Saya perhatikan bahwa saya telah menginstal Clear Type Tuning di Control Panel dan mencoba menghapus centang "Aktifkan Font Smoothing" di tab lanjutan. Setelah memulai ulang Chrome. itu ok, bahkan setelah mengaktifkan Font Smoothing lagi. Saya memutuskan untuk mencentang kotak "Terapkan semua pengaturan ke default untuk pengguna dan sistem baru".

pengguna318333
sumber
1

Bagi saya itu bukan pengaturan ClearType di Windows 10.1 x64, tetapi ternyata itu adalah pengaturan di browser Chrome saya yang disebut DirectWrite.

  1. Di bilah alamat Anda di jenis Chrome: chrome://flags/#directwrite
  2. Dan nyalakan DirectWrite, judul pengaturan ini mengatakan Disable DirectWrite dan pastikan tombol di bawahnya menunjukkan kata: Enable

Itu memperbaiki masalah bagi saya.

Alexscended
sumber
0

Sepertinya jawaban yang panjang dan sulit adalah Anda tidak bisa. Ada banyak diskusi dan saran dalam bantuan Chrome , tetapi saya tidak melihat ada yang layak disarankan.

Pertanyaan besarnya adalah bagaimana Anda membuatnya tampak begitu buruk ?! Saya menggunakan Chrome untuk mengetik di kotak ini ... Saya bahkan memperbesar keseluruhan dan saya tidak melihat apa pun seperti Anda. Jika Anda masih memiliki pertanyaan setelah ini, Anda harus menjelaskan konfigurasi Anda kepada komunitas.

mbb
sumber
0

Meskipun Chrome "bisa digunakan" untuk font-font itu, tampilannya tipis dan tersapu di mana ia membuat garis diagonal khususnya. IE membuat jauh lebih baik tetapi IE adalah browser yang lebih lambat sehingga FireFox.

Saya percaya ini melekat pada kode untuk chrome.

BTW, HackToHell, di mana saya pergi untuk mengubah warna rendering?

Saya akan coba ini.

DBDooDoo
sumber
0

tekan tombol windows + r lalu ketik cttune.exe di sana

metode alternatif adalah dengan menekan tombol windows kemudian ketik cleartype lalu pilih Adjust ClearType Text

dan ikuti instruksi, jika Anda masih memiliki masalah coba beberapa contoh lainnya

ini bekerja untuk saya, Anda harus mencoba contoh yang berbeda, sangat mirip dengan kontras / kecerahan tetapi untuk teks

FYI: menonaktifkan akselerasi 2d mungkin membantu chrome untuk bermain dengan alat tune-kunci windows cleartype

nwgat
sumber
0

Jika Anda ingin font web dapat dibaca sementara font smoothing / cleartype dinonaktifkan, maka solusinya adalah dengan menonaktifkan font web di Google Chrome. Dalam kasus seperti itu browser akan menggunakan font standar OS yang di-render dengan benar ketika cleartype / smoothing dinonaktifkan. Untuk melakukannya, berikan /disable-remote-fontsflag ke chrome.exe. Klik kanan pada pintasan Google Chrome di Desktop, pilih Properties, buka tab Shortcut dan atur Target ke:

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

Mungkin ada satu masalah dengan font web dinonaktifkan. Jika situs web menggunakan ikon dari font web, maka mereka tidak akan ditampilkan.

Masalah terkait di Chromium tracker:

"Pengaturan ClearType di Seluruh Sistem tidak dihormati untuk font web" https://code.google.com/p/chromium/issues/detail?id=319429

Czarek Tomczak
sumber
0

Pergi ke chrome://flags/(atau about:flags) dan Nonaktifkan opsi Abaikan daftar perenderan perangkat lunak .

Kanvas 2D yang dipercepat juga harus dinonaktifkan.

Kombinasi itu membantu saya.

Andrei Zhytkevich
sumber
-1

Buka chrome: // flags / dan atur "antialiasing teks LCD" untuk diaktifkan. Mulai ulang browser.

GregC63
sumber