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字体中打开所选字体。

设置存储在会话存储中

所有设置（启用，覆盖，字体类型和字体系列）都保存在会话存储中，因此当页面在开发过程中刷新时不会丢失。

其他

该项目基于实体库，该库是一个独立的字体选择器，可在任何网站上使用。