metrics: Add weight and italics support

[michaeltaranto]

Add support for importing metrics for specific weights and italics. While internal font metrics typically do not differ between variants, the xWidthAvg metric is calculated based on the average character width, and this will differ between variants.

Available variants will differ by font, and follow the same variant naming as Google Fonts:

import arial from '@capsizecss/metrics/arial'; 
import arialItalic from '@capsizecss/metrics/arial/italic'; 
import arialBold from '@capsizecss/metrics/arial/700'; 
import arialBoldItalic from '@capsizecss/metrics/arial/700italic'; 

Having metrics for different variants improves visual alignment of fallback fonts when using the createFontStack API from the @capsizecss/core package.

Example usage:

import { createFontStack } from '@capsizecss/core';
import montserrat from '@capsizecss/metrics/montserrat';
import montserrat600 from '@capsizecss/metrics/montserrat/600';
import arial from '@capsizecss/metrics/arial';
import arialBold from '@capsizecss/metrics/arial/700'; 

const regular = createFontStack([
  montserrat,
  arial,
]);

// => {
//   "fontFamily": "Montserrat, \"Montserrat Fallback\", Arial",
//   "fontFaces": [
//     {
//       "@font-face": {
//         "fontFamily": "\"Montserrat Fallback\"",
//         "src": "local('Arial'), local('ArialMT')",
//         "ascentOverride": "85.7923%",
//         "descentOverride": "22.2457%",
//         "lineGapOverride": "0%",
//         "sizeAdjust": "112.8307%"
//       }
//     }
//   ]
// }

const bold = createFontStack(
  [
    montserrat600,
    arialBold,
  ],
  {
    fontFaceProperties: {
      fontWeight: 700
    },
  },
);

// => {
//   "fontFamily": "Montserrat, \"Montserrat Fallback\", Arial",
//   "fontFaces": [
//     {
//       "@font-face": {
//         "fontWeight": 700,
//         "fontFamily": "\"Montserrat Fallback\"",
//         "src": "local('Arial Bold'), local('Arial-BoldMT')",
//         "ascentOverride": "89.3502%",
//         "descentOverride": "23.1683%",
//         "lineGapOverride": "0%",
//         "sizeAdjust": "108.3377%"
//       }
//     }
//   ]
// }

[changeset-bot]

🦋 Changeset detected

Latest commit: 7c33fc6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@capsizecss/metrics	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[askoufis]

Just some small comments, nothing blocking.