Come creare titoli lisci con HTML e CSS?

Question

Ho visto un sacco di pagine web di recente, che hanno titoli molto lisce, come questo sito, per esempio: http: // boagworld. com /

Come fanno vanno in procinto di farlo? Ci sono indizi nascosti?

A un certo punto ho sentito da una tecnica in cui hanno usato Flash (credo) per incorporare font personalizzati su un sito web e quindi sostituire i titoli normali con questo flash alternativa.

In quali altri modi ci sono oltre flash?

Answer 1

Supponendo che non si desidera utilizzare le immagini come la sostituzione del testo, ci sono diverse tecniche, che si adattano la valorizzazione dei caratteri in modo molto discreto:

• con Flash - SIFR
• pura css = @font-face e direttamente incorporare i caratteri in ttf o otf
• JavaScript tecnica di valorizzazione, lo script si chiama Cufon

Personalmente mi piace usare i font web sicuri con la combinazione di meno noto e corretta fallback

Answer 2

Sono solo utilizzando le immagini come sfondo CSS per certe cose, in questo caso:

http://boagworld.com/wp-content/themes /BoagworldV2/images/logo.gif

Si può fare quello che vuoi con alcune immagini e CSS, qualcosa come:

#header { background: #FFFFFF url(myLogoImg.png) center no-repeat; }

Answer 3

Se non si desidera utilizzare la sostituzione immagine o sIFR, ma vuole font personalizzati, si dovrebbe dare un'occhiata a TypeKit - http://typekit.com/ . Essi consentono di chiamare i font personalizzati (che hanno la licenza per voi) direttamente dal foglio di stile con font-family, e utilizzare JavaScript incorporato nella pagina per servire i font dai loro server. Lo sto usando il loro servizio su un progetto in questo momento e fino ad ora sembra funzionare bene. Non hanno una vasta libreria di font disponibili ancora, ma è ancora più grande di Arial, Verdana, Georgia e Times New Roman.

Answer 4

Cufon per questo. E 'non-Flash (JavaScript), davvero facile da configurare, e degrada con grazia.