astro font picker

Astro字體採摘器

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工具欄中以新圖標的形式顯示，默認情況下，Astro 4.0及更高版本可以啟用。

按類型過濾字體（可選），然後選擇一個字體系列。該字體將應用於您網站的身體元素。

如果您將字體系列應用於低於身體元素的元素，則除非您啟用Override All Styles切換，否則它不會覆蓋這些字體。

提示：您可以使用上/向下箭頭鍵快速循環循環中的字體。

啟用

此切換控制選定的字體是否應用於頁面。默認情況下啟用它。

覆蓋所有樣式

此切換將使用所選字體覆蓋您網站上的所有font-family樣式。如果沒有啟用，將不會被限制在比人體元素的元素上的任何字體系列被覆蓋。

Override All Styles切換禁用的所有樣式的主要原因是維護網站的特定元素或部分的字體樣式。這樣，當您使用字體選擇器為其他區域選擇字體時，它不會覆蓋您已經決定的字體。

字體CSS輸出

這是樣式錶鍊接和CSS，您可以將其複制並粘貼到網站中以永久安裝字體。例如：

在您的head元素中：

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

在您的CSS中：

 h1 {
    font-family : Itim , cursive;
}

在Google字體中查看

此鏈接將在Google字體中打開所選字體。

設置存儲在會話存儲中

所有設置（啟用，覆蓋，字體類型和字體系列）都保存在會話存儲中，因此當頁面在開發過程中刷新時不會丟失。

其他

該項目基於實體庫，該庫是一個獨立的字體選擇器，可在任何網站上使用。