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


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.


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


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.


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


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.


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.


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.


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!


2

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


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


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".


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.


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.


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.


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


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


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.


-1

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.