Las fonts se ven diferentes en Firefox y Chrome

Estoy usando PT-sans de Google Web Font

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

pero parece diferente en Chrome y Firefox

¿Hay algo que deba agregar para que se vea igual en todos los navegadores?

css reset puede solucionar el problema, no estoy seguro.

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

Para la fuente ChunkFive de FontSquirrel, especificando “font-weight: normal;” detuvo la renderización de Firefox de parecerse a un asno cuando se usa en un encabezado. Parece que Firefox estaba tratando de aplicar un negrita falso a una fuente que solo tiene un peso, mientras que Chrome no.

Para mí, las fonts web de Chrome se ven mal hasta que coloco la fuente SVG por delante de WOFF y TrueType. Por ejemplo:

 @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; } 

Incluso entonces, las fonts de Chrome parecen más delgadas que en Firefox o IE. Chrome se ve bien en este momento, pero generalmente quiero configurar diferentes tipos de letra en IE y Firefox. Utilizo una mezcla de comentarios condicionales de IE y jQuery para establecer fonts diferentes según el navegador. Para Firefox, la siguiente función se ejecuta cuando se carga la página:

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

Luego en mi CSS, puedo decir

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

Del mismo modo, en una hoja de estilos solo de IE incluida en los comentarios condicionales de IE, puedo decir:

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

Para evitar discrepancias de fonts entre los navegadores, evite usar estilos CSS para alterar el aspecto de la fuente. Usar la propiedad de tamaño de fuente generalmente es seguro, pero es posible que desee evitar hacer cosas como font-weight: bold; en su lugar, debe descargar la versión en negrita de la fuente y darle otro nombre de familia de fuente.

Hay algunas correcciones. Pero generalmente se puede arreglar con:

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

A veces puede deberse al font-weight . Si está usando una fuente personalizada con @font-face asegúrese de que la syntax de su font-weight sea ​​la correcta. En @font-face la idea de las propiedades font-weight / font-style es mantener el nombre de su font-family en diferentes declaraciones de @font-face mientras utiliza diferentes font-weight o font-style para que esos valores funcionen correctamente en CSS ( y cargue su fuente personalizada – no “falso en negrita”).

He visto -webkit-text-stroke: 0.2px; mencionado para engrosar las fonts de webkit, pero creo que probablemente no lo necesitarás si usas el primer código que di.

Me he dado cuenta de que Chrome tiende a hacer que las fonts sean un poco más nítidas y Firefox un poco más suave. No hay nada que puedas hacer al respecto. buena suerte

A partir de 2014, Chrome todavía tiene un error conocido en el que si la fuente web utilizada tiene una copia local instalada, elige usar la versión local, lo que provoca problemas de representación de OP.

Para solucionar esto, puede hacer lo siguiente:

En primer lugar, dirígete a Chrome Browser u OSX (para mí, el problema era solo con OSX Chrome). He utilizado este sencillo JS para obtener la detección rápida del navegador / sistema operativo, puede elegir hacer esto de cualquier otra manera que esté acostumbrado a:

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

Ahora que puede orientar un navegador / sistema operativo, cree la siguiente fuente ‘nueva’:

 @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; } 

La URL de la fuente es la misma que utiliza su navegador al insertar google webfont. Si usa cualquier otra fuente, simplemente copie y cambie la URL en consecuencia.

Obtenga la URL aquí http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext

También puede cambiar el nombre de su alias personalizado de familia de fonts @ font-face.

Cree una regla CSS simple para usar esa fuente dirigida al navegador / sistema operativo o a ambos:

 .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; } 

Hecho. Simplemente aplique la regla de la familia de fonts donde sea que lo necesite.

Los diferentes navegadores (y FWIW, sistemas operativos diferentes) utilizan diferentes motores de representación de fonts, y sus resultados no están destinados a ser idénticos. Como ya se señaló, no se puede hacer nada al respecto (a menos que, obviamente, se puede reemplazar texto con imágenes o flash o implementar su propio renderizador usando javascript + canvas, este último un poco por la borda si me preguntas).

Me pareció que funcionaba de maravilla:

 -webkit-text-stroke: 0.7px; 

o

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

experimente con el valor “0,7” para ajustarse a sus necesidades. Las líneas se agregan donde defines la fuente de bodys.

Aquí hay un ejemplo:

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