fontface styled components
1.0.0
Una biblioteca para generar fuentes en formatos TTF, EOT, Woff y Woff2, junto con instrucciones @font-face en el formato de componentes con estilo. Inspirado en Fontface-Loader.
Esta biblioteca tiene como objetivo simplificar el uso de la automatización de Fontface para proyectos styled-components , ya que la mayoría de las herramientas generan salida SCSS o CSS. También proporciona opciones de configuración básicas para directorios de entrada y salida, que otros scripts olvidan proporcionar.
La función de ayudante de estilo createglobalstyle styled-components se usa para permitirle importar fuentes en su DOM donde las necesite. Se agrega un accesorio para permitirle controlar la propiedad CSS de muestra de fuentes de la @font-face , para que pueda optimizar el orden de carga de sus fuentes programáticamente (al menos en contextos SSR).
Para mayor comodidad, esta biblioteca también puede generar archivos CSS individuales que cargan una sola @font-face , así como archivos SCSS que cargan un solo @font-face y para el cual la propiedad CSS de muestra de fuentes se puede controlar a través de un @use with AT-RELE.
npm
npm install --save-dev fontface-styled-components
hilo
yarn add -D fontface-styled-components
Compatible por defecto.
Debe instalar FontForge y tener el binario fontforge en su $PATH . Si está instalado, un script de conversión convertirá las fuentes OpenType a TrueType como parte del proceso de compilación.
Para generar sus archivos Fonts y CSS-In-JS, use y adapte el siguiente código:
import fontface from 'fontface-styled-components' ;
fontface . run ( {
sourceDir : 'assets/fonts' ,
fontOutputDir : 'dist/fonts' ,
fontsPublicDir : 'https://my.cdn.com/my-project/public/fonts' ,
styledOutputDir : 'dist/src/assets/fontfaces/' ,
forceRefresh : process . env . NODE_ENV === 'production' ,
} )Para cargar una fuente en el DOM de una de sus páginas, use y adapte el siguiente código:
import CatamaranBoldFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'
import CatamaranRegularFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'
< MyPageRoot >
< CatamaranBoldFontFace />
< CatamaranFontFace fontDisplay = "fallback" />
< MyContent />
</ MyPageRoot > La importación del archivo Catamaran-bold.ttf generalmente daría como resultado el siguiente archivo CSS-in-JS que se genera:
import { createGlobalStyle } from 'styled-components'
export const CatamaranBoldFontFace = createGlobalStyle `
@font-face {
font-display: ${ props => props . fontDisplay || 'auto' } ;
font-family: 'Catamaran';
font-weight: 700;
font-style: normal;
src: local('Catamaran'),
url('/public/fonts/Catamaran-Bold.eot?#iefix') format('embedded-opentype'),
url('/public/fonts/Catamaran-Bold.woff2') format('woff2'),
url('/public/fonts/Catamaran-Bold.ttf') format('truetype'),
url('/public/fonts/Catamaran-Bold.woff') format('woff');
}
`
export default { CatamaranBoldFontFace } Ruta a la carpeta que contiene fuentes TTF de origen.
Predeterminado : 'assets/fonts/'
Ruta a la carpeta de destino para las fuentes convertidas que se colocarán. La fuente TTF original también se copiará en esta carpeta.
Valor predeterminado : 'dist/fonts/'
Ruta de las fuentes en su servidor de producción, que se utilizará en sus URL de declaración de @font-face .
Valor predeterminado : '/public/fonts/'
Si generar archivos @Fontface para componentes de estilo.
Valor predeterminado : true
Ruta a la carpeta de destino a dónde escribir archivos CSS-in-JS. Cada archivo fuente de fuente tendrá su propio archivo CSS-in-JS.
Valor predeterminado : 'dist/src/fontfaces/'
Si generar archivos CSS @Fontface de vainilla.
Valor predeterminado : false
Ruta a la carpeta de destino a dónde escribir archivos de declaración CSS @Fontface. Cada archivo de fuente de origen tendrá su propio archivo CSS.
Valor predeterminado : 'dist/src/fontfaces/'
Si generar archivos SCSS MIXIN para cada fuente.
Valor predeterminado : false
Ruta a la carpeta de destino donde escribir MIXINS SCSS. Cada archivo de fuente de origen tendrá su propio archivo SCSS.
Valor predeterminado : 'dist/src/fontfaces/'
Una bandera para agregar una fuente local a las declaraciones de @Fontface. Solo se recomienda cuándo su proyecto se implementará en entornos B2B o dispositivos de punto de venta donde puede asegurarse de que la fuente local sea idéntica a la que pretende servir, ya que a menudo varían en los dispositivos de consumo.
Valor predeterminado : true para la compatibilidad hacia atrás, pero le recomendamos que lo establezca en false
Si se establece, aplica una propiedad de pantalla de fuentes a todos los archivos de @Fontface indiscriminadamente. Esto se pretende principalmente si desea establecer un patrón que reemplazará con su propia lógica posterior a la construcción, o si desea establecer un valor predeterminado y editar manualmente archivos específicos de @Fontface.
Si Unset, 'auto' se utilizará de forma predeterminada para archivos CSS. Para los archivos CSS-in-JS, se inyectará un parámetro literal de plantilla, que primero lee 'auto' props.fontDisplay .
Valor predeterminado : null
Una bandera para permitir un directorio de entrada vacío. Útil para cuando usa fontface-styled-components en un entorno programático. Si es false , se lanzará un error cuando no se encuentren fuentes en el directorio de entrada.
Valor predeterminado : false
Una bandera para forzar la regeneración de todas las fuentes de entrada, incluso cuando ya están presentes en el directorio de salida. Esto está deshabilitado de forma predeterminada porque generar fuentes para grandes proyectos web puede afectar significativamente los tiempos de construcción. Le recomendamos que siempre habilite esta bandera para las compilaciones de producción.
Valor predeterminado : false
Una bandera para evitar la salida de información y advertencias.
Valor predeterminado : false
