postcss foft classes

Postcss-foft-classes

さまざまなフォントロード戦略のクラスを自動的に追加するPostCSSプラグイン。 netlify/postcss-fout-with-a-classに大きく基づいています。

現在、ドキュメントにはGulp構成の例のみがありますが、他のビルドツール構成との貢献に対して開かれています！これは、PostCSSが行うどこでも機能します。

インストール

npm install postcss-foft-classes

サンプル：FOUT、シングルステージ

FONT FACESとそれに伴うJavaScriptコードを備えたクラスの例コードを使用した完全なFOUTを参照してください。

Gulp Config

これが./gulp-test/で動作していることを参照してください。

 . pipe (
  postcss ( [
    foftLoadedClasses ( {
      groups : [
        {
          families : [ "Lato" ] ,
          classNames : [ "fonts-loaded" ]
        }
      ]
    } )
  ] )
)

入力CSS

 body {
  font-family : Lato , sans-serif;
}

出力CSS

 body {
  font-family : sans-serif;
}

. fonts-loaded body {
  font-family : Lato;
}

サンプル：FOFT、2つのステージ

フォントフェイスとそれに伴うJavaScriptコードを備えた完全なFOFTサンプルコードを参照してください。

Gulp Config

これが./gulp-test/で動作していることを参照してください。

 . pipe (
  postcss ( [
    foftLoadedClasses ( {
      groups : [
        {
          families : [ "LatoInitial" , "Lato" ] ,
          classNames : [ "fonts-loaded" , "fonts-loaded-2" ]
        }
      ]
    } )
  ] )
)

入力CSS

 body {
  font-family : Lato , sans-serif;
}

出力CSS

 body {
  font-family : sans-serif;
}

. fonts-loaded body {
  font-family : LatoInitial;
}

. fonts-loaded-2 body {
  font-family : Lato;
}