html - personalizadas - CSS diferentes(peso de fuente) en Mac OSX y Windows. ¿Por qué el font-weight se procesa de manera diferente?

fuentes css3

Question

Me encontré con un problema en el que el " peso de fuente " aparece de manera diferente en diferentes sistemas operativos, en mi caso Windows y Mac OSX . Estos son algunos ejemplos de cómo se renderiza la fuente:

• Windows :

• Max OSX :

Mismo texto, mismo navegador, pero diferentes sistemas operativos. En el dispositivo Mac, revisé todos los navegadores, incluidos Firefox, Opera, Google Chrome y Safari, y el sitio web se muestra de la misma manera. Una vez que abro el sitio web en un dispositivo con Windows, la fuente se muestra de manera "en negrita ", es decir, el texto aparece en negrita aunque no tengo dicho código CSS con este atributo. Mi CSS personalizado es el siguiente:

html,
body,
div,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
td,
input,
textarea {
  font-weight: 300 !important;
}
h1,
h2,
h5,
h6 {
  font-weight: 300 !important;
}
h3 {
  font-weight: 400 !important;
}
h4 {
  font-weight: 400 !important;
}
span,
strong,
th {
  font-weight: 500 !important;
}

Este código funciona bien, y con esto me refiero al hecho de que el código CSS se ejecuta correctamente. Mi familia de fuentes es "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; si esto es de alguna ayuda Después de mucha investigación, intenté usar el siguiente código CSS que ayudó a muchos usuarios a resolver problemas similares a los míos:

-webkit-font-smoothing: antialiased;

Lamentablemente, el resultado sigue siendo el mismo y se ve de la siguiente manera:

• Windows :

• Mac OSX :

¿Cómo puedo visualizar el texto en un dispositivo con Windows del mismo grosor que en un dispositivo Mac OSX? Quiero que el texto sea más delgado en Windows.

¡¡Atentamente!!

Answer 1

CLARAMENTE, esas son dos fuentes diferentes. Tenga en cuenta el punto sobre la "i". Tenga en cuenta el ancho de la "h". No es el peso de la fuente.

Si desea que las cosas se vean igual, debe usar una fuente que esté disponible en ambos sistemas.

Answer 2

Supongo que en Windows, la fuente que se está renderizando es Arial y en Mac OS X, la fuente se procesa en Helvetica Neue . IIRC Windows no incluye fuentes Helvetica de forma predeterminada, por lo que se está recurriendo a Arial.

Sin embargo, Arial es MUY similar a Helvetica. Estoy haciendo esta suposición basada en la barra transversal de la Q mayúscula. Si hiciste un ejemplo con una R o G mayúscula, podrías confirmar mi sospecha.

Como Arial no tiene las clases de peso adicionales que Helvetica tiene, se está procesando con la siguiente clase de peso más cercana. Por lo tanto, estás obteniendo diferencias entre los dos sistemas operativos.

Si quieres coherencia, te recomendaría usar una fuente web como Roboto o Open Sans o algo así.