Webfont Smoothing dan Antialiasing di Firefox dan Opera

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?

Karena Opera didukung oleh Blink sejak Versi 15.0 -webkit-font-smoothing: antialiasedjuga 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.

-moz-osx-font-smoothing: grayscale;

Ini harus memperbaiki font ikon buram atau teks terang pada latar belakang gelap.

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Anda dapat membaca posting saya tentang rendering font di OSX yang menyertakan mixin Sass untuk menangani kedua properti.

Nah, Firefox tidak mendukung yang seperti itu.

Di halaman referensi dari Mozilla yang ditentukan font-smoothsebagai 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:

• Text-Shadow Anti-Aliasing | Philip Renich, Situs web - blog
• cufón - fonta untuk rakyat

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:

selector {
    text-shadow: 0 0 0;
}

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.

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.

Saya menemukan solusi dengan tautan ini: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Metode langkah demi langkah:

• kirim font Anda ke WebFontGenerator dan dapatkan zip
• temukan font TTF pada file Zip
• kemudian, di linux, lakukan perintah ini (atau instal dengan apt-get install ttfautohint):
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• kemudian, satu lagi, kirim file TTF baru (neosansstd-black.changed.ttf) di WebFontGenerator
• Anda mendapatkan Zip yang sempurna dengan semua font web Anda!

Saya harap ini akan membantu.

... di tag body dan ini dari konten dan jenis huruf terlihat lebih baik secara umum ...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

Saat warna teks gelap, di Safari dan Chrome, saya mendapatkan hasil yang lebih baik dengan properti text-stroke css.

-webkit-text-stroke: 0.5px #000;

Menambahkan

font-weight: normal;

Untuk font @ font-face Anda akan memperbaiki tampilan tebal di Firefox.