capsize
@capsizecss
Capsize torna o dimensionamento e o layout do texto tão previsíveis quanto todos os outros elementos da tela.
Usando os metadados da fonte, o texto agora pode ser dimensionado de acordo com a altura de suas letras maiúsculas enquanto apara o espaço acima das letras maiúsculas e abaixo da linha de base.
npm install @capsizecss/corefont-facecreateStyleObjectRetorna um objeto de estilo CSS-in-JS.
createStyleObject Passando as opções relevantes. import { createStyleObject } from '@capsizecss/core' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : {
capHeight : 700 ,
ascent : 1058 ,
descent : - 291 ,
lineGap : 0 ,
unitsPerEm : 1000 ,
} ,
} ) ;NOTA: Recomenda -se que você instale o pacote @capsizecss/métricas e importe as métricas a partir daí:
import { createStyleObject } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;Consulte a opção FontMetrics documentada abaixo para obter mais maneiras de obter essas métricas.
css . < div
css = { {
// fontFamily: '...' etc,
... capsizeStyles ,
} }
>
My capsized text ?
< / div>
️ Nota: Não é recomendável aplicar outros estilos relacionados ao layout ao mesmo elemento, pois isso corre o risco de interferir nos estilos usados para a guarnição. Em vez disso, considere usar um elemento aninhado.
createStyleString Retorna uma sequência CSS que pode ser inserida em uma etiqueta style ou anexada a uma folha de estilo.
createStyleString Passando as opções relevantes. import { createStyleString } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizedStyleRule = createStyleString ( 'capsizedText' , {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;style e aplique o nome da classe especificado. document . write ( `
<style type="text/css">
${ capsizedStyleRule }
</style>
<div class="capsizedText">
My capsized text ?
</div>
` ) ;
️ Nota: Não é recomendável aplicar outros estilos relacionados ao layout ao mesmo elemento, pois isso corre o risco de interferir nos estilos usados para a guarnição. Em vez disso, considere usar um elemento aninhado.
O Capsize suporta dois métodos para definir o tamanho do texto, capHeight e fontSize .
Nota: você só deve passar um ou outro, não os dois.
capHeight: <number>Define a altura das letras maiúsculas para o valor definido. Definir a tipografia dessa maneira se alinha a uma grade ou com outros elementos, por exemplo, ícones, uma brisa.
fontSize: <number> Definir o tamanho da fonte permite obter todos os benefícios do corte do espaço em branco, enquanto ainda especifica um font-size explícito para o seu texto. Isso pode ser útil quando necessário para corresponder a uma especificação de design de concreto ou encaixar em um produto existente.
Capsize suporta dois modelos mentais para especificar altura de linha, lineGap e leading . Se você passar, nem o texto seguirá o espaçamento padrão da fonte especificada, por exemplo, line-height: normal .
Nota: você só deve passar um ou outro, não os dois.
lineGap: <number>Define o número de pixels entre as linhas, conforme medido entre a linha de base e a altura da tampa da próxima linha.
leading: <number>Define a altura da linha para o valor fornecido, medido a partir da linha de base do texto. Isso alinha a Web com a forma como a tipografia é tratada em ferramentas de design.
Este metadata é extraído das tabelas de métricas dentro da própria fonte. Existem várias maneiras de encontrar essas informações:
Se estiver usando uma fonte do Google ou fonte do sistema, instale o pacote @capsizecss/métricas e importe as métricas por nome. Por exemplo:
import arialMetrics from '@capsizecss/metrics/arial' ;Se estiver usando uma fonte de um arquivo, instale o pacote @CapSizecss/Unpack e extraia as métricas diretamente do arquivo de fonte. Por exemplo:
import { fromFile } from '@capsizecss/unpack' ;
const metrics = await fromFile ( filePath ) ; Ou use o site Capsize para encontrá -los selecionando uma fonte e referenciando a guia Metrics na Etapa 3.
O pacote principal também fornece alguns outros recursos baseados em métricas para melhorar a tipografia na web:
Cria declarações @font-face baseadas em métricas para melhorar o alinhamento dos fallbacks da família de fontes, o que pode melhorar drasticamente a métrica de mudança de layout cumulativa para sites que dependem de uma fonte da web.
Considere o exemplo a seguir, onde a fonte da web desejada é a lagosta, voltando para Helvetica Neue e depois Arial , por exemplo, font-family: Lobster, 'Helvetica Neue', Arial .
createFontStack do pacote principal: import { createFontStack } from '@capsizecss/core' ; import lobster from '@capsizecss/metrics/lobster' ;
import helveticaNeue from '@capsizecss/metrics/helveticaNeue' ;
import arial from '@capsizecss/metrics/arial' ;font-family . const { fontFamily , fontFaces } = createFontStack ( [
lobster ,
helveticaNeue ,
arial ,
] ) ; O valor retornado contém as declarações de face da fonte gerada, bem como a fontFamily calculada com os aliases de fonte adequadamente ordenados.
Os valores retornados podem ser modificados em uma folha de estilo ou em um bloco style . Aqui está um exemplo de modelo do guidão:
< style type =" text/css " >
.heading {
font-family: {{ fontFamily }}
}
{{ fontFaces }}
</ style >Isso produzirá o seguinte CSS:
. heading {
font-family : Lobster , 'Lobster Fallback: Helvetica Neue' ,
'Lobster Fallback: Arial' , 'Helvetica Neue' , Arial;
}
@font-face {
font-family : 'Lobster Fallback: Helvetica Neue' ;
src : local ( 'Helvetica Neue' );
ascent-override : 115.1741 % ;
descent-override : 28.7935 % ;
size-adjust : 86.8251 % ;
}
@font-face {
font-family : 'Lobster Fallback: Arial' ;
src : local ( 'Arial' );
ascent-override : 113.5679 % ;
descent-override : 28.392 % ;
size-adjust : 88.053 % ;
} Se estiver trabalhando com uma biblioteca CSS-in-JS, os fontFaces retornados podem ser fornecidos como um objeto de estilo JavaScript, fornecendo styleObject como uma opção fontFaceFormat .
Aqui está um exemplo usando emoção:
import { Global } from '@emotion/core' ;
const { fontFaces , fontFamily } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceFormat : 'styleObject' ,
} ,
) ;
export const App = ( ) => (
< >
< Global styles = { fontFaces } / >
< p css = { { fontFamily } } > ... < / p >
< / >
) ;Também é útil como fonte de manipulação adicional, uma vez que é uma estrutura de dados que pode ser iterada ou estendida.
font-face Propriedades adicionais podem ser adicionadas às declarações geradas @font-face através da opção fontFaceProperties :
const { fontFamily , fontFaces } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceProperties : {
fontDisplay : 'swap' ,
} ,
} ,
) ;Isso resultará nas seguintes adições às declarações:
@font-face {
font-family: 'Lobster Fallback: Helvetica Neue';
src: local('Helvetica Neue');
ascent-override: 115.1741%;
descent-override: 28.7935%;
size-adjust: 86.8251%;
+ font-display: swap;
}
@font-face {
font-family: 'Lobster Fallback: Arial';
src: local('Arial');
ascent-override: 113.5679%;
descent-override: 28.392%;
size-adjust: 88.053%;
+ font-display: swap;
}Observação
A passagem de qualquer uma das propriedades de CSS de substituição métrica será ignorada à medida que são calculadas pelo capsize. No entanto, a propriedade size-adjust é aceita para apoiar o ajuste fino da substituição para casos de uso específicos. Isso pode ser usado para refinar o ajuste para texto específico ou para desativar o ajuste, definindo -o para 100% .
Para idiomas que usam diferentes subconjuntos de unicode, por exemplo, os fallbacks precisam ser escalados de acordo, pois a escala é baseada na frequência do caractere na linguagem escrita.
Uma pilha de fontes de fallback pode ser gerada para um subconjunto suportado, especificando subset como uma opção:
const { fontFamily , fontFaces } = createFontStack ( [ lobster , arial ] , {
subset : 'thai' ,
} ) ; Dica
Precisa de suporte para um subconjunto Unicode diferente? Crie um problema ou siga as etapas descritas no script generate-weightings e abra um PR.
Retorna todas as informações necessárias para criar estilos de acabamento líder para um tamanho de fonte específico, dadas as métricas de fonte fornecidas. Isso é útil para integrações com diferentes soluções de estilo.
Aceita as mesmas opções que o CreateStyleObject e CreateStyLestring.
import { precomputeValues } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizeValues = precomputeValues ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;
// => {
// fontSize: string,
// lineHeight: string,
// capHeightTrim: string,
// baselineTrim: string,
//}Retorne a altura da tampa renderizada para um tamanho de fonte específico, dadas as métricas de fonte fornecidas.
import { getCapHeight } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const actualCapHeight = getCapHeight ( {
fontSize : 24 ,
fontMetrics : arialMetrics ,
} ) ;
// => number Para facilitar a recuperação das métricas de fonte, o Capsize fornece o pacote @capsizecss/metrics que contêm todos os dados necessários para o sistema e o Google Fontes.
npm install @capsizecss/metricsConsulte o pacote para documentação.
Se você estiver usando uma fonte personalizada ou uma não incluída no pacote @capsizecss/metrics , o Capsize fornece o pacote @capsizecss/unpack para extrair os dados necessários por meio de um URL ou de um arquivo local.
npm install @capsizecss/unpackConsulte o pacote para documentação.
Mit.
