capsize
@capsizecss
Capsize hace que el tamaño y el diseño del texto sean predecibles como cualquier otro elemento en la pantalla.
Usando metadatos de fuente, el texto ahora se puede dimensionar de acuerdo con la altura de sus letras mayúsculas mientras recorta el espacio por encima de las letras mayúsculas y debajo de la línea de base.
npm install @capsizecss/corefont-facecreateStyleObjectDevuelve un objeto de estilo CSS-in-JS.
createStyleObject pasando las opciones 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: Se recomienda que instale el paquete @Capsizecss/Metrics e importe las métricas desde allí:
import { createStyleObject } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;Consulte la opción FontMetrics documentada a continuación para obtener más formas de obtener estas métricas.
css . < div
css = { {
// fontFamily: '...' etc,
... capsizeStyles ,
} }
>
My capsized text ?
< / div>
️ Nota: No se recomienda aplicar más estilos de diseño relacionados con el mismo elemento, ya que esto se arriesgará a interferir con los estilos utilizados para el ajuste. En su lugar, considere usar un elemento anidado.
createStyleString Devuelve una cadena CSS que se puede insertar en una etiqueta style o adjunto a una hoja de estilo.
createStyleString pasando las opciones relevantes. import { createStyleString } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizedStyleRule = createStyleString ( 'capsizedText' , {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;style y aplique el nombre de clase especificado. document . write ( `
<style type="text/css">
${ capsizedStyleRule }
</style>
<div class="capsizedText">
My capsized text ?
</div>
` ) ;
️ Nota: No se recomienda aplicar más estilos de diseño relacionados con el mismo elemento, ya que esto se arriesgará a interferir con los estilos utilizados para el ajuste. En su lugar, considere usar un elemento anidado.
Capbetize admite dos métodos para definir el tamaño del texto, capHeight y fontSize .
Nota: Solo debe pasar uno u otro, no ambos.
capHeight: <number>Establece la altura de las letras mayúsculas al valor definido. La definición de la tipografía de esta manera hace que la alineación con una cuadrícula o con otros elementos, por ejemplo, íconos, una brisa.
fontSize: <number> Establecer el tamaño de fuente le permite obtener todos los beneficios del recorte de espacio en blanco, al tiempo que especifica un font-size explícito para su texto. Esto puede ser útil cuando sea necesario para que coincida con una especificación de diseño de concreto o ajuste en un producto existente.
Capsize admite dos modelos mentales para especificar la altura de la línea, lineGap y leading . Si no pasa, el texto seguirá el espaciado predeterminado de la fuente especificada, por ejemplo, line-height: normal .
Nota: Solo debe pasar uno u otro, no ambos.
lineGap: <number>Establece el número de píxeles entre líneas, medido entre la línea de base y la altura de la tapa de la siguiente línea.
leading: <number>Establece la altura de la línea en el valor proporcionado medido desde la línea de base del texto. Esto alinea la web con cómo se trata la tipografía en las herramientas de diseño.
Estos metadatos se extraen de las tablas de métricas dentro de la fuente en sí. Hay varias formas de encontrar esta información:
Si usa una fuente de Google o fuente del sistema, instale el paquete @Capsizecss/Metrics e importe las métricas por nombre. Por ejemplo:
import arialMetrics from '@capsizecss/metrics/arial' ;Si usa una fuente de un archivo, instale el paquete @Capsizecss/Desempaquete y extraiga las métricas del archivo de fuentes directamente. Por ejemplo:
import { fromFile } from '@capsizecss/unpack' ;
const metrics = await fromFile ( filePath ) ; O use el sitio web de Capsize para encontrarlos seleccionando una fuente y una pestaña de Metrics de referencia en el paso 3.
El paquete central también proporciona algunas otras características basadas en métricas para mejorar la tipografía en la web:
Crea declaraciones de @font-face basadas en métricas para mejorar la alineación de las personas con la familia de fuentes, lo que puede mejorar drásticamente la métrica de cambio de diseño acumulativo para los sitios que dependen de una fuente web.
Considere el siguiente ejemplo, donde la fuente web deseada es la langosta, que regresa a Helvetica Neue y luego Arial , por ejemplo font-family: Lobster, 'Helvetica Neue', Arial .
createFontStack desde el paquete central: 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 ,
] ) ; El valor devuelto contiene las declaraciones generadas de la cara de fuente, así como la fontFamily calculada con los alias de fuentes ordenados apropiadamente.
Los valores devueltos se pueden templar en una hoja de estilo o en un bloque style . Aquí hay un ejemplo de plantilla de manillares:
< style type =" text/css " >
.heading {
font-family: {{ fontFamily }}
}
{{ fontFaces }}
</ style >Esto producirá el siguiente 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 % ;
} Si trabaja con una biblioteca CSS-in-JS, las fontFaces devueltas se pueden proporcionar como un objeto de estilo JavaScript proporcionando styleObject como una opción fontFaceFormat .
Aquí hay un ejemplo usando emoción:
import { Global } from '@emotion/core' ;
const { fontFaces , fontFamily } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceFormat : 'styleObject' ,
} ,
) ;
export const App = ( ) => (
< >
< Global styles = { fontFaces } / >
< p css = { { fontFamily } } > ... < / p >
< / >
) ;También es útil como fuente para una mayor manipulación, dado que es una estructura de datos que se puede iterarse o extenderse.
font-face Se pueden agregar propiedades adicionales a las declaraciones generadas @font-face a través de la opción fontFaceProperties :
const { fontFamily , fontFaces } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceProperties : {
fontDisplay : 'swap' ,
} ,
} ,
) ;Esto dará como resultado las siguientes adiciones a las declaraciones:
@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;
}Nota
El paso de cualquiera de las propiedades CSS de anulación métrica se ignorará a medida que se calculen por Capsize. Sin embargo, la propiedad size-adjust se acepta para admitir el ajuste de la anulación para casos de uso particulares. Esto se puede usar para reflexionar el ajuste por un texto específico o para deshabilitar el ajuste estableciéndolo al 100% .
Para los idiomas que usan diferentes subconjuntos unicode, por ejemplo, Thai, las alojamiento deben escalarse en consecuencia, ya que la escala se basa en la frecuencia de caracteres en el lenguaje escrito.
Se puede generar una pila de fuentes respaldadas para un subconjunto compatible especificando subset como una opción:
const { fontFamily , fontFaces } = createFontStack ( [ lobster , arial ] , {
subset : 'thai' ,
} ) ; Consejo
¿Necesita soporte para un subconjunto unicode diferente? Cree un problema o siga los pasos descritos en el script generate-weightings y abra un PR.
Devuelve toda la información requerida para crear estilos de recorte principales para un tamaño de fuente específico dadas las métricas de fuentes proporcionadas. Esto es útil para integraciones con diferentes soluciones de estilo.
Acepta las mismas opciones que CreateStyleObject y 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,
//}Devuelva la altura de la tapa renderizada para un tamaño de fuente específico dadas las métricas de fuente proporcionadas.
import { getCapHeight } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const actualCapHeight = getCapHeight ( {
fontSize : 24 ,
fontMetrics : arialMetrics ,
} ) ;
// => number Para facilitar la recuperación de las métricas de fuentes, Capsize proporciona el paquete de @capsizecss/metrics que contiene todos los datos requeridos tanto para el sistema como para las fuentes de Google.
npm install @capsizecss/metricsVea el paquete para la documentación.
Si está utilizando una fuente personalizada o una no incluida en el paquete de @capsizecss/metrics , Capsize proporciona el paquete @capsizecss/unpack para extraer los datos requeridos a través de una URL o desde un archivo local.
npm install @capsizecss/unpackVea el paquete para la documentación.
Mit.
