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.
h4
Tampilan 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:
sumber
Jawaban:
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 Googlewebfont.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:
Baris ketiga memiliki:
Jadi, cara untuk memperbaiki font tersebut adalah dengan memberikannya
atau sintaks RGBa (oleh nezroy, ditemukan di komentar! Terima kasih!)
Ada juga kemungkinan yang sudah usang : Berikan bayangan sederhana (palsu):
Solusi RGBa (ditemukan di blog Jasper Espejo):
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.
sumber
-webkit-font-smoothing
properti. Lihat jawaban saya di bawah ini.text-shadow: #333 0px 0px 1px;
. Terima kasih banyak atas tipnya.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:
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
sumber
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-smoothing
properti padah4
tag Anda seperti ini.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 .sumber
body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }
Ok kamu bisa menggunakan ini secara sederhana
Pastikan warna teks Anda dan lebar teks-stroke-lebar saya harus sama dan hanya itu.
sumber
Saya akan mengatakan sebelumnya bahwa ini tidak akan selalu berhasil , saya telah menguji ini dengan
sans-serif
font dan font eksternal sepertiopen sans
Terkadang, saat Anda menggunakan font berukuran besar, coba perkiraan ke
font-size:49px
atas dan ke atasIni 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 terjadiTeks 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 warisanTapi 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-transform
properti, 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.
sumber