Podría alguien explicar por qué el siguiente estilo de fuente, la configuración no funciona en chrome, pero el trabajo en IE y FireFox.

Mi sitio web tiene el mismo problema, no recoger el CSS de la configuración de la fuente (donde normal se menciona), de ahí he probado con el CSS entorno de prueba de W3Schools y el comportamiento es el mismo.

Fragmento de CSS:

  • De trabajo sólo en IE/FireFox: font-family: Arial, Helvetica, sans-serif normal;
  • De trabajo en Todos los Navegadores: font-family: Arial, Helvetica, sans-serif;

Tratar en Chrome y el IE para ver la diferencia.

CSS:

body {
  font-family: "Times New Roman", serif;
}
p.serif {
  font-family: Arial, Helvetica, sans-serif;
}
p.sansserif {
  font-family: Arial, Helvetica, sans-serif normal;
}

HTML:

<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in Arial Without Normal.</p>
<p class="sansserif">This is a paragraph, shown in Arial With Normal</p>

Continuación aparecen las preguntas:

  • Podrían aclarar por qué la diferencia de comportamiento entre estos dos navegadores?
  • Cómo asegurar mi CSS los estilos de fuente que son recogidas por Chrome y IE/FireFox (debo quitar normal de todos mis archivos CSS o hay alguna forma mejor de hacerlo)?
  • sans-serif normal no es un valor válido, pero sans-serif, normal es. Tenga en cuenta que normal no es una font-family por lo que se utiliza en ese contexto no tiene mucho sentido. Evite también el aprendizaje de w3schools.
InformationsquelleAutor Achilles | 2017-07-05

1 Comentario

  1. 4

    Podría decirse que no válido fuente-familia declaración

    Si usted abra su navegador, inspector (Ctrl+Cambio+yo en Chrome) verás que la regla CSS

    p.sansserif {
        font-family: Arial, Helvetica, sans-serif normal;
    }

    no se aplica.

    Por el Las especificaciones de CSS, un inválido regla se omite, y lo que habría sido aplicado (hacia atrás hasta la cascada) se aplica en su lugar, o más exactamente, no sea revocada.

    El resultado es "Times New Roman" en este caso – como se ha visto en la «Calculada Estilos».

    CSS Cambios de Estilo de Fuente No funciona en Chrome

    Para establecer el font-style (-variant, -weight, -stretch o line-height (lo que estaban tratando de establecer a normal)) de texto, podemos usar exactamente eso, o el uso de la fuente de taquigrafía.

    La fuente de propiedad CSS es una abreviatura de la propiedad para la configuración de font-style, font-variant, font-weight, font-size, line-height, y font-family

    (con advertencias).

    Como la diferencia entre la IE(FF) y Chrome

    Chrome reconoce en la delimitado por comas afirmación de que sans-serif normal no es un font-family, mientras que el IE no.

    Si usted simplificar la regla:

    p.sansserif {
        font-family: sans-serif normal;
    }

    y ver el resultado en IE, verás la <p> es en "Times New Roman" ya que, si bien es decir acepta la declaración, no puede hacer nada sensato con ella.

    CSS Cambios de Estilo de Fuente No funciona en Chrome

    Más de las especificaciones:

    …es recomienda citar la fuente de la familia de los nombres que contengan espacios en blanco, dígitos o caracteres de puntuación sean de guiones.

    La familia de la fuente de los nombres que pasan a ser de la misma como un valor de la palabra clave (‘inherit‘, ‘serif‘, ‘sans-serif‘, ‘monospace‘, ‘fantasy‘, y ‘cursive‘) debe ser citado para evitar la confusión con las palabras clave con los mismos nombres.

    Por lo que se recomienda que una fuente de la llamada familia de sans-serif normal ser citado como "sans-serif normal".

    Y si la familia de fuentes es usar el mismo nombre de una palabra clave debe ser citado.

    • Tanto Chrome y el IE aceptar Comic Sans MS o Times New Roman etc. con o sin comillas, y aplicarlas correctamente.
    • Chrome rechaza el no cotizados uso de la palabra clave sans-serif donde se encuentra combinado con normal, pero se aceptan tanto si cotizan, aunque no será capaz de aplicar esa fuente, a menos que pueda encontrar uno con ese nombre.
    • Es decir acepta sans-serif normal como posiblemente no cotizados de la fuente nombre de la familia, y podría decirse que esto es correcto, ya que la palabra clave es sólo una parte de la presunta nombre de la familia, en lugar de la cosa entera.
    • Chrome, sin duda, incorrectamente, rechaza lo que se presume es un mal afirmación.
    • Muchas gracias por la aclaración. Esto tiene sentido para mí ahora.
    • También hay una manera fácil de encontrar y consolidar todos esos hoja de estilo errores en una página?
    • Mi placer @Aquiles. Yo estaba muy sorprendido después de desenrollar las especificaciones para encontrar que el IE es (probablemente) no funciona correctamente, y Chrome es (probablemente) no. Siempre hay una primera vez para todo, supongo! 😉 manera Fácil? El top 3 de los navegadores, todos tienen un inspector. IE (F12) muestra el estilo de la regla de los errores con un subrayado ondulado rojo subraya, Cromo (Ctrl+Shift+i) y FF (Ctrl+Shift+C) aplicar un icono de advertencia amarillo y se cruza con ellos. Sé que de ninguna manera más fácil; seleccione cada elemento para ver las reglas que se aplican, y que otras reglas fueron revocadas a lo largo del camino.

Dejar respuesta

Please enter your comment!
Please enter your name here