Download faux pas - faux pas Source Code Download

faux pas

Schriftarten herunterladen

1.0.0

Herunterladen

Euen Dieses Projekt ist archiviert und das Repository wird nicht mehr aufrechterhalten.

Faux Pas, ein Faux -Web -Schriftart Detektor

Ein Skript, um Elemente hervorzuheben, die fälschlicherweise zu @font-face-Blöcken nicht übereinstimmen, was zu schlechteren Fett- oder Faux-Italic-Rendering führen kann. Arbeitet eigenständig - keine Abhängigkeiten.

Willst du das in der Befehlszeile? Schauen Sie sich node-faux-pas an.

Demo

Eine umfassendere Testseite ist ebenfalls verfügbar.

Was ist das?

Wenn Sie einen CSS @font-face Block auf Ihrer Seite aufnehmen, geben Sie in diesem Block eine font-family , font-weight und font-style an. Wenn Sie eine Web -Schriftart verwenden, geben Sie dieselben Eigenschaften für Elemente auf Ihrer Seite an. Während Sie den Wert der font-family genau übereinstimmen müssen, um die Web-Schriftart zu verwenden, benötigen font-weight und font-style keine genaue Übereinstimmung. Dies kann zu unerwartetem Verhalten führen, da der Browser das verwendet, was verfügbar ist, auch wenn es nicht gut passt.

Wenn Ihr Element einen font-weight weniger als 500 oder gleich 500 wünscht, Ihr @font-face aber nur Varianten Ihrer Schrift, die fett sind, versucht der Browser, eine mutige Web-Schriftart für Sie zu synthetisieren. Dieses synthetisierte Rendering ist oft unterdurchschnittlich. Die gleiche Synthese geschieht, wenn Sie kursiv sind, aber es ist keine kursive Web -Schriftart verfügbar. Dieses Verhalten könnte mit der font-synthesis -Eigenschaft kontrolliert werden, wenn Browser es unterstützen.

faux-pas hilft Ihnen, diese Nichtübereinstimmungen und Faux-Renderings zu protokollieren und zu melden, damit Sie den beleidigenden Code beheben können.

Standardwiedergabe von offenen Sans

Standard offene Sans

Faux Bold Open Sans

Faux -kursiv offene Sans

Installation

Erhältlich auf NPM als fg-faux-pas :

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

Verwendung

Lesezeichen: Holen Sie sich das Lesezeichen auf der Demo -Seite. Ziehen Sie es in Ihre Lesezeichen und verwenden Sie, wo dies erforderlich ist. Standardmäßig werden Elemente auf Ihrer Seite hervorgehoben, jedoch die Konsole auf weitere Ausgaben überprüfen.
Empfohlen: Fügen Sie in Ihre Musterbibliothek auf. Fügen Sie sowohl faux-pas.js als auch faux-pas.init.js ein (Tipp: Verwenden Sie Ihre eigene Init-Datei, um die Konfigurationsoptionen zu ändern).
Auch in der Befehlszeile: node-faux-pas

Optionen

console: true : Verwendet console , um vollständige Protokollierungsinformationen auszugeben (Warnungen für nicht übereinstimmende Elemente und Fehler für das Faux -Rendering).
highlights: true : Fügt für die visuelle Inspektion einen bestimmten Stil zu nicht übereinstimmenden/künstlichen Elementen auf der Seite hinzu.
mismatches: true : Eine Fehlanpassung ist möglicherweise kein Faux -Rendering, obwohl es sich um eine Missverständnis handelt - diese Option ermöglicht es Ihnen, diese Warnungen zu deaktivieren.