Come impedire a diversi browser di rendere i font in modo diverso?

Ho un problema con il tentativo di mantenere uno stile di carattere costante su tutti i browser. Come visto di seguito, il sistema di rendering dei font di Safari rende il peso del carattere più piccolo del peso del font di Chrome.Come impedire a diversi browser di rendere i font in modo diverso?

Safari: Safari

Chrome: Chrome

Ho provato con le soluzioni trovate su altre questioni se non hanno risolto questo problema. Come posso mantenere uno stile di carattere costante su tutti i principali browser? Questo è Chrome, Safari, Opera, Firefox e Internet Explorer.

Ecco cosa ho provato.

-webkit-font-smoothing: antialiased;
font-weight: 800;
text-rendering: optimizeLegibility;

fonte

2015-06-16 Pav Sidhu

Sono curioso anch'io. Qualcosa come 'webkit-font-smoothing 'dà più di un aspetto definito? So che ha a che fare con il motore di rendering dei caratteri che è diverso su diversi browser e sistemi operativi (Chrome non usa l'impostazione predefinita se ricordo correttamente). Non penso sia possibile renderlo coerente (a parte usare qualcosa come, ad esempio, 'cufon'), ma sono interessato a sapere. – somethinghere

Il rendering dei caratteri è davvero una cosa strana, ho trovato che il prefisso aiuterà una tonnellata, così come le famiglie di font più grandi per i fall backs. Modifica per caratteri sottili Ho trovato utile usare '-webkit-font-smoothing: antialiased;' –

Si prega di mostrare anche del codice: si tratta di un carattere Web personalizzato, quale CSS stai usando per forzare lo stesso stile tanto quanto pensi puoi, ecc? –

Browser, in generale, hanno diversi motori di rendering dei font/metodi. Per ulteriori dettagli, consiglio di leggere this, this e/o this.

Onestamente, per l'utente medio, la differenza non sarà del tutto evidente e, per la maggior parte, una visualizzazione cross-browser pixel-perfect di qualcosa è stata a lungo abbandonata come effetto collaterale del mondo della stampa.

Se, per qualche motivo masochistico, la perfezione dei pixel è più importante della sanità mentale e del codice gestibile, è possibile provare i vecchi stand-by (testo-in-immagini, immagine/testo sostitutivo) o disattivare il rendering subpixel tramite CSS (anche se non tutti i browser lo supportano e il testo sarà meno leggibile).

Spero che questo aiuti.

fonte

2015-06-16 21:24:13 htmlmonkey

Molte delle differenze riguardano più il fatto che i browser aggiungono o omettono diversi stili/pesi predefiniti ai caratteri. Per evitare che ciò accada, assicurati che nel tuo CSS siano presenti font-weight: normal e font-style: normal nel tuo blocco di codice @fontface.

È quindi necessario applicare gli stili necessari agli elementi HTML.

Quindi, se ho un carattere chiamato geo-light vorrei fare:

@font-face {font-family: 'geo-light'; 
    src: url('fonts/geo-extralight.woff2') format('woff2'), url('fonts/geo-extralight.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
}

e quindi aggiungere gli stili specifici per ogni elemento che utilizza tale tipo di carattere.

/*SET STYLES ON ELEMENTS*/ 
h1, h2, h3, h3 > a, p, li { 
    font-family: 'geo-light', sans-serif; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: none; 
}

Non lo vedo quasi mai sui siti e il pre-cursore su questo è ciò che sta accadendo nell'immagine. Queste differenze non sono causate da un problema di anti-aliasing.

Questo primo e terzo articolo nella risposta originale riguardano un problema completamente diverso e l'articolo intermedio a cui ci si riferisce implicherebbe l'effetto inverso che si verifica nei propri esempi di immagini.

fonte

2018-01-21 01:56:56

Come impedire a diversi browser di rendere i font in modo diverso?

risposta

Problemi correlati