2010-09-16 5 views
25

Photoshop'ta tasarladığımda, yazı tiplerim ince ve net, ancak CSS'de yazı tiplerini bildirdiğimde - font ağırlığı kullanırken bile: çakmak - yazı tipleri her zaman daha belirgindir.Web Güvenli Yazı Ağırlıkları - Tiner nasıl alınır?

Belki de bu, tarayıcı yazı tipini nasıl işliyor (IE yazı tiplerinde zayıf kalıyor), ama aynı ince, net görüntüyü elde etmek için herhangi bir hile veya ipucu olup olmadığını merak ediyordum.

cevap

2

Haklısınız, bu bir oluşturma işlemidir. Metin oluşturucu işletim sisteminize, ayarlarınıza ve tarayıcınıza nasıl bağlıdır (Safari, örneğin, IE'den daha iyi bir şekilde işlenir). Bu yüzden bu görüntülemenin photoshop comp ile eşleşmesi için bir yol yoktur.

A burada daha fazla bilgi bit:

Browser Choice vs Font Rendering | Phinney on Fonts

15

Yazı render karmaşık olabilir. Ne yazık ki, farklı tarayıcılar aynı yazı tipini farklı bir şekilde oluşturacaktır.

CSS gittiği sürece, font-weight:100 ayarı en düşük kullanılabilir ağırlığın kullanılmasını sağlar. Ayrıca -webkit-font-smoothing:antialiased'u da ayarlamak isteyebilirsiniz.

<style type="text/css"> 
    body { 
     font-family:"Helvetica Neue", Arial, sans-serif; 
     font-weight:100; 
     -webkit-font-smoothing:antialiased; 
    } 
</style> 

Helvetica Neue, OSX'e özgü çok ince bir fonttur.

Yapabileceğiniz en iyi şey gerçekten kayda değer Ayrıca http://www.google.com/fonts/

geçerli:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator

+0

fontun düzeni önemli değil, bu hızlı bir çözümdür, ama aslında yapmaz yazı tipi daha net, sadece daha hafif bir font-weight'a sahip olan seçilmiş font (ya da fontun kendisi ince çizgilerle tasarlanmıştır). – einord

1

Ben evrensel bir web yazı tipleri herhangi birini tüm tarayıcılarda çok ince bir ağırlığa sahiptir inanmıyorum. Ancak, şimdi tüm günlerde, tüm büyük tarayıcılarda özel yazı tipleri gömme yolları var.

http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator

bu araçların herhangi sadece hayal edebileceğiniz yazı her türlü ilgili alabilirsiniz. Sadece sonuncusunun telif haklarına dikkat edin.

25

Kullanım CSS

CSS'nizde koymak ... fontları kadar pürüzsüz:

-webkit-font-smoothing: antialiased; 
+1

Bu aslında yardımcı olan bir şey. en azından webkit tarayıcıları için! Benzer bir soruya şu cevabı da kontrol edin: http://stackoverflow.com/a/4012154/336235 –

+0

, Opera, IE ve Firefox için mevcut herhangi bir çözümden mi geliyor? –