faux pas -Faux faux pasソースコードのダウンロードダウンロード

faux pas

フォントのダウンロード

1.0.0

ダウンロード

ショ和このプロジェクトはアーカイブされており、リポジトリは維持されなくなりました。

Faux Pas、Faux Web Font Detector

@font-faceブロックに誤って不一致になっている要素を強調するスクリプト。その結果、見掛け倒しの偽の太字または偽の斜体レンダリングが生じる可能性があります。依存関係はありません。

これをコマンドラインにしたいですか？ node-faux-pasをご覧ください。

デモ

より包括的なテストページも利用できます。

これは何ですか？

ページにCSS @font-faceブロックを含めると、そのブロック内にfont-family 、 font-weight 、 font-style指定します。 Webフォントを使用すると、ページ上の要素に同じプロパティを指定します。 font-familyの値をWebフォントを使用するために正確に一致させる必要がありますが、 font-weightとfont-style正確な一致を必要としません。これは、ブラウザが使用可能なものを使用するため、予期しない動作につながる可能性があります。

さらに、要素が500以下のfont-weight必要としているが、 @font-faceブロックには太字の書体のバリエーションのみがある場合、ブラウザはあなたのために太字のWebフォントを合成しようとします。この合成されたレンダリングは、しばしばサブパーです。イタリックが必要なときに同じ合成が発生しますが、イタリックウェブフォントは利用できません。この動作は、ブラウザがサポートしていれば、 font-synthesisプロパティで制御できます。

faux-pas 、これらの不一致とフェイクレンダリングを記録および報告して、問題のあるコードを修正できるようにします。

オープンサンの標準レンダリング

標準のオープンサン

フェイクボールドオープンサン

フェイクイタリックオープンサン

インストール

NPMでfg-faux-pasとして利用可能：

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

使用法

ブックマークレット：デモページでブックマークレットを取得します。ブックマークレットにドラッグし、必要に応じて使用します。デフォルトでは、ページ上の要素を強調していますが、コンソールの出力を確認してください。
推奨：パターンライブラリビルドに含めます。 faux-pas.jsとfaux-pas.init.jsの両方を含めます（ヒント：独自のinitファイルを使用して構成オプションを変更します）。
また、コマンドライン： node-faux-pas

オプション

console: true ： consoleを使用して、完全なロギング情報を出力します（Fauxレンダリングのための不一致の要素とエラーの警告）。
highlights: true ：目視検査のために、ページに不一致/フェイク要素に特定のスタイルを追加します。
mismatches: true ：ミスマッチは、それが誤って構成されているにもかかわらず、偽物のレンダリングではないかもしれません。このオプションにより、これらの警告を無効にすることができます。