Apakah ada "perataan font" di Google Chrome?

141

Saya menggunakan google webfonts dan mereka baik-baik saja pada ukuran font yang super besar, tetapi pada 18px, mereka terlihat mengerikan. Saya sudah membaca di sana-sini bahwa ada solusi untuk pemulusan font, tetapi saya belum menemukan di mana yang menjelaskannya dengan jelas dan beberapa cuplikan yang saya temukan tidak berfungsi sama sekali.

h4Tampilan saya buruk di hampir semua browser, tetapi Chrome adalah yang terburuk. Di Chrome, hampir semua font saya terlihat mengerikan.

Adakah yang bisa mengarahkan saya ke arah yang benar? Mungkin Anda tahu sumber daya yang menjelaskan hal ini dengan jelas? Terima kasih!

CONTOH SCREENSHOT # 1

Tangkapan layar ini menunjukkan laman beranda https://www.dartlang.org/ , bahasa pemrograman yang dibuat oleh Google (sehingga kami dapat menyiratkan bahwa situs web ini juga dibuat oleh Google) dan menggunakan Google Webfonts.

Cuplikan layar memperlihatkan Google Chrome di sebelah kiri, Firefox / Internet Explorer di sebelah kanan .:

google chrome di sebelah kiri, firefox / internet explorer di sebelah kanan

CONTOH SCREENSHOT # 2

Tangkapan layar ini menunjukkan halaman info produk di Adobe.com, menggunakan webfonts yang disediakan oleh Typekit. Adobe & Typekit adalah profesional dalam hal font.

Cuplikan layar memperlihatkan Google Chrome di sebelah kanan, Firefox / Internet Explorer di sebelah kiri:

google chrome di sebelah kiri, firefox / internet explorer di sebelah kanan

imakeitpretty
sumber
mereka terlihat bagus di chrome dan firefox ... bisakah Anda menambahkan printscreen?
JFK
Juga di iPhone / iOS mereka terlihat sangat bagus.
masukkan nama pengguna di sini,
Apakah Anda menggunakan Windows? Jika demikian, mesin smoothing ClearType OS mungkin menjadi penyebabnya. Saya sudah mencoba halaman itu di Mac OS, Ubuntu, Fedora, dan Chrome OS selain Windows; yang terakhir menjadi satu-satunya yang tidak menghasilkan dengan benar, karena apa yang saya duga adalah mesin ClearType.
Jules
ya itu windows. Apakah Anda tahu apa yang bisa saya lakukan?
imakeitpretty
baru saja menemukan fitur yang bermanfaat ini: chrome: // flags / # lcd-text-aa - aktifkan dan ini menghaluskan teks untuk Anda
cin

Jawaban:

162

Status masalah, Juni 2014: Diperbaiki dengan Chrome 37

Terakhir, tim Chrome akan merilis perbaikan untuk masalah ini dengan Chrome 37 yang akan dirilis ke publik pada Juli 2014. Lihat contoh perbandingan Chrome 35 stabil saat ini dan Chrome 37 terbaru (pratinjau pengembangan awal) di sini:

masukkan deskripsi gambar di sini

Status masalah, Desember 2013

1.) Ada TIDAK ada solusi yang tepat saat memuat font melalui @import, <link href=atau Google webfont.js. Masalahnya adalah Chrome hanya meminta file .woff dari API Google yang menyebabkannya mengerikan. Anehnya semua jenis file font lain membuat indah. Namun, ada beberapa trik CSS yang akan "menghaluskan" font yang diberikan sedikit, Anda akan menemukan solusinya lebih dalam dalam jawaban ini.

2.) ADA solusi nyata untuk ini ketika hosting font sendiri, pertama kali diposting oleh Jaime Fernandez dalam jawaban lain pada halaman Stackoverflow ini, yang memperbaiki masalah ini dengan memuat font web dalam urutan khusus. Saya merasa tidak enak hanya menyalin jawaban yang sangat bagus, jadi silakan lihat di sana. Ada juga solusi (belum terbukti) yang merekomendasikan penggunaan font TTF / OTF saja karena sekarang didukung oleh hampir semua browser.

3.) Tim pengembang Google Chrome bekerja pada masalah itu. Karena ada beberapa perubahan besar dalam mesin render, jelas ada sesuatu yang sedang berlangsung.

Saya telah menulis posting blog besar tentang masalah itu, silakan lihat: Cara memperbaiki rendering font jelek di Google Chrome

Contoh yang bisa direproduksi

Lihat bagaimana contoh dari pertanyaan awal terlihat hari ini, di Chrome 29:

CONTOH POSITIF:

Kiri: Firefox 23, kanan: Chrome 29

masukkan deskripsi gambar di sini

CONTOH POSITIF:

Atas: Firefox 23, bawah: Chrome 29

