Support font-weight, font-style and font-stretch @font-face properties

[kilobyte2007]

Support font-weight, font-style, and font-stretch @font-face properties as discussed in #53

[kilobyte2007]

I see there's no enough test coverage for the new code I suppose but I am not entirely sure what tests should I implement. Can you point me, please?

[codecov-commenter]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (9099053) 100.00% compared to head (372edc3) 100.00%.

Additional details and impacted files

@@            Coverage Diff            @@
##              main      #264   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            2         2           
  Lines          197       230   +33     
  Branches        31        37    +6     
=========================================
+ Hits           197       230   +33     

Files Changed	Coverage Δ
src/css.ts	100.00% <100.00%> (ø)

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[kilobyte2007]

@danielroe looking into this now, thanks for the tweaks!

[kilobyte2007]

I have missed the Roboto and Inter font-face definitions in the index.css file, which seems to have fixed the issue in part, but now the issue is that capsize sets the same metrics for the bold font as it sets for the non-bold one (which I think is correct if I verify the numbers here - https://seek-oss.github.io/capsize/).

Does this mean that this PR is useless and the way it worked previously is enough?

@font-face {
  font-family: "Inter fallback";
  src: local("Arial");
  size-adjust: 107.4014%;
  ascent-override: 90.199%;
  descent-override: 22.4836%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2')
    format('woff2');
}

@font-face {
  font-family: "Inter fallback";
  src: local("Arial");
  size-adjust: 107.4014%;
  ascent-override: 90.199%;
  descent-override: 22.4836%;
  line-gap-override: 0%;
  font-weight: 700;
}
@font-face {
  font-family: 'Inter';
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hiJ-Ek-_EeA.woff2')
    format('woff2');
}

[danielroe]

This may be an upstream issue to raise in capsize in that case. We can pend this PR until there are different metrics available for different weights.

[DamianGlowala]

In theory, there is a way to obtain different metrics for different font weights e.g. through dropping each font file here and collecting relevant metrics from the 'Data' tab. However, as Daniel mentioned, it would be much nicer if capsize provided these alongside the already existing metrics for the normal font weight.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 90.24390% with 4 lines in your changes are missing coverage. Please review.

Project coverage is 57.43%. Comparing base (301ea44) to head (6a138f1).

Files	Patch %	Lines
src/transform.ts	0.00%	4 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #264      +/-   ##
==========================================
+ Coverage   54.01%   57.43%   +3.41%     
==========================================
  Files           4        4              
  Lines         361      397      +36     
  Branches       33       39       +6     
==========================================
+ Hits          195      228      +33     
- Misses        166      169       +3     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.