Firefox ve Opera'da Web Yazı Tipi Düzeltme ve Kenar Yumuşatma

Sitemde kullanılan özel yapım web yazı tipleri var. Render çıktımı biçimlendirmek için aşağıdaki kodu kullandım:

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

Bu, Safari ve Chrome'da iyi çalışır (kenarlar daha keskin ve çizgiler daha incedir). Firefox ve Opera'da aynı stili uygulamanın herhangi bir yolu var mı?

Opera, 15.0 Versiyonu -webkit-font-smoothing: antialiasedOpera üzerinde de çalıştığından beri Blink tarafından desteklenmektedir .

Firefox sonunda gri tonlamalı kenar yumuşatmayı etkinleştirmek için bir özellik ekledi. Uzun bir tartışmadan sonra , bu özelliğin yalnızca OS X'te çalıştığını belirten başka bir sözdizimiyle Sürüm 25'te mevcut olacak.

-moz-osx-font-smoothing: grayscale;

Bu, koyu arka planlardaki bulanık simge yazı tiplerini veya açık metni düzeltmelidir.

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

Her iki özelliği de işlemek için bir Sass karışımı içeren OSX'te yazı tipi oluşturma hakkındaki yazımı okuyabilirsiniz .

Firefox böyle bir şeyi desteklemiyor.

Mozilla'nın referans sayfasında font-smoothCSS özelliği, fontlar oluşturulduğunda kenar yumuşatma uygulamasını kontrol ettiği için belirtir , ancak bu özellik bu belirtimden kaldırılmıştır ve şu anda standart yolda değildir.

Bu özellik yalnızca Webkit tarayıcılarında desteklenir.

Bir alternatif istiyorsanız, bunu kontrol edebilirsiniz:

• Metin Gölge Örtüşme Önleme | Philip Renich, Web siteleri - blog
• cufón - insanlar için yazı tipleri

Vaka: Koyu arka planda pürüzlü web yazı tipine sahip açık metin Firefox (v35) / Windows
Örnek: Google Web Yazı Tipi Ruda

Şaşırtıcı çözüm -
uygulanan seçicilere aşağıdaki özelliği ekleme:

selector {
    text-shadow: 0 0 0;
}

Aslında sonuç ile aynı text-shadow: 0 0;, ancak ben açık bir şekilde bulanıklık yarıçapı ayarlamayı seviyorum.

Bu evrensel bir çözüm değildir, ancak bazı durumlarda yardımcı olabilir. Üstelik şimdiye kadar bu çözümün olumsuz performans etkilerini yaşamadım (ayrıca tam olarak test etmedim).

Sorunla karşılaştıktan sonra, WOFF dosyamın düzgün şekilde yapılmadığını öğrendim, yeni bir TTF'yi FontSquirrel'e gönderdim ve bu da bana fazladan CSS eklemeden Firefox'ta düzgün bir WOFF verdi.

Çözümü şu bağlantıyla buldum: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Adım adım yöntem:

• yazı tipinizi bir WebFontGenerator'a gönderin ve zip dosyasını alın
• Zip dosyasında TTF yazı tipini bulun
• sonra, linux üzerinde bu komutu yapın (veya kurarak apt-get install ttfautohint):
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• sonra, bir tane daha, WebFontGenerator'da yeni TTF dosyasını (neosansstd-black.changed.ttf) gönderin
• tüm web yazı tiplerinizle mükemmel bir Zip elde edersiniz!

Umarım bu yardımcı olacak.

... gövde etiketinde ve bunlar içerikten ve yazı tipinden genel olarak daha iyi görünüyor ...

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;

}

Safari ve Chrome'da metin rengi koyu olduğunda text-strok css özelliği ile daha iyi sonuç aldım.

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

Ekleme

font-weight: normal;

@ Font-face yazı tiplerinize Firefox'taki kalın görünümü düzeltir.