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

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:

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:

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

CONTOH POSITIF:

Atas: Firefox 23, bawah: Chrome 29

CONTOH NEGATIF: Chrome 30

CONTOH NEGATIF: Chrome 29

Larutan

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

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.

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');
  }
}

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

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 .

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.

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

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

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:

Untuk ini:

(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 -webkit-backface-visibility: hidden;

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.