Come posso rendere i caratteri renderizzati allo stesso modo su diversi browser Web?

Sto costruendo un sito Web per un cliente e speravamo di utilizzare il testo normale, non le immagini nella barra di navigazione. Il carattere che stiamo usando è Century Gothic (credo che questo carattere sia disponibile sulla maggior parte dei PC e Mac) Il problema è che su diversi browser il carattere rende significativamente diverso. In Chrome l'abbiamo visto come vogliamo, ma in Firefox il testo è più piccolo e più audace.

Oltre a scrivere javascript specifico del browser per modificare le proprietà del carattere, ci sono altre opzioni per standardizzare il modo in cui i caratteri vengono visualizzati su più browser. Forse qualche libreria o API? Forse si tratta di essere più specifici nel dichiarare le proprietà dei caratteri? Onestamente sono bloccato e ho bisogno di aiuto.

website-design fonts cross-browser

— Zach Lysobey
fonte

Risposte:

Non otterrai caratteri e altre cose per renderizzarli in modo identico nei browser. La gestione dei caratteri è un esempio perfetto. So che Safari su Windows ama rendere il testo in grassetto per qualche motivo. Purtroppo è così che funziona il web. La varietà di browser, sistemi operativi, monitor, processori grafici, ecc., Significa che ci sono potenzialmente migliaia o decine di migliaia di modi diversi in cui una persona può visualizzare una pagina web. Quindi quando costruisci per quello che devi fare, sapendo e aspettandoti che il tuo sito non sarà pixel perfetto per tutti. Questa non è stampa. È la selvaggia rete selvaggia.

— John Conde
fonte

Sì, sembra che questa sia la sfortunata realtà. Sembra tuttavia che per qualcuno dovrebbe essere possibile scrivere un pezzo di javaScript che renderebbe le cose un po 'più vicine alla normalità.

— Zach Lysobey,

Purtroppo non è un problema di codice ma un problema di software e hardware. È come vengono sviluppati i browser e con l'accelerazione dell'hardware peggiorerà (anche se i caratteri appariranno più fluidi per coloro che lo hanno abilitato).

— John Conde

Questo articolo (e gli altri della stessa serie) spiega i problemi in modo molto dettagliato, dovresti essere curioso. blog.typekit.com/2010/12/17/…

— paulmorriss

Hai selezionato la tua risposta come migliore. Dici che non è un problema di codice, ma sicuramente qualcuno potrebbe scrivere codice in modo che una singola riga di testo sia allungata fino a una larghezza minima in pixel. Ciò stesso migliorerebbe notevolmente questa situazione. Potrebbe testare la larghezza <p> renderizzata e aumentare la spaziatura delle lettere di conseguenza. Può essere?

— Zach Lysobey,

@Zach - Puoi superare molti ostacoli con una certa pianificazione e programmazione intelligente. Ma alla fine possiamo avere solo così tanto controllo. Fondamentalmente se riesci ad accettare problemi come Safari su Windows e il codice in tutto il resto, dovresti andare bene.

— John Conde

In realtà esiste un metodo per incorporare i caratteri nel tuo CSS. È estremamente facile. Fare riferimento a http://randsco.com/index.php/2009/07/04/p680 per ulteriori informazioni su come eseguire questa operazione. L'aspetto negativo di questo è che i browser più vecchi (prima e 7 e ff 3 credo ...) non supportano questo. Ma il numero di persone che usano questi vecchi browser sta rapidamente diminuendo ed è ancora possibile specificare caratteri alternativi che funzionerebbero e di solito sono sulla maggior parte dei PC per ogni evenienza.

Un altro approccio che non ho usato prevede l'uso del flash. Non ho molte informazioni su questo oltre a quello che conosco.

— Kenneth
fonte

Nella nota CSS assicurati di usare solo i caratteri che non violeranno i diritti d'autore se quel carattere è preso da qualcun altro come quando usi il metodo css che il file dei caratteri è disponibile per tutti coloro che possono accedere al tuo sito web.

— Kenneth

Quel metodo Flash si chiama sIFR . Ha anche i suoi pro e contro.

— John Conde

Come è stato detto nell'altra risposta anche usando questo approccio ci saranno lievi differenze tra browser e sistemi, ma ci sono cose che puoi fare con il resto del design del tuo sito che può compensare e rendere il sito ben visibile in tutte le diverse configurazioni. Una cosa fondamentale è avere più browser e preferibilmente sistemi operativi su cui testare i tuoi siti.

— Kenneth

Come altri hanno già notato, non abbiamo il controllo totale. Ma penso che valga la pena menzionare un paio di cose che trovo utili nel far sì che i browser rendano le cose in modo simile nel complesso. Entrambi sono "ritorno alle origini", cose che molti di voi stanno già facendo, ma ho pensato che meritassero di essere menzionati dal momento che le fondamenta su cui si costruiscono spesso ti preparano per il successo o il fallimento ...

Ripristino CSS. Il concetto è semplice, si impostano i valori predefiniti dei tag HTML in un foglio di stile per impostare un punto di partenza comune per il rendering HTML. Ecco un articolo ed un esempio: http://meyerweb.com/eric/tools/css/reset/

Dichiarazione del tipo di documento. http://htmlhelp.com/tools/validator/doctype.html

— ph33nyx
fonte