Descargar postcss font pack - Descargar código fuente postcss font pack Descargar

postcss font pack

Descarga de fuentes

1.0.0

Descargar

paquete postcss

El complemento PostCSS para simplificar las declaraciones de fuentes validando solo paquetes de fuentes configurados se utilizan, agregando naufragios y transportando valores de declaración de fuentes legibles por humanos en CSS válidos.

Introducción

Tratar con las fuentes puede ser un dolor, especialmente en equipos donde no todos saben dónde encontrar las fuentes exactas que pueden usar. Como resultado, se cometen errores, se introducen inconsistencias y el mantenimiento se convierte en una pesadilla. PostCSS Font Pack tiene como objetivo resolver este problema con la configuración.

Configuración

Comencemos con los siguientes supuestos:

Estamos utilizando "Times New Roman" porque es una fuente segura web comúnmente utilizada. También ilustra cómo usar fuentes que necesitan citas en este complemento.
Hemos instalado Roboto y ya configuramos su @Font-Face.

Estas fuentes se pueden definir en formato JSON. Puede llamarlo font-packs.json :

{
	"times" : {
		"family" : [ " 'Times New Roman' " , " Times " , " serif " ],
		"propGroups" : [
			{},
			{
				"weight" : [ " bold " , 700 ]
			}
		]
	},
	"roboto" : {
		"family" : [ " Roboto " , " Arial " , " sans-serif " ],
		"propGroups" : [
			{
				"style" : " italic " ,
				"weight" : [ " light " , 300 ],
				"stretch" : " condensed " ,
				"variant" : " small-caps "
			}
		]
	}
}

Con la configuración anterior, podemos escribir nuestro CSS utilizando la propiedad de Font Sporthand:

. foo {
	font : bold 1 rem/1.2 times;
}

. bar {
	font : light condensed italic 1 rem/1.2 roboto;
}

Esto se trasladaría a lo siguiente:

. foo {
	font : 700 1 rem/1.2 'Times New Roman' , Times , serif;
}

. bar {
	font : 300 condensed italic 1 rem/1.2 Roboto , Arial , sans-serif;
}

Observe que el peso se cambió de bold a 700 y de light a 300 . Esto provino de los alias de valor de declaración de la configuración, que se definieron como "weight": ["bold", 700] y "weight": ["light", 300] , respectivamente. Puede hacer esto con cualquiera de los grupos de utilización, pero como style: italic , stretch: condensed y variant: small-caps , solo tenía sentido usar un alias para el peso en este caso. Podría haber aliviado el peso tan bien como "weight": 300 , pero eso no es tan legible como light , que el navegador no entiende.

Además, observe que se agregaron fuentes alternativas a la font-family . Esto le permite mantener su sintaxis fácil de leer/escribir y dejar que el complemento haga el trabajo sucio con la configuración.

No tiene que usar la propiedad de Font Sporthand. También puede escribir cada declaración individualmente o puede usar el complemento postcss-nested-props para habilitar una sintaxis anidada. Solo asegúrese de desenvolver el anidado con ese complemento antes de ejecutar este.

Pelusa

Este complemento también maneja las pelusas para que pueda dormir el sonido sabiendo que nadie está usando fuentes o combinaciones de declaraciones de fuentes que no sean compatibles o vayan en contra del diseño del sitio. Las siguientes reglas arrojarían el mismo error, "Pack No se encuentra":

. foo {
	font-family : "Futura PT" ;
}

. bar {
	font-family : roboto , sans-serif;
}

. baz {
	font : light 1 rem/1.2 roboto;
}

A pesar de que el peso light se encuentra en su configuración, no hay un paquete de fuentes que use light sin usar italic y condensed . Tienes que usarlos juntos para formar un paquete y pasar la pelusa.

Como puede ver, este complemento detendrá las declaraciones de fuentes sin apoyo muertas en sus pistas.

Ignorando secciones

Si necesita ignorar una declaración específica, pero no quiere ignorar toda la hoja de estilo, puede hacerlo precediendo la declaración con un comentario especial:

. foo {
	/* postcss-font-pack: ignore-next */
	font : "Comic Sans" , cursive;
}

Esto hará que el enlace ignore solo el siguiente selector.

También puedes ignorar los rangos:

 /* postcss-font-pack: start-ignore */
. foo {
	font : "Comic Sans" , cursive;
	font-size : 38 px ;
}
/* postcss-font-pack: end-ignore */

Instalación

 $ npm install postcss-font-pack

Uso

Javascript

 postcss ( [
	require ( 'postcss-font-pack' ) ( {
		packs : require ( './font-packs.json' )
	} )
] ) ;

Mecanografiado

 import * as postcssFontPack from 'postcss-font-pack' ;

postcss ( [
	postcssFontPack ( {
		packs : require ( './font-packs.json' )
	} )
] ) ;

Opción

`ignoreDeclarations`

Tipo: { [prop: string]: string; } Requerido: false predeterminado: undefined

Una colección de declaraciones que le gustaría ignorar. Estos podrían ser hacks CSS o algo más que realmente no desea lanzar errores de validación. Ejemplo a continuación:

 {
	ignoreDeclarations : [
		{ font : '0/0 serif' }
	]
}

`requireSize`

Tipo: boolean requerido: false predeterminado: false

Cuando true , se lanzará un error si tiene una regla con una o más declaraciones de fuentes, pero sin un tamaño de fuente.

. foo {
	font-family : roboto;
	/* missing required font-size */
}

Independientemente de esta opción, si tiene una regla con solo un font-size especificado, recibirá un error:

. foo {
	font-size : 1 rem ;
	/* font-size missing required family */
}

`packs`

Tipo: Object requerido: true

Un objeto literal donde las claves son fuentes coladas y los valores son paquetes de fuentes. Cada paquete de fuentes consiste en una family requerida y una colección opcional de grupos de propiedades, nombradas como propGroups .

`pack.family`

Tipo: string[] Requerido: true

Si su babosa de fuentes es times , aquí es donde definiría el nombre de fuente extendido junto con cualquier respaldo.

Nota: Si su nombre de fuente requiere citas, debe agregarlas usted mismo.

`pack.propGroups`

Tipo: PropGroup[] requerido: false

Defina las combinaciones de propiedades que se pueden usar juntas para hacer referencia a una fuente.

`pack.propGroups[n]`

Tipo: PropGroup

Cada grupo de apoyo puede contener 0 o más de las siguientes claves:

weight
style
variant
stretch

Cada valor puede ser una string o una string[] con dos valores. El primer valor es un valor colado que puede escribir en su CSS para hacer referencia a la clave asociada. El segundo valor es en qué se trasladará el primer valor, así que asegúrese de que sean CSS-Válido. Los valores weight también pueden ser números.

Si se proporciona un objeto vacío, esto indica que desea apoyar a esta familia de fuentes con valores de navegador predeterminados para peso, estilo, variante y estiramiento.

Nota: Si no incluye un objeto vacío, no podrá hacer referencia a una familia sin hacer referencia también a propiedades adicionales.