Saya memiliki font web yang dibuat khusus yang digunakan di situs saya. Untuk mengatur gaya keluaran rendering saya, saya menggunakan kode berikut:
//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;
Ini berfungsi dengan baik di Safari dan Chrome (tepinya lebih tajam dan garis lebih tipis). Apakah ada cara untuk menerapkan gaya yang sama di Firefox dan Opera?
css
fonts
webfonts
antialiasing
Matt
sumber
sumber
body { -webkit-font-smoothing: antialiased; }
terlalu rumit.Jawaban:
Karena Opera didukung oleh Blink sejak Versi 15.0
-webkit-font-smoothing: antialiased
juga berfungsi di Opera.Firefox akhirnya menambahkan properti untuk mengaktifkan antialiasing grayscaled. Setelah diskusi panjang, ini akan tersedia di Versi 25 dengan sintaks lain, yang menunjukkan bahwa properti ini hanya berfungsi di OS X.
Ini harus memperbaiki font ikon buram atau teks terang pada latar belakang gelap.
Anda dapat membaca posting saya tentang rendering font di OSX yang menyertakan mixin Sass untuk menangani kedua properti.
sumber
Nah, Firefox tidak mendukung yang seperti itu.
Di halaman referensi dari Mozilla yang ditentukan
font-smooth
sebagai properti CSS mengontrol aplikasi anti-aliasing saat font dirender, tetapi properti ini telah dihapus dari spesifikasi ini dan saat ini tidak berada di jalur standar.Properti ini hanya didukung di browser Webkit.
Jika Anda menginginkan alternatif, Anda dapat memeriksa ini:
sumber
-webkit-font-smoothing:antialiased;
saya bisa memperbaikinya di Safari dan Chrome. Saya ingin menemukan "peretasan" untuk membuat font saya sedikit lebih ringan di Firefox juga. Saya berpikir untuk menerapkan warna putihtext-shadow
ke dalamnya hanya dalam moz tetapi tidak ada cara untuk menerapkan bayangan teks "inset" yang akan membuat font lebih terang.Kasus: Teks terang dengan font web bergerigi pada background gelap Firefox (v35) / Windows
Contoh: Google Web Font Ruda
Solusi yang mengejutkan -
menambahkan properti berikut ke pemilih yang diterapkan:
Sebenarnya, hasilnya sama saja
text-shadow: 0 0;
, tapi saya suka secara eksplisit mengatur blur-radius.Ini bukan solusi universal, tetapi mungkin membantu dalam beberapa kasus. Selain itu, saya belum mengalami (juga belum diuji secara menyeluruh) dampak kinerja negatif dari solusi ini sejauh ini.
sumber
Setelah mengalami masalah, saya menemukan bahwa file WOFF saya tidak dilakukan dengan benar, saya mengirim TTF baru ke FontSquirrel yang memberi saya WOFF yang tepat yang mulus di Firefox tanpa menambahkan CSS tambahan ke dalamnya.
sumber
Saya menemukan solusi dengan tautan ini: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/
Metode langkah demi langkah:
apt-get install ttfautohint
):ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
Saya harap ini akan membantu.
sumber
... di tag body dan ini dari konten dan jenis huruf terlihat lebih baik secara umum ...
sumber
Saat warna teks gelap, di Safari dan Chrome, saya mendapatkan hasil yang lebih baik dengan properti text-stroke css.
sumber
Menambahkan
Untuk font @ font-face Anda akan memperbaiki tampilan tebal di Firefox.
sumber
font-weight
(tidak mengherankan) memengaruhi bobot font, bukan perataan font. Menambahkannya ke deklarasi @ font-face akan menyebabkan kebingungan jika file font yang ditautkan bukan file font dengan bobot normal.font-weight
. Masalahnya, OP tidak menanyakan tentangfont-weight
— dia bertanya tentang antialiasing . Ini adalah jawaban yang benar untuk pertanyaan yang sama sekali berbeda.