I font sembrano diversi in Firefox e Chrome

Sto usando il PT-sans di Google Web Font

font-family: 'PT Sans',Arial,serif; 

ma sembra diverso in Chrome e Firefox

C’è qualcosa che devo aggiungere in modo che appaia uguale in tutti i browser?

il reset css potrebbe risolvere il problema, non sono sicuro.

http://developer.yahoo.com/yui/reset/

Per il font ChunkFive di FontSquirrel, specificando “font-weight: normal;” interrotto il rendering di Firefox dall’assomigliare al culo quando usato in un’intestazione. Sembra che Firefox stia cercando di applicare un falso in grassetto a un font che ha solo un peso, mentre Chrome non lo è.

Per me, i caratteri web di Chrome sembrano scadenti finché non metto il font SVG davanti a WOFF e TrueType. Per esempio:

 @font-face { font-family: 'source_sans_proregular'; src: url('sourcesanspro-regular-webfont.eot'); src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'), url('sourcesanspro-regular-webfont.woff') format('woff'), url('sourcesanspro-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } 

Anche in questo caso, i caratteri di Chrome sono più sottili di Firefox o IE. Chrome sembra buono a questo punto, ma di solito voglio impostare diversi tipi di carattere in IE e Firefox. Uso una combinazione di commenti condizionali di IE e jQuery per impostare diversi tipi di carattere in base al browser. Per Firefox, ho la seguente funzione eseguita quando viene caricata la pagina:

 function setBrowserClasses() { if (true == $.browser.mozilla) { $('body').addClass('firefox'); } } 

Quindi nel mio CSS, posso dire

 body { font-family: "source_sans_proregular", Helvetica, sans-serif; } body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; } 

Allo stesso modo, in un foglio di stile solo IE incluso nei commenti condizionali di IE, posso dire:

 body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; } 

Per evitare discrepanze tra i font nei browser, evitare di utilizzare gli stili CSS per modificare l’aspetto del carattere. L’utilizzo della proprietà font-size di solito è sicuro, ma potresti evitare di fare cose come font-weight: bold; invece, dovresti scaricare la versione in grassetto del font e assegnargli un altro nome di famiglia di font.

Ci sono alcune correzioni. Ma di solito può essere risolto con:

 html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 

A volte può essere dovuto al font-weight . Se stai usando un carattere personalizzato con @font-face assicurati che la syntax del font-weight sia corretta. In @font-face l’idea delle proprietà font-weight / font-style è di mantenere il nome della font-family su diverse dichiarazioni @font-face usando un font-weight differente o font-style modo che quei valori funzionino correttamente in CSS ( e carica il tuo carattere personalizzato – non “falso in grassetto”).

Ho visto -webkit-text-stroke: 0.2px; menzionato per addensare i caratteri webkit, ma penso che probabilmente non ne avrai bisogno se usi il primo pezzo di codice che ho dato.

Ho notato che il cromo tende a rendere i caratteri un po ‘più nitidi e il firefox un po’ più agevole. Non c’è nulla che tu possa fare al riguardo. in bocca al lupo

A partire dal 2014, Chrome ha ancora un bug noto in cui se il webfont in uso ha una copia locale installata, sceglie di utilizzare la versione locale, causando problemi di rendering OP.

Per risolvere questo problema, puoi fare quanto segue:

In primo luogo, scegli come target Chrome Browser o OSX (per me, il problema era solo con OSX Chrome). Ho usato questo semplice JS per ottenere il rilevamento rapido del browser / OS, puoi scegliere di farlo in qualsiasi altro modo a cui sei abituato:

https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js

Ora che puoi scegliere come target un browser / sistema operativo, crea il seguente carattere “nuovo”:

 @font-face { font-family: 'Custom PT Sans'; src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff'); font-weight: normal; font-style: normal; } 

L’URL del carattere è lo stesso utilizzato dal browser quando si incorpora il webfont di Google. Se usi un altro font, copia e modifica l’URL di conseguenza.

Ottieni l’URL qui http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext

Puoi anche rinominare il tuo alias font-famiglia personalizzato @ font-face.

Crea una semplice regola CSS per utilizzare quel tipo di browser di targeting per font o OS o entrambi:

 .mac .navigation a { font-family: "Custom PT Sans", "PT Sans", sans-serif; } 

O

 .mac.webkit p { font-family: "Custom PT Sans", "PT Sans", sans-serif; } 

Fatto. Basta applicare la regola della famiglia di caratteri ovunque sia necessario.

Browser diversi (e FWIW, diversi SO) utilizzano diversi motori di rendering dei font, ei loro risultati non sono pensati per essere identici. Come già sottolineato, non puoi fare nulla a riguardo (a meno che, ovviamente, puoi sostituire il testo con immagini o flash o implementare il tuo renderer usando javascript + canvas – quest’ultimo è un po ‘esagerato se me lo chiedi).

ho trovato che funziona alla grande:

 -webkit-text-stroke: 0.7px; 

o

 -webkit-text-stroke: 1px rgba(0, 0, 0, 0.7); 

sperimentare con il valore “0,7” per adattarsi alle proprie esigenze. Le linee vengono aggiunte dove si definisce il carattere bodys.

ecco un esempio:

 body { font-size: 100%; background-color: #FFF; font-family: 'Source Sans Pro', sans-serif; margin: 0; font-weight: lighter; -webkit-text-stroke: 0.7px;