Windows'a yüklenen yazı tipi yüzü çok kötü görünüyor. Bu yazı tipini hangi yazı tiplerini daha iyi kullanıyorsunuz?


27

EDIT : Sorun Vista'daki ayarlarımda “Cleartype” özelliğini açmamamdı. Windows işletim sisteminde Cleartype kurulu / etkinse bu sorunun pek bir anlamı olmayabilir.


CSS3'ün font-face özelliği, işletim sistemi / sistem kümesi dışındaki fontları yükleyebilmesi için web'e yeni bir tipografi rüzgarı ulaştı. Mac'im Windows makinem olmasa da mükemmel performans gösteriyor. Windows'ta daha iyi hale getirecek hangi yazı tiplerini kullanmalıyım?

Bu, Yığın Taşması ile ilgili bir soruya benzer.

Ve burada Myriad Pro ile PC'de kötü görünen bir web sitesi örneği: http://css-tricks.com/

NOT: Tarayıcı sürümleri arasındaki antialiasing farkından bahsetmiyorum (IE9 ile IE6 arasındaki gibi).

Testlerinizin cevabını, yazı tiplerinin bir listesini artı iyi göründüğü boyutu (lütfen px kullanın) veya en azından kısa metin veya küçük başlıklar için kullanılabileceklerini bekliyorum.

Örneğin, şu anda "League Gothic, 30px" aşağıdaki gibi görünüyor:

görüntü tanımını buraya girin


Daha fazla ayrıntı sağlayabilir misiniz: Hangi tarayıcılarda iyi görünmüyor? Bazı ekran görüntülerini gösterebilir misiniz? Yazı tipi probleminden ziyade burada renderleme ile ilgili temel bir sorun olabilir
Pekka, 18.02'de GoFundMonica'yı

2
Bu sadece tarayıcı meselesi değil, aynı zamanda İşletim Sistemi'dir. Windows, Mac Os'a göre farklı yazı tipleri oluşturuyor. Şu anda benimle bir mac'um yok (sadece bir Ipod Touch) ve farkı gösteremiyorum, ancak antialiasing için iyi işlenmiş tarayıcıda bile, standart yazı tipi fontları için iyi bir şekilde uygulanmamış yüz-yazı tipi. Merak ediyordum (çünkü sınırlı sayıda yazı tipine sahiptim), bir kişinin kullandığı PC’de fena değil.
Littlemad

@Yi Jiang: Aynen yazı tipi miktarı çok büyük olduğu için, hepsini test etmek ya da hepsine sahip olmak mümkün değil çünkü ne olduğunu soruyorum, herkesin tecrübesinden "güvenli yazı tipi ve boyut" nedir kullanmak. Hiç kimsenin bir şey yayınlamadığını görebiliyorum ve kimsenin herhangi bir şey yayınlayıp yayınlamayacağını (veya PC’de görüntülenen yazı tiplerini analiz etmeye çalıştım mı) bilmiyorum, bu yüzden herhangi bir geri bildirim almadığım için daha fazla üzgünüm.
Littlemad

"terbiyeli tür" tamamen özneldir.
DA01

Yanıtlar:


18

