Carattere anti-alias nella pagina HTML

Question

Esiste un buon modo per creare caratteri nitidi, chiari e GRANDI nelle pagine Web? Devo creare un effetto nuvola di tag sulla mia home page con dimensioni e colori dei caratteri diversi.

L'ho impostato in HTML / CSS ma sui browser o sistemi operativi precedenti che non supportano l'anti-aliasing come impostazione predefinita sembra un po '... schifoso.

Ho giocato con sIFR , che ha funzionato magnificamente ma mi ha dato alcuni orribili effetti di carico ma ora mi chiedo se c'è un modo per:

a) effettua il rilevamento di browser / sistema operativo per dividere gli utenti in base a combinazioni browser / sistema operativo che SO l'anti-aliasing (ottengono HTML non elaborato) e per " altri " che ottengono un tag immagine.

b) Una sorta di JavaScript per aggiungere l'antialias?

c) Soluzione permanente per caricare un'immagine BG nel div e nascondere il testo HTML. (So, lo so, storie horror di Google sul deindicizzazione ... ma è possibile?)

Answer 1

a) Naturalmente puoi usare il rilevamento del browser. Il modo più semplice per farlo è probabilmente utilizzare jQuery 's metodo browser . (jQuery è una fantastica libreria JavaScript che semplifica molto lo sviluppo di JS nel caso in cui non l'avessi ascoltato)

A seconda dei risultati del browser (o del sistema operativo) che potresti ottenere, potresti presentare all'utente diverse soluzioni, dal normale testo a qualcosa come una soluzione Flash.

Tuttavia, sconsiglio. Le cose sembrano migliori su macchine nuove rispetto a quelle vecchie. È così, ed è per questo che consiglio di non dedicare tempo prezioso a piccoli difetti nei browser più vecchi. - A meno che gli utenti con browser meno recenti siano ovviamente il tuo principale gruppo demografico. In questo caso, che ne dici di farlo in Flash? Inutile codificare due soluzioni se una funziona sempre, giusto?

b) Puoi infatti creare testo anti-aliasing tramite JavaScript. Dai un'occhiata al mio progetto Die Stimme Gottes (& Quot; Voice of God " - non per i religiosamente schizzinosi) per un esempio. In questo progetto, ho usato l'eccellente typeface.js per questo.

c) Usa semplicemente CSS, forse?

h1.welcome {
    background: url('the-welcome-image.png') no-repeat;
    color: transparent;

}

Answer 2

+1 commento di Hank. In questo modo hai poco da guadagnare. Alcuni browser desktop (inclusi IE7 + e Safari) attivano l'antialiasing per impostazione predefinita anche quando è disattivato a livello di sistema operativo e i sistemi operativi moderni (post-XP) tendono comunque ad attivarlo per impostazione predefinita. Forzando AA sul resto, dovrai:

(+) migliora leggermente la visualizzazione per gli utenti di IE6 e XP + Firefox che inconsapevolmente non hanno AA

(-) rende il caricamento più lento per tutti (ma soprattutto per gli utenti di dispositivi mobili limitati)

(-) sconfigge le dimensioni dei caratteri preferite

(-) infastidisce inutilmente i ludditi che disabilitano deliberatamente l'antialiasing perché è & # 8220; tutto sfocato & # 8221; (*)

(*: ci sono casi limitati in cui ciò ha persino senso, in particolare per i vecchi monitor CRT fuzzy.)

Answer 3

A quanto pare i metodi migliori (in nessun ordine reale) sono:

1) Usa un'immagine. Se ti affidi alla SEO per il sito, aggiungi html e nascondilo usando css utilizzando uno di questi metodi

2) typeface.js - JS che funzionerà con la maggior parte dei browser moderni. Ha alcuni bug e difetti ma funziona bene. Se hai intenzione di forzare l'antialiasing sui tuoi utenti, allora funziona. Usa con parsimonia. Autore che lavora su Opera e compatibilità IE8 però ...

2) sIFR - Script eccellente che sostituisce dinamicamente le aree selezionate di testo con filmati flash. Ancora alcuni bug e problemi tecnici, ma se sei semplicemente interessato a un font dall'aspetto fantastico, questo è perfetto. Aumenta il caricamento della pagina, quindi, come sempre di più è meno, utilizzare con parsimonia.

Tendo a non optare per le soluzioni pesanti di JS, poiché mi piace avere un caricamento della pagina velocissimo, ma se DEVI avere dei caratteri belli, allora questi sembrano essere i metodi più eleganti e semplici.

Answer 4

Forza il colore di sfondo, ridefinendolo per la classe o l'elemento con lo stesso colore di sfondo. Funziona.

span.your_class {
    writing-mode: tb-rl;
    filter: flipv fliph;
    background-color: #006cb8 !important;
}

Answer 5

Flash o Silverlight sono le tue migliori scommesse per un rendering dei caratteri di bell'aspetto