astro font picker

Seleccionador de fuentes Astro

Astro Font Picker es una integración de la barra de herramientas de Dev que le permite probar diferentes fuentes en su sitio. Utiliza Google Fonts para cargar más de 1000 fuentes de código abierto. Use las teclas Up/Down para andar en bicicleta rápidamente a través de diferentes fuentes, o elija una de la lista.

Instalación

Instalación automática:

 npx astro add astro-font-picker

Instalación manual:

 npm install astro-font-picker

Agregue lo siguiente a su archivo astro.config.mjs :

 import astroFontPicker from 'astro-font-picker' ;

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

Uso

Astro Font Picker aparecerá como un nuevo icono en la barra de herramientas Dev, que está habilitada de forma predeterminada en Astro 4.0 y superior.

Filtre las fuentes por tipo (opcional) y luego elija una familia de fuentes. La fuente se aplicará al elemento corporal de su sitio.

Si tiene familias de fuentes aplicadas a elementos inferiores al elemento del cuerpo, no anulará esas fuentes a menos que habilite la Override All Styles .

Sugerencia: puede usar las teclas de flecha hacia arriba/hacia abajo para recorrer rápidamente las fuentes.

Activado

Esta palanca controla si la fuente seleccionada se aplica a la página. Está habilitado de forma predeterminada.

Anular todos los estilos

Esta alternancia anulará todos los estilos font-family en su sitio con la fuente seleccionada. Sin esto habilitado, las familias de fuentes aplicadas a elementos inferiores al elemento del cuerpo no se anularán.

La razón principal para que Override All Styles de alternancia discapacitados es mantener el estilo de fuente de elementos o secciones específicas de su sitio. De esta manera, cuando usa el selector de fuentes para seleccionar una fuente para otras áreas, no anulará las fuentes que ya ha decidido.

Salida CSS de fuentes

Este es el enlace de hoja de estilo y el CSS que puede copiar y pegar en su sitio para instalar permanentemente la fuente. Por ejemplo:

En tu elemento head :

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

En tu CSS:

 h1 {
    font-family : Itim , cursive;
}

Ver en Google Fonts

Este enlace abrirá la fuente seleccionada en Google Fonts.

Las configuraciones se almacenan en el almacenamiento de la sesión

Todas las configuraciones (habilitadas, anular, tipo de fuente y familia de fuentes) se guardan en el almacenamiento de la sesión, por lo que no se pierden cuando la página se actualiza durante el desarrollo.

Otro

Este proyecto se basa en la biblioteca fontable, que es un selector de fuentes independiente que se puede usar en cualquier sitio web.