fontface styled components Download - fontface styled components do download de código fonte

fontface styled components

Baixar fonte

1.0.0

Baixar

Componentes de estilo de fontface

Uma biblioteca para gerar fontes nos formatos TTF, EOT, WOFF e WOFF2, juntamente com as instruções @font-face no formato componentes com estilo. Inspirado no Fontface-LOADER.

Esta biblioteca visa simplificar o uso da automação do Fontface para projetos styled-components , pois a maioria das ferramentas por aí gera saída SCSS ou CSS. Ele também fornece opções básicas de configuração para diretórios de entrada e saída, que alguns outros scripts esquecem de fornecer.

A função Helper CreateGlobalStyle styled-components é usada para permitir que você importe fontes no seu DOM, onde você precisa. Um suporte é adicionado para permitir que você controla a propriedade CSS de exibição de fontes do @font-face , para que você possa otimizar a ordem de carregamento de suas fontes programaticamente (pelo menos em contextos SSR).

Para maior conveniência, essa biblioteca também pode gerar arquivos CSS individuais que carregam uma única @font-face , bem como arquivos SCSS que carregam uma única @font-face para a qual a propriedade CSS-Display-Display pode ser controlada por meio de um @use with o AT-Rule.

Instalação

npm

 npm install --save-dev fontface-styled-components

fio

 yarn add -D fontface-styled-components

Dependências opcionais

Fontforge

Suporte de formato de entrada

TrueType

Suportado por padrão.

OpenType

Você deve instalar o FontForge e ter o binário fontforge no seu $PATH . Se estiver instalado, um script de conversão converterá fontes OpenType em TrueType como parte do processo de construção.

Uso:

Para gerar suas fontes e arquivos CSS-in-JS, use e adapte o seguinte 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 carregar uma fonte no DOM de uma de suas páginas, use e adapte o seguinte 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 >

Saída típica:

Importar o arquivo Catamaran-bold.ttf normalmente resultaria no seguinte arquivo CSS-in-JS sendo gerado:

 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 }

Opções:

Soucedir:

Caminho para a pasta que contém fontes TTF de origem.

Padrão : 'assets/fonts/'

fontoutputDir:

Caminho para a pasta de destino para que as fontes convertidas sejam colocadas. A fonte TTF original também será copiada nesta pasta.

Padrão : 'dist/fonts/'

Fontspublicdir:

Caminho das fontes em seu servidor de produção, que será usado nos seus URLs de declaração @font-face .

Padrão : '/public/fonts/'

resistindo componentes:

Se deve gerar arquivos @fontface para componentes com estilo.

Padrão : true

StyledOutputDir:

Caminho para a pasta de destino para onde escrever arquivos CSS-in-JS para. Cada arquivo de fonte de origem terá seu próprio arquivo CSS-in-JS.

Padrão : 'dist/src/fontfaces/'

Withcss:

Se deve gerar arquivos de baunilha CSS @Fontface.

Padrão : false

cssOutputDir:

Caminho para a pasta de destino onde escrever arquivos de declaração CSS @Fontface para. Cada arquivo de fonte de origem terá seu próprio arquivo CSS.

Padrão : 'dist/src/fontfaces/'

Withscss:

Se deve gerar arquivos SCSS Mixin para cada fonte.

Padrão : false

scssOutputDir:

Caminho para a pasta de destino para onde escrever mixins SCSS. Cada arquivo de fonte de origem terá seu próprio arquivo SCSS.

Padrão : 'dist/src/fontfaces/'

WithLocal:

Um sinalizador para adicionar uma fonte local às declarações @fontface. Somente recomendado quando o seu projeto deve ser implantado em ambientes B2B ou dispositivos de ponto de venda, onde você pode garantir que a fonte local seja idêntica à que você pretende servir, pois eles geralmente variam em dispositivos de consumo.

Padrão : true para compatibilidade com versões anteriores, mas recomendamos que você o defina como false

FontDisplay:

Se definido, aplica uma propriedade Fonte-Display a todos os arquivos @fontface indiscriminadamente. Isso se destina principalmente a definir um padrão que substituirá por sua própria lógica após a compra, ou se deseja definir um padrão e editar manualmente arquivos @fontface específicos.

Se não for definido, 'auto' será usado por padrão para arquivos CSS. Para arquivos CSS-in-JS, um parâmetro literal de modelo será injetado, que primeiro lê props.fontDisplay e que retorna 'auto' se esse suporte for não definido.

Padrão : null

permissor:

Um sinalizador para permitir um diretório de entrada vazio. Útil para quando você usa fontface-styled-components em um ambiente programático. Se false , um erro será lançado quando nenhuma fonte for encontrada no diretório de entrada.

Padrão : false

forcerefresh:

Um sinalizador para forçar a regeneração de todas as fontes de entrada, mesmo quando já estão presentes no diretório de saída. Isso é desativado por padrão, porque a geração de fontes para grandes projetos da Web pode afetar significativamente os tempos de construção. Recomendamos que você sempre habilite essa bandeira para as compilações de produção.

Padrão : false