fontface styled components
1.0.0
Une bibliothèque pour générer des polices dans les formats TTF, EOT, WOFF et WOFF2, ainsi que les instructions @font-face au format des composants stylisés. Inspiré par Fontface-chargeur.
Cette bibliothèque vise à simplifier l'utilisation de l'automatisation de Fontface pour les projets styled-components , car la plupart des outils là-bas génèrent une sortie SCSS ou CSS. Il fournit également des options de configuration de base pour les répertoires d'entrée et de sortie, que certains autres scripts oublient de fournir.
La fonction d'assistance CreateglobalStyle styled-components est utilisée pour vous permettre d'importer des polices dans votre Dom où vous en avez besoin. Un accessoire est ajouté pour vous permettre de contrôler la propriété CSS de FONT-Display de la @font-face , afin que vous puissiez optimiser l'ordre de chargement de vos polices par programme (au moins dans les contextes SSR).
Pour plus de commodité, cette bibliothèque peut également générer des fichiers CSS individuels qui chargent un seul @font-face , ainsi que des fichiers SCSS qui chargent un seul @font-face et pour lequel la propriété CSS de FONT-Display peut être contrôlée via un @use with Rule.
NPM
npm install --save-dev fontface-styled-components
fil
yarn add -D fontface-styled-components
Pris en charge par défaut.
Vous devez installer FontForge et avoir le binaire fontforge dans votre $PATH . S'il est installé, un script de conversion convertira les polices OpenType en TrueType dans le cadre du processus de construction.
Pour générer vos polices et vos fichiers CSS-in-JS, utilisez et adaptez le code suivant:
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' ,
} )Pour charger une police dans le dom de l'une de vos pages, utilisez et adaptez le code suivant:
import CatamaranBoldFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'
import CatamaranRegularFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'
< MyPageRoot >
< CatamaranBoldFontFace />
< CatamaranFontFace fontDisplay = "fallback" />
< MyContent />
</ MyPageRoot > L'importation du fichier Catamaran-bold.ttf entraînerait généralement le fichier CSS-in-JS suivant:
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 } Chemin vers le dossier contenant des polices TTF source.
Par défaut : 'assets/fonts/'
Chemin vers le dossier de destination pour les polices converties à placer. La police TTF d'origine sera également copiée dans ce dossier.
Par défaut : 'dist/fonts/'
Chemin des polices de votre serveur de production, qui sera utilisé dans vos URL de déclaration @font-face .
Par défaut : '/public/fonts/'
S'il faut générer des fichiers @Fontface pour les composants stylisés.
Par défaut : true
Chemin vers le dossier de destination où rédiger des fichiers CSS-in-JS. Chaque fichier de police source aura son propre fichier CSS-in-JS.
Par défaut : 'dist/src/fontfaces/'
Que ce soit pour générer des fichiers Vanilla CSS @Fontface.
Par défaut : false
Chemin vers le dossier de destination où rédiger des fichiers de déclaration CSS @Fontface. Chaque fichier de police source aura son propre fichier CSS.
Par défaut : 'dist/src/fontfaces/'
S'il faut générer des fichiers SCSS MIXS pour chaque police.
Par défaut : false
Chemin vers le dossier de destination où écrire des mixins SCSS. Chaque fichier de police source aura son propre fichier SCSS.
Par défaut : 'dist/src/fontfaces/'
Un drapeau pour ajouter une source locale aux déclarations @Fontface. Recommandés uniquement lorsque votre projet doit être déployé sur des environnements B2B ou des appareils de point de vente où vous pouvez vous assurer que la police locale est identique à celle que vous avez l'intention de servir, car elle varie souvent sur les appareils de consommation.
Par défaut : true pour la compatibilité en arrière, mais nous vous recommandons de le définir sur false
Si SET, applique une propriété de disposition de police à tous les fichiers @Fontface sans discernement. Ceci est principalement conçu si vous souhaitez définir un modèle que vous remplacerez par votre propre logique post-construction, ou si vous souhaitez définir un défaut et modifier manuellement les fichiers @Fontface spécifiques.
Si unset, 'auto' sera utilisé par défaut pour les fichiers CSS. Pour les fichiers CSS-in-JS, un paramètre littéral de modèle sera injecté, qui lit d'abord props.fontDisplay , et qui renvoie 'auto' si cet accessoire est non.
Par défaut : null
Un drapeau pour permettre un répertoire d'entrée vide. Utile pour lorsque vous utilisez fontface-styled-components dans un environnement programmatique. Si false , une erreur sera lancée lorsqu'aucune police ne sera trouvée dans le répertoire d'entrée.
Par défaut : false
Un drapeau pour forcer la régénération de toutes les polices d'entrée, même lorsqu'elles sont déjà présentes dans le répertoire de sortie. Ceci est désactivé par défaut car la génération de polices pour les grands projets Web peut avoir un impact significatif sur les temps de construction. Nous vous recommandons toujours d'activer ce drapeau pour les constructions de production.
Par défaut : false
Un drapeau pour éviter les informations de sortie et les avertissements.
Par défaut : false
