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.