This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.
Creates metrics-based @font-face declarations to improve the alignment of font family fallbacks, which can dramatically improve the Cumulative Layout Shift metric for sites that depend on a web font.
Example usage
import { createFontStack } from '@capsizecss/core';
import lobster from '@capsizecss/metrics/lobster';
import helveticaNeue from '@capsizecss/metrics/helveticaNeue';
import arial from '@capsizecss/metrics/arial';
const { fontFamily, fontFaces } = createFontStack([
lobster,
helveticaNeue,
arial,
]);
The returned values are the computed font family and the generated font face declarations:
Previously the FontMetrics type captured only the metrics required by the options for the createStyleObject and createStyleString APIs.
With additional APIs coming that require a different subset of metrics, the type now reflects the structure of the data from the metrics package.
The additional properties are: familyName, category, xHeight and xWidthAvg.
See documentation for more details.
This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.
Releases
@capsizecss/metrics@1.0.0
Major Changes
#125
5d77f47
Thanks @michaeltaranto! - metrics, unpack: Cut v1 releaseNo actual breaking change here, but cutting the v1 release to mark the packages moving out of experimental phase.
Minor Changes
#122
8a15c86
Thanks @michaeltaranto! - Update Google Fonts#122
8a15c86
Thanks @michaeltaranto! - Calculate and exposexWidthAvg
, the average width of lowercase characters.#122
8a15c86
Thanks @michaeltaranto! - Addcategory
field to describe the style of the font, e.g. “serif”, “sans-serif” etc.Exposes the
category
field captured by Google Fonts, manually populating it for system fonts.@capsizecss/unpack@1.0.0
Major Changes
#125
5d77f47
Thanks @michaeltaranto! - metrics, unpack: Cut v1 releaseNo actual breaking change here, but cutting the v1 release to mark the packages moving out of experimental phase.
Minor Changes
#122
8a15c86
Thanks @michaeltaranto! - Calculate and exposexWidthAvg
, the average width of lowercase characters.@capsizecss/core@3.1.0
Minor Changes
#117
0e969d8
Thanks @michaeltaranto! - AddcreateFontStack
for metrics-based font family fallbacks.Creates metrics-based
@font-face
declarations to improve the alignment of font family fallbacks, which can dramatically improve the Cumulative Layout Shift metric for sites that depend on a web font.Example usage
The returned values are the computed font family and the generated font face declarations:
Patch Changes
#122
8a15c86
Thanks @michaeltaranto! - Add additional properties toFontMetrics
type definition.Previously the
FontMetrics
type captured only the metrics required by the options for thecreateStyleObject
andcreateStyleString
APIs. With additional APIs coming that require a different subset of metrics, the type now reflects the structure of the data from themetrics
package.The additional properties are:
familyName
,category
,xHeight
andxWidthAvg
. See documentation for more details.