masukkan deskripsi gambar di sini

CONTOH NEGATIF: Chrome 30

masukkan deskripsi gambar di sini

CONTOH NEGATIF: Chrome 29

masukkan deskripsi gambar di sini

Larutan

Memperbaiki tangkapan layar di atas dengan -webkit-text-stroke:

masukkan deskripsi gambar di sini

Baris pertama adalah default, baris kedua memiliki:

-webkit-text-stroke: 0.3px;

Baris ketiga memiliki:

-webkit-text-stroke: 0.6px;

Jadi, cara untuk memperbaiki font tersebut adalah dengan memberikannya

-webkit-text-stroke: 0.Xpx;

atau sintaks RGBa (oleh nezroy, ditemukan di komentar! Terima kasih!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

Ada juga kemungkinan yang sudah usang : Berikan bayangan sederhana (palsu):

text-shadow: #fff 0px 1px 1px;

Solusi RGBa (ditemukan di blog Jasper Espejo):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

Saya membuat posting blog tentang ini:

Jika Anda ingin diperbarui tentang masalah ini, lihat di posting blog yang sesuai: Cara memperbaiki rendering font jelek di Google Chrome . Saya akan memposting berita jika ada berita tentang ini.

Jawaban asli saya:

Ini adalah bug besar di Google Chrome dan Tim Google Chrome tahu tentang ini, lihat laporan bug resmi di sini . Saat ini, pada Mei 2013, bahkan 11 bulan setelah bug dilaporkan, itu tidak diselesaikan. Adalah hal yang aneh bahwa satu-satunya peramban yang mengacaukan Google Webfonts adalah peramban Google sendiri Chrome (!). Tetapi ada solusi sederhana yang akan memperbaiki masalah, silakan lihat di bawah ini untuk solusinya.

PERNYATAAN DARI TIM PENGEMBANGAN GOOGLE CHROME, MEI 2013

Pernyataan resmi dalam laporan bug berkomentar:

Render font Windows kami sedang aktif dikerjakan. ... Kami berharap memiliki sesuatu dalam satu atau dua tonggak sejarah yang dapat mulai dimainkan oleh pengembang. Seberapa cepat ia pergi ke stabil, seperti biasa, semua tentang seberapa cepat kita dapat membasmi dan membakar semua regresi.

Sliq
sumber
1
Masalahnya bukan di semua browser yang berjalan di Windows, itu hanya dalam kasus Chrome. Firefox, Opera dan IE memiliki anti-aliasing font yang tepat. Meskipun, itu bisa diperbaiki di chrome dengan menggunakan -webkit-font-smoothingproperti. Lihat jawaban saya di bawah ini.
Kushagra
1
Untuk teks hitam, saya menggunakan text-shadow: #333 0px 0px 1px;. Terima kasih banyak atas tipnya.
Yoone
6
Mungkin itu hilang dalam terjemahan tetapi -webkit-text-stroke hanya berfungsi ketika Anda menggunakan alfa warna font. Jadi untuk font hitam saya menggunakan sesuatu seperti "-webkit-text-stroke: 1px rgba (0,0,0,0.1)".
nezroy
Saya perhatikan bahwa Chrome 30 di Mac sekarang menunjukkan kurangnya antialiasing yang sama.
jwadsack
1
Dalam tiket resmi di papan krom untuk kode masalah ini.google.com/p/chromium/issues/detail?id=137692 tampaknya ditujukan sebagai perbaikan untuk v37, jika saya telah membatalkan dengan benar posting terakhir di utas .
Gruber
46

Saya memiliki masalah yang sama, dan saya menemukan solusinya di pos Sam Goddard ini ,

Solusi jika mendefinisikan panggilan ke font dua kali . Pertama seperti yang disarankan, untuk digunakan untuk semua browser, dan setelah panggilan tertentu hanya untuk Chrome dengan permintaan media khusus:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

masukkan deskripsi gambar di sini

Dengan metode ini, font akan ditampilkan dengan baik di semua browser. Satu-satunya poin negatif yang saya temukan adalah file font juga diunduh dua kali.

Anda dapat menemukan versi bahasa Spanyol dari artikel ini di halaman saya

Jaime Fernandez
sumber
6
Ini sebenarnya jawaban yang benar, namun dapat disederhanakan. Cukup dengan mendaftarkan versi SVG, PERTAMA dalam daftar font juga memecahkan masalah!
jduncanator
2
Jawaban ini memberikan - sejauh ini - hasil terbaik. Font SVG terlihat x100 lebih baik daripada hack -webkit-text-stroke. Kelemahan utama adalah ukuran font dari versi SVG; itu biasanya jauh lebih besar :-( Google benar-benar perlu mendapatkan ini diurutkan secepatnya
Timidfriendly
Saya sangat setuju ! Saya akan menautkan ke jawaban ini dari dalam jawaban saya.
Sliq
@ jduncanator Mendaftarkan SVG terlebih dahulu tidak disarankan - ini artinya font SVG akan dimuat oleh setiap peramban tunggal yang mendukungnya, sementara Anda hanya memerlukannya untuk Chrome di Windows.
RoelN
@ jduncanator Dua penyebab utama adalah tidak ada dukungan petunjuk dan filesize besar (kompresi gzip untuk font tidak diaktifkan secara default di banyak server).
RoelN
22

Chrome tidak membuat font seperti Firefox atau browser lain. Ini umumnya masalah di Chrome yang hanya berjalan di Windows. Jika Anda ingin memperhalus font, gunakan -webkit-font-smoothingproperti pada h4tag Anda seperti ini.

h4 {
    -webkit-font-smoothing: antialiased;
}

Anda juga dapat menggunakan subpixel-antialiased, ini akan memberi Anda berbagai jenis smoothing (membuat teks sedikit buram / teduh). Namun, Anda memerlukan versi malam untuk melihat efeknya. Anda dapat mempelajari lebih lanjut tentang perataan font di sini .

Kushagra
sumber
11
Saya memiliki versi terbaru Chrome hari ini 8-feb-2013 dan halaman ini di sini tidak menunjukkan perbedaan di antara mereka maxvoltar.com/sandbox/fontsmoothing
thednp
4
Ini tidak berfungsi (diuji pada windows). Karena mac melakukan ini, saya turunkan tanda untuk mencegah orang menggunakannya.
KryptoniteDove
4
Ini tidak bekerja. Saya baru saja mencobanya di Windows 8. Dengan apa pun versi Chrome terbaru (pada 10/8/2013).
jay_t55
3
Di Mac Chrome dan Safari ini TIDAK berfungsi sehingga perlu ditambahkan. Apple.com bahkan menggunakannya di stylesheet base.css mereka:body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }
Justin
1
padanan firefox adalah -moz-osx-font-smoothing: grayscale;
Jeff Walters
14

Ok kamu bisa menggunakan ini secara sederhana

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Pastikan warna teks Anda dan lebar teks-stroke-lebar saya harus sama dan hanya itu.

Rishabh Gupta
sumber
perataan font tidak lagi berfungsi apa-apa selain stroke teks berfungsi dan dapat membantu pada beberapa font. Saya sepertinya mendapatkan hasil terbaik dengan stroke 0,5px dan rgba (0,0,0,0,5).
Moss
padanan firefox adalah -moz-osx-font-smoothing: grayscale;
Jeff Walters
ini bagus ... ganti saja # 34343b dengan inherit ..;)
Sagive SEO
9

Saya akan mengatakan sebelumnya bahwa ini tidak akan selalu berhasil , saya telah menguji ini dengan sans-seriffont dan font eksternal sepertiopen sans

Terkadang, saat Anda menggunakan font berukuran besar, coba perkiraan ke font-size:49pxatas dan ke atas

ukuran font: 48px

Ini adalah teks header dengan ukuran 48px ( font-size:48px;dalam elemen yang berisi teks).

Tetapi, jika Anda menaikkan 48px ke font-size:49px;(dan 50px, 60px, 80px, dll ...), sesuatu yang menarik terjadi

ukuran font: 49px

Teks secara otomatis menjadi halus, dan sepertinya sangat bagus

Untuk sisi lain ...

Jika Anda mencari font kecil, Anda dapat mencoba ini, tetapi tidak terlalu efektif.

Untuk induk teks, cukup terapkan properti css berikutnya: -webkit-backface-visibility: hidden;

Anda dapat mengubah sesuatu seperti ini:

-webkit-backface-visibilitas: terlihat;

Untuk ini:

-webkit-backface-visibility: hidden;

(fontnya adalah Kreon)

Pertimbangkan bahwa ketika Anda tidak menempatkan properti itu, -webkit-backface-visibility: visible;adalah warisan

Tapi hati-hati , praktik itu tidak akan selalu memberikan hasil yang baik, jika Anda perhatikan dengan teliti, Chrome hanya membuat teks terlihat sedikit buram.

Fakta menarik lainnya:

-webkit-backface-visibility: hidden;juga akan berfungsi ketika Anda mengubah teks di Chrome (dengan -webkit-transformproperti, yang mencakup rotasi, skew, dll)

Tanpa

Tanpa -webkit-backface-visibility: hidden;

Dengan

Dengan -webkit-backface-visibility: hidden;

Yah, saya tidak tahu mengapa praktik itu berhasil, tetapi itu berlaku untuk saya. Maaf untuk bahasa Inggris saya yang aneh.

Yavierre
sumber