Dimanche 01 septembre 2024 à 21:55

J'ai perdu énormément de temps à essayer de passer de ce rendu :

à celui-ci :

De base, j'utilise font-variant-caps: small-caps.

Ensuite, j'ai essayé les paramètres suivants pour obtenir des "lining figures" :

font-variant-numeric: tabular-nums;
font-variant-numeric: oldstyle-nums;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum";

Rien n'y faisait !

J'ai fini par trouver la solution !

J'utilisais le package @fontsource/source-serif-pro or, celui contient des fontes de caractères au format TrueType et non pas OpenType.

$ hexdump -C -n 32 node_modules/@fontsource/source-serif-pro/files/source-serif-pro-latin-200-italic.woff
00000000  77 4f 46 46 00 01 00 00  00 00 5f 4c 00 0e 00 00  |wOFF......_L....|

00 01 00 00 signifie que la fonte de caractères est au format TrueType.

J'ai ensuite installé le package source-serif et cette fois, les Fontes de caractères sont au format OpenType.

$ hexdump -C -n 32 node_modules/source-serif/WOFF2/OTF/SourceSerif4-BoldIt.otf.woff2
00000000  77 4f 46 32 4f 54 54 4f  00 01 47 bc 00 0d 00 00  |wOF2OTTO..G.....|

4f 54 54 4f signifie que la fonte de caractères est au format OpenType.

Avec une fonte de caractères au format OpenType la hauteur des chiffres en small-caps est alignée avec la taille des lettres.