Bu bir yorum olmalıdır (dolayısıyla bu CW'yi yapar), ancak soruda bazı yanlış anlamalar ve yanlış varsayımlar olduğunu düşünüyorum. Belli ki bu sorunun cevaplanmasını istediğinizden (sonuçta bir lütuf teklif ettiniz), işte benim iki kuruş.

Ekran görüntünüzden Windows'unuzu düzenli olarak yazı tipi oluşturmaya ayarladınız (alt piksel oluşturma yerine) ve muhtemelen tarayıcınız herhangi bir antialiasing yapmıyor (olabilir, ancak JPG sıkıştırması ile gitti).

Pencerelerle ilgili aşağıdaki örnekler XP Pro SP 3'ten alınmıştır, bu nedenle durumun en azından Vista & 7'de aynı seviyede olduğunu varsaymak oldukça güvenlidir .

Windows, ClearType kullanmak veya kullanmamak için (XP'de) seçeneklere sahiptir. ClearType olmadan fontlar ekran görüntüsünüzdeki gibi oluşturulur. Bu, CT'siz, Windows iletişim kutusundan CT'siz bir görüntüyü yakınlaştırıyor:

kanıt 1

İkili bir işlem olduğunu görüyorsunuz: piksel siyah veya saydamdır. Şimdi CT'siz bile bazı modern tarayıcılarda, bazı kenar yumuşatma yapıyorlar. Bu, css-tricks.com adresinden Windows XP ve Chrome 8 ile ve CT KAPALI (önceki resimde olduğu gibi):

kanıt 2

Bak ne oldu? Muhtemelen çoktan yaptınız, sorunuzda belirttiğiniz gibi.

NOT: Yeni tarayıcılar ve eskiler arasındaki antialiasing farkından bahsetmiyorum (IE9 ile IE6 arasındaki gibi).

Şimdi, ClearType !

İşte CT ile şu anki Windows iletişim kutusundaki aynı metin: kanıt 3

Bunun neye dayandığını merak ediyorsanız, alt piksel oluşturma konusundaki Wikipedia makalesine bakın . ClearType'ı açmak, tarayıcı oluşturmayı etkiler mi? Windows XP ve Chrome 8 ile aynı "diğer" metin ve ClearType AÇIK: kanıt 4

O yapar! Ve biz buna devam ederken, (en azından) IE 8’in Windows düzeyinde devre dışı bırakılsa bile ClearType oluşturma özelliğini kullandığını ekleyebilirim.


Antialiased ve ClearTyped metinlerin% 100 olarak karşılaştırılması, ClearTyped metni antialiased olmayanlarla karşılaştırmak kadar radikal değildir. Ancak, belirgin şekilde daha cesur:

aa: kanıt 5CT:kanıt 6

Antialiasing olmadan neye benzediğini görmek için , sadece littlemad'ın ekran görüntüsüne bakın .

Karşılaştırma için, burada OS X'in varsayılan görüntülemesinde aynı "diğer": ClearType'tan kanıt 7 bile daha kalın.


Sorunuzu cevaplamak için: herhangi bir yazı tipi . İşletim sisteminiz yazı tipini farklı işlerse, işletim sisteminizi yazı tiplerini oluşturması için ayarladığınız olabilir . VEYA tarayıcınızda antialiasing veya ClearType özelliği bulunmuyor olabilir.

Başka bir soru da neden bazı yazı tiplerinin doğru işlediğini ve bazılarının yapamadığıdır - eğer durum buysa (ancak Windows'ta bahsettiğiniz sitede herhangi bir sorun görmüyorum). Yoksa herhangi bir görüntü oluşturmadan yeterli görünen yazı tiplerini mi istiyorsunuz?


Ve ayrıca sıkça sorulan soruya cevap: “Evet, hepsini biliyorum - ClearType neden OS X'in renderlemesinden farklı görünüyor ?!”

Çünkü onlar farklı. Alt piksel oluşturma, uygulanacak hafif bir şey değildir. ClearType, Microsoft'un tescilli ticari markasıdır ve 10 patentle korunmaktadır (+ 1 beklemede; wikipedia'ya bakınız ). Sadece aynı olamazlar .


Bu bir CW, bu yüzden sadece hatalıysam düzenleyin; veya bazılarını biliyorsanız detayları ekleyin.
Jari Keinänen

2
Harika bir açıklama koiyu, düşündüğüm gibi oldu, ama ekran görüntüsünü yayınlayana kadar emin olamadım
JamesHenare

Göreviniz beni şüphe ediyor. Ayarlarımı kontrol ettim ve OS Vista'yı kurarken performansı artırmak için tüm etkiyi en aza indirdiğimi hatırladım. Ve tahmin et ne oldu? Cleartype devre dışı bırakıldı. Ben aptal bir insanım, rahatsızlıktan dolayı özür dilerim. Şimdi yazı tipleri çok daha iyi görünüyor, kesinlikle okunabilir. Öyleyse sorumun daha fazla olduğunu biliyorum: Hangi işletim sisteminden Cleartype hangi pencerelere yüklenmedi?
Littlemad

@ Littlemad sorun değil :) Bir tür cevap verebilirim diye kaynakları kontrol etmek de benim için yararlı oldu. sadece bir fikir yerine .
Jari Keinänen

1
@ Littlemad, cleartype ilk olarak Windows XP'de tanıtılmıştı, ancak varsayılan olarak kapalıydı. Windows Vista'dan şimdi varsayılan olarak açıktır. Ayrıca Internet Explorer 7'den sonra, işletim sistemi genelinde etkinleştirilmemiş olsa bile açılır. Kaynak: en.wikipedia.org/wiki/ClearType
JamesHenare

2

Sorun başvurduğunuz Stackoverflow sorusuyla aynıysa, o zaman cevap da aynı değil mi?

Bu bir ipucu sorunu.

Yazı tipi yüz kitinizi oluştururken (FontSquirrel'deki gibi), Uzman seçeneklerinde İpucu belirtmeniz gerekir.

Uzman'ı seçin ve Rendering altında, şunu seçin:

İpucu Uygula - Kazanç oluşturmayı geliştirin.


1
Hayır, aynı değil, Hinting sorunu çözmez. Web'de yayınlanan ve Fontsquirell'in kullandığı Font-Face ile ilgili çözümü zaten kullanıyorum. Baktığım şey şu: iyi bir yazı tipi oluşturmamış olsa bile, hangisi bilgisayarda kullanılabilecek kadar iyi görünüyor? ve hangi yazı tipi boyutunda? Güvenli boyutta güvenli yazı tipi listesini arıyorum. Bir çeşit "en iyi uygulama" referansı.
Littlemad

En iyi uygulama, herhangi bir gömülü web fontunu metin boyutları için kullanmamaktır. Bunun için optimize edilmediler. Onları başlıklar ve başlıklar için bırakın.
DA01

1
@ DA01: Ben bir web tasarımcısıyım, iyi tipografi tasarlamak ve kullanmak, yazı tiplerini göz ardı edemem, kullanılabilecekleri kabul edilebilir olanları bulmak istiyorum.
Littlemad

@ Littlemad Aynı zamanda iyi tipografi tasarlamak ve kullanmak isteyen bir web tasarımcısıyım. Font-yüz gömme işleminin, en azından şimdilik ekranlarda küçük metin boyutları için optimize edilmemiş çoğunlukla yazı tipleri kullandığını biliyorum. Genellikle bir ipucu eksikliği vardır ve gömülü yüz belirli bir kullanıcı tarafından kullanılamıyorsa, ölçümleri çok büyük zarara yol açabilir. Ekranlarındaki metin boyutları için optimize edilmiştir sistem yazı tiplerini kullanmak olduğunu iyi tipografi kullanarak.
DA01

1
@ DAO1: Evet, ben de bu modelin büyük bir hayranı değilim, ama gömülü fontların doğası gereği kötü olmadığını, bunun iyi ve kötü fontlarla ilgili olduğunu belirtmeye çalışıyordum.
Russell Leggett

1

ttfautohint , fontun ipucu bytecode'unu yeniden oluşturmak için kullanılabilir; varsayılan ayarlar (GDI uyumlu), pencerelerin yazı tipini oluşturmasına yardımcı olmalıdır.


0

Bunun tarayıcı ile ilgisi yok, ancak pencerelerin kendisi var.

* nix sistemleri (unix / linux ve OSX, bir Unix tabanına sahip olduğu için buna dahil edilmiştir), metnin nasıl görüntülendiğini hassas bir şekilde kontrol etme seçeneğine sahiptir ve genellikle alt piksel görüntülemeye ayarlanmıştır (ki bu benim yaptığımdan çok daha teknik bir açıklama içerir). size vereceğim, fakat esas olarak, metni göstermek için alt pikselleri (ekranınızın piksellerinin kırmızı, yeşil ve mavi bölümleri), Windows’un net tipini kullandığı yerlerde kullanıyorum. mekaniği üzerinde bulanık.

Neredeyse sadece Windows alt piksel oluşturma, font veya dosya değil, bu fontları ve dosyaları görüntüleyen işletim sistemi.


Açıklama için teşekkürler, ancak sorunun Windows olduğunu biliyorum, ancak daha fazlasını soruyorum: web sitenizde / müşteri-web sitenizde kullandığınız ve hala pencerelerde "oldukça" nezih görünen bir yazı tipi ne türden test ettiniz veya kullandınız?
Littlemad

Aslında, tarayıcıdan tarayıcıya değişir. Firefox ve IE, yalnızca biri EOT kullanıyor, diğeri OTF / TTF / WOFF kullanıyorsa aynı fontu farklı şekilde oluşturacaktır. ClearType da alt piksel oluşturma işlemini kullanıyor. Pek çok insan sadece OS X’in Windows’taki seçeneklerine göre font önleyici özelliğini tercih ediyor.
Calvin Huang,

@ Lilemlemad "oldukça nezih" derken neyi kastediyorsunuz, demek istediğim sadece kendimi güzel bir şekilde işlememesi gerçeğinden vazgeçtim. İşte Windows 8
dkuntz2

@Calvin Huang: Evet, render oluşturma tarayıcısının farkını biliyorum, ama asıl konu bu değil. İşletim sistemi ile ilgili. Günümüzde tarayıcı, fontların takma adlarını düzgün bir şekilde göstermektedir. Windows hala değil. @DKuntz: "Windows 8" derken ne demek istiyorsun? Önemli web sitesinde font-face kullanan birçok insan görüyorum ve bu iyi tasarımcının bunu yaptığını görmek gerçekten çok çirkin. Bu yüzden daha az kötü bir çözüm arıyorum, yine de kötü işlendi, ama en azından Commodore 16 türünde bir metin gibi görünmeyecek kadar iyi. Aksi takdirde tarayıcınızı kontrol etmek için bir js çözümü kullanmalı ve eğer mac veya pc iseniz css stilini
geçmeliyim

4
Bu açıklama yanlış veya en azından eksik. , Windows ne yapar alt piksel anti-aliasing - ClearType budur ve XP beri var olmuştur. OS X, Windows ile karşılaştırıldığında yazı tipi oluşturma yapmaz yanlış , bunu yapar farklı fark en iyi sübjektif olduğunu ve yazı Windows üzerinde nasıl işlenir tercih insanları bulacaksınız -. Buna ek olarak, Windows’taki tarayıcılar farklı işleme yöntemlerini de kullanır; örneğin, Windows’da Firefox’taki 3.6’ya kadar olan tüm fontlar görünür jagjiler gösterecektir. Bu, DirectWrite API'sine geçerek sürüm 4'te çözülmüştür.
Yi Jiang,


0

CSS'de aşağıdaki kodu kullanın

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

Size yardımcı olabilir


2
Lütfen okuyuculara ne demek istediğinizi göstermek için bir kod parçası gösterebilir misiniz?
Mensch
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.