|
1 | 1 | # @capsizecss/metrics |
2 | 2 |
|
| 3 | +## 3.6.0 |
| 4 | + |
| 5 | +### Minor Changes |
| 6 | + |
| 7 | +- [#235](https://github.com/seek-oss/capsize/pull/235) [`9776218`](https://github.com/seek-oss/capsize/commit/9776218d41ed1e28fbf98f0820ee6472eff726d0) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Update Google Fonts |
| 8 | + |
3 | 9 | ## 3.5.0 |
4 | 10 |
|
5 | 11 | ### Minor Changes |
|
30 | 36 | Available variants will differ by font, and follow the same variant naming as Google Fonts: |
31 | 37 |
|
32 | 38 | ```ts |
33 | | - import arial from '@capsizecss/metrics/arial'; |
34 | | - import arialItalic from '@capsizecss/metrics/arial/italic'; |
35 | | - import arialBold from '@capsizecss/metrics/arial/700'; |
36 | | - import arialBoldItalic from '@capsizecss/metrics/arial/700italic'; |
| 39 | + import arial from "@capsizecss/metrics/arial"; |
| 40 | + import arialItalic from "@capsizecss/metrics/arial/italic"; |
| 41 | + import arialBold from "@capsizecss/metrics/arial/700"; |
| 42 | + import arialBoldItalic from "@capsizecss/metrics/arial/700italic"; |
37 | 43 | ``` |
38 | 44 |
|
39 | 45 | Having metrics for different variants improves visual alignment of fallback fonts when using the `createFontStack` API from the `@capsizecss/core` package. |
40 | 46 |
|
41 | 47 | Example usage: |
42 | 48 |
|
43 | 49 | ```ts |
44 | | - import { createFontStack } from '@capsizecss/core'; |
45 | | - import montserrat from '@capsizecss/metrics/montserrat'; |
46 | | - import montserrat600 from '@capsizecss/metrics/montserrat/600'; |
47 | | - import arial from '@capsizecss/metrics/arial'; |
48 | | - import arialBold from '@capsizecss/metrics/arial/700'; |
| 50 | + import { createFontStack } from "@capsizecss/core"; |
| 51 | + import montserrat from "@capsizecss/metrics/montserrat"; |
| 52 | + import montserrat600 from "@capsizecss/metrics/montserrat/600"; |
| 53 | + import arial from "@capsizecss/metrics/arial"; |
| 54 | + import arialBold from "@capsizecss/metrics/arial/700"; |
49 | 55 |
|
50 | 56 | const regular = createFontStack([montserrat, arial]); |
51 | 57 |
|
|
122 | 128 |
|
123 | 129 | ```css |
124 | 130 | @font-face { |
125 | | - font-family: 'Web Font Fallback'; |
126 | | - src: local('Arial Bold'), local('Arial-BoldMT'); |
| 131 | + font-family: "Web Font Fallback"; |
| 132 | + src: local("Arial Bold"), local("Arial-BoldMT"); |
127 | 133 | font-weight: 700; |
128 | 134 | ascent-override: 89.3502%; |
129 | 135 | descent-override: 23.1683%; |
|
154 | 160 | ``` |
155 | 161 |
|
156 | 162 | With only a small number of Google Fonts affected, this is only a break for the following fonts: |
157 | | - |
158 | 163 | - Ballet |
159 | 164 | - Bodoni Moda |
160 | 165 | - Buda |
|
242 | 247 |
|
243 | 248 | ```ts |
244 | 249 | const { fontFamily, fontFaces } = createFontStack([lobster, arial], { |
245 | | - subset: 'thai', |
| 250 | + subset: "thai", |
246 | 251 | }); |
247 | 252 | ``` |
248 | 253 |
|
|
271 | 276 | Migrating Capsize packages to be precompiled with [Crackle], with a key change being Crackle now handles entry points instead of [Preconstruct]. |
272 | 277 |
|
273 | 278 | Other benefits include: |
274 | | - |
275 | 279 | - Modern module entry point syntax using the ["exports" field] with better tooling compatibility. |
276 | 280 | - Improved types and better ESM and CJS compatibility |
277 | 281 | - Better alignment between compiled code and module entry points |
|
346 | 350 | A helper function to support tooling that needs to convert the font family name to the correct casing for the relevant metrics import. |
347 | 351 |
|
348 | 352 | ```ts |
349 | | - import { fontFamilyToCamelCase } from '@capsizecss/metrics'; |
| 353 | + import { fontFamilyToCamelCase } from "@capsizecss/metrics"; |
350 | 354 |
|
351 | | - const familyName = fontFamilyToCamelCase('--apple-system'); // => `appleSystem` |
| 355 | + const familyName = fontFamilyToCamelCase("--apple-system"); // => `appleSystem` |
352 | 356 | const metrics = await import(`@capsizecss/metrics/${familyName}`); |
353 | 357 | ``` |
354 | 358 |
|
|
365 | 369 | *** |
366 | 370 |
|
367 | 371 | ```ts |
368 | | - import { entireMetricsCollection } from '@capsizecss/metrics/entireMetricsCollection'; |
| 372 | + import { entireMetricsCollection } from "@capsizecss/metrics/entireMetricsCollection"; |
369 | 373 |
|
370 | | - const metrics = entireMetricsCollection['arial']; |
| 374 | + const metrics = entireMetricsCollection["arial"]; |
371 | 375 | ``` |
372 | 376 |
|
373 | 377 | ## 1.0.1 |
|
381 | 385 | - [#126](https://github.com/seek-oss/capsize/pull/126) [`eb59cde`](https://github.com/seek-oss/capsize/commit/eb59cde65705913ab83abd929ab956403efc881b) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Add more system fonts |
382 | 386 |
|
383 | 387 | Expands the metrics library to include more system fonts. Fonts added are: |
384 | | - |
385 | 388 | - `Tahoma` |
386 | 389 | - `Lucida Grande` |
387 | 390 | - `Verdana` |
|
454 | 457 | TypeScript will now error when providing the metrics, rather than accepting them and rendering incorrectly. |
455 | 458 |
|
456 | 459 | ```ts |
457 | | - import myIncompleteFontMetrics from '@capsizecss/metrics/myIncompleteFont'; |
458 | | - import { createStyleObject } from '@capsizecss/core'; |
| 460 | + import myIncompleteFontMetrics from "@capsizecss/metrics/myIncompleteFont"; |
| 461 | + import { createStyleObject } from "@capsizecss/core"; |
459 | 462 |
|
460 | 463 | createStyleObject({ |
461 | 464 | fontSize: 16, |
|
0 commit comments