astro font picker

アストロフォントピッカー

Astro Font Pickerは、サイトのさまざまなフォントを試してみることができる開発者ツールバー統合です。 Googleフォントを使用して、1000を超えるオープンソースフォントをロードします。アップ/ダウンキーを使用して、さまざまなフォントをすばやくサイクリングするか、リストからそれを選択します。

インストール

自動インストール：

 npx astro add astro-font-picker

手動インストール：

 npm install astro-font-picker

astro.config.mjsファイルに以下を追加します。

 import astroFontPicker from 'astro-font-picker' ;

export default {
  integrations : [
    astroFontPicker ( ) ,
    // other integrations
  ] ,
} ; 

使用法

Astro Font Pickerは、Dev Toolbarの新しいアイコンとして表示されます。これは、Astro 4.0以降でデフォルトで有効になります。

タイプ（オプション）でフォントをフィルタリングし、フォントファミリを選択します。フォントは、サイトのボディ要素に適用されます。

フォントファミリがボディ要素よりも低い要素に適用されている場合、 Override All Stylesトグルをオーバーライドしない限り、それらのフォントをオーバーライドしません。

ヒント：アップ/ダウンアローキーを使用して、フォントをすばやくサイクリングできます。

有効になっています

このトグルは、選択したフォントがページに適用されるかどうかを制御します。デフォルトで有効になっています。

すべてのスタイルをオーバーライドします

このトグルは、選択したフォントを使用して、サイト上のすべてのfont-familyスタイルをオーバーライドします。この有効化がなければ、ボディ要素よりも低い要素に適用されるフォントファミリは、オーバーライドされません。

Override All Styles主な理由は、サイトの特定の要素またはセクションのフォントスタイルを維持することです。このようにして、フォントピッカーを使用して他の領域のフォントを選択すると、すでに決定したフォントをオーバーライドしません。

フォントCSS出力

これは、StyleSheetリンクとCSSで、コピーしてサイトに貼り付けてフォントを永続的にインストールできます。例えば：

あなたのhead要素で：

 < link rel =" stylesheet " href =" https://fonts.googleapis.com/css2?family=Itim " />

あなたのCSSで：

 h1 {
    font-family : Itim , cursive;
}

Googleフォントで表示します

このリンクは、Googleフォントで選択したフォントを開きます。

設定はセッションストレージに保存されます

すべての設定（有効化、オーバーライド、フォントタイプ、およびフォントファミリ）はセッションストレージに保存されるため、開発中にページがリフレッシュしても失われません。

他の

このプロジェクトは、任意のWebサイトで使用できるスタンドアロンフォントピッカーであるFontable Libraryに基づいています。