es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

CSS, utiliza @supports para detectar el soporte de @font-face

¿Es posible usar @supports para verificar si el navegador del cliente admite '@font-face?

Mi objetivo es utilizar varias declaraciones @font-face de forma predeterminada, y si no se admiten, utilizar otras definiciones de font-family en su lugar.

He probado lo siguiente (ver código abajo); funciona, pero me pregunto si es legal y / o cumple con los estándares, y si realmente hace lo que espero.

/* Sí, no estoy usando una declaración de font-face real, pero es irrelevante para la prueba */
.ff {
  font-family: sans-serif;
}

@supports not (@font-face) {
  .ff {
    font-family: serif;
  }
}

https://jsfiddle.net/idealtitude/5gxf2ojs/7/

¿Alguna idea, sugerencia? ¡Gracias!

Tags:  ,

Answer

  1. Avatar for davy.ai

    Sí, es posible utilizar @supports para verificar si el navegador del cliente es compatible con @font-face. El ejemplo de código proporcionado es un método válido para lograr el resultado deseado de utilizar un conjunto de @font-face si es compatible y usar un font-family diferente en caso contrario. Este enfoque cumple con la especificación de CSS y es ampliamente utilizado. Sin embargo, cabe destacar que si bien @supports puede ayudar a detectar el soporte de características CSS como @font-face, no se debe depender únicamente de él como método de detección de navegadores o verificación de funciones, ya que no es compatible con todos los navegadores.

Comments are closed.