Webfont Smoothing dan Antialiasing di Firefox dan Opera


112

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?


5
Sebaiknya berhenti melakukan itu dan baca alasannya di sini: usabilitypost.com/2012/11/05/stop-fixing-font-smoothing
fregante

20
^ ini adalah generalisasi yang luas dan tidak masalah menggunakan penghalusan font. Masalah rendering itulah masalahnya, bukan perilaku desainer. Ketika Anda mendesain tata letak dan font tampak semi-tebal karena mesin rendering maka mesinlah yang perlu diperbaiki, bukan tata letak.
Dylan

1
Ini tidak sepenuhnya generalisasi yang luas. Artikel tersebut mengatakan bahwa rendering subpiksel terutama ditujukan untuk membuat teks terang pada latar belakang gelap lebih mudah dibaca (yaitu dapat diakses), dan membuat definisi CSS yang luas sepertinya body { -webkit-font-smoothing: antialiased; }terlalu rumit.
Matt Scheurich

3
Font web saya yang gelap dengan latar belakang terang juga akan "dicetak tebal". Saya mengatakan "antialiased" di sekitar.
Jason T Featheringham

5
Bagaimana sebuah halaman ditampilkan terserah desainer, termasuk semua atribut tipografi. Merupakan tanggung jawab mereka untuk memastikan kegunaan, konsistensi, dan daya tarik di berbagai platform. Akses ke atribut perataan font melalui CSS memungkinkan kontrol yang lebih besar. Seperti apa pun, itu bisa disalahgunakan di tangan yang salah. Tetapi menggembar-gemborkan filosofi pribadi daripada menjawab pertanyaan tidak membantu.
Beejor

Jawaban:


193

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.


6
Mengapa hanya OSX ??
Yassir Ennazk

7
Windows dan Linux menggunakan algoritme rendering yang berbeda untuk font dari OSX.
Maximilian Hoffmann

15

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:


2
Masalah yang saya hadapi adalah font saya terlihat "tebal" dan membengkak di firefox dan opera. Dengan -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 putih text-shadowke dalamnya hanya dalam moz tetapi tidak ada cara untuk menerapkan bayangan teks "inset" yang akan membuat font lebih terang.
matt

1
@matt Anda dapat mencoba beberapa nasihat CSS dalam pertanyaan ini: stackoverflow.com/questions/761778/… Mungkin Anda menemukan beberapa alternatif CSS.
Jonathan Naguin

11

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.


Tidak melakukan apa pun dalam membantu
vsync

ini akan menyebabkan font lebih tebal pada chrome berdasarkan font
Ben Sewards

1
@BenSewards Apakah Anda akan memberikan fonta di mana Anda mengalami rendering font yang lebih berani? Atau mungkin bahkan CodePen? Terima kasih sebelumnya.
Volker E.

1
@Volker. terima kasih untuk solusi yang bagus Saya memiliki masalah menjengkelkan yang sama dengan Source Code Pro Font di Sticky Header. Ketika saya menggulir font menjadi sangat kecil dan dengan bayangan teks Anda font tidak membuat masalah.
Evolutio

Pada chrome (58.0.3029.110) saat ini, teks "halus" sebenarnya terlihat sangat mengerikan. (teks "jaggy" agak lebih baik)
RecursiveExceptionException

7

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.


apakah itu di windows?
Vignesh

5

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.


Melakukan pekerjaan yang baik dalam memperbaiki font jagging selama transisi css (meskipun tidak menghapusnya sepenuhnya). Saya menggunakan generator FontSquirrel dengan opsi TTFAutohint
Andrey

Saya menggunakan Fontie untuk menghasilkan kembali file WOFF, WOFF2, EOT dan SVG saya dengan mengaktifkan autohint untuk Windows.
Dominique

4

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

}

2
Maaf ... apa itu "reinschreiben"? Sebagian besar dari kita tidak bisa berbahasa Jerman, jadi alangkah baiknya jika Anda membuat seluruh postingan dalam bahasa Inggris.
rayryeng

3
Oh tolong, saya minta maaf telah menerjemahkan dengan Google dan entah bagaimana kata yang salah sejak tergelincir :)
pengguna3634787

3

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;

Pertanyaannya adalah tentang Firefox dan Opera. jadi jawaban ini tidak ada hubungannya dengan pertanyaan
vsync

-4

Menambahkan

font-weight: normal;

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


7
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.
Mike Meyer

@MikeMeyer Sebenarnya saya setuju dengan komentar Aaron. Menambahkan font-weight: normal ke font termasuk yang merupakan font "ringan" tampaknya akan menambah kebingungan, tetapi itu hanya akan membingungkan pengembang pemula. Sebenarnya praktik yang baik untuk menentukan default dari normal dalam pengalaman saya. Normal dalam hal ini mengacu pada "normal" untuk font yang disertakan dan karakter yang digunakan, dan tidak dimaksudkan untuk menentukan informasi tentang bentuk font itu sendiri. Dalam banyak kasus, ini akan (terutama pada platform besar) mengurangi kemungkinan bug yang berasal dari arsitektur buruk yang terlalu khas yang Anda lihat di sekitar gaya font.
dudewad

Faktanya, nama font face itu sendiri harus menunjukkan berat font secara default ...!
dudewad

@dudewad itu bagus bahwa Anda setuju, dan ya, itu adalah "pro-tip" yang layak (meskipun agak singkat) font-weight. Masalahnya, OP tidak menanyakan tentang font-weight— dia bertanya tentang antialiasing . Ini adalah jawaban yang benar untuk pertanyaan yang sama sekali berbeda.
Mike Meyer

@Mikeer Anda benar-benar benar. Terkadang saya sedikit terbawa suasana. ;)
dudewad
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.