faux pas

️ Este proyecto está archivado y el repositorio ya no se mantiene.

Faux Pas, un detector de fuentes web falsas

Un script para resaltar elementos que no coinciden incorrectamente a los bloques de @Font-Face, lo que puede dar como resultado una representación de mala calidad de Faux Bold o Faux Italic. Funciona independientemente, sin dependencias.

¿Quieres esto en la línea de comando? Echa un vistazo node-faux-pas .

Manifestación

También está disponible una página de prueba más completa.

¿Qué es esto?

Cuando incluye un bloque CSS @font-face en su página, especifica una font-family , font-weight y font-style dentro de ese bloque. Cuando usa una fuente web, especifica esas mismas propiedades en los elementos en su página. Si bien necesita hacer coincidir el valor de la font-family exactamente para usar la fuente web, font-weight y font-style no requieren una coincidencia exacta. Esto puede conducir a un comportamiento inesperado ya que el navegador usa lo que está disponible, incluso si no es una buena coincidencia.

Además, si su elemento quiere un font-weight menor o igual a 500 , pero su bloque @font-face solo tiene variantes de su tipo de letra que sean audaces, el navegador intentará sintetizar una fuente web audaz para usted. Esta representación sintetizada a menudo es sub-par. La misma síntesis ocurre cuando desea cursiva, pero no hay fuente web en cursiva disponible. Este comportamiento podría controlarse con la propiedad font-synthesis si los navegadores lo respaldan.

faux-pas lo ayuda al registrar e informar estos desajustes y representaciones falsas para que pueda solucionar el código ofensivo.

Representación estándar de Sans Open

Faux Bold Open Sans

Faux italic abre sans

Instalación

Disponible en NPM como fg-faux-pas :

 npm install --save-dev fg-faux-pas

Uso

• Bookmarklet: obtenga el marcador en la página de demostración. Arrastelo a sus marcadores y use donde sea necesario. Por defecto, resalta los elementos en su página, pero verifique la consola para obtener más salida.
• Recomendado: incluya en su construcción de biblioteca de patrones. Incluya tanto faux-pas.js como faux-pas.init.js (consejo: use su propio archivo init para cambiar las opciones de configuración).
• También en la línea de comando: node-faux-pas

Opción

• console: true : utiliza console para generar información completa de registro (advertencias para elementos y errores no coincidentes para la representación falsa).
• highlights: true : agrega un estilo específico a elementos no coincidentes/falsos en la página para inspección visual.
• mismatches: true : un desajuste puede no ser una representación falsa a pesar de que es una configuración errónea, esta opción le permite deshabilitar estas advertencias.

Soporte del navegador

Cualquier cosa que respalde la API de carga de fuente CSS:

• Google Chrome 35+
• Ópera 22+
• Firefox 41+
• Safari 10+
• Mobile Safari 10+
• WebView de Android Chromium
• Chrome para Android
• y otros

Construir

Use gulp para generar un nuevo archivo HTML DOCS (actualiza automáticamente el Bookmarklet con el último código).