Astuce : faire en sorte que son site s'accorde avec la « Taille du texte » d’iOS et iPadOS

Apple permet de changer la taille de la police système sur iOS et iPadOS, ce qui est bien pratique mais assez inconstant. Cela ne change rien sur la plupart des sites web par exemple, à moins que les développeurs aient fait en sorte de prendre en charge la fonction. Craig Hockenberry a récemment sauté le pas et mis à jour son blog pour le rendre compatible avec « Dynamic Type », une fonction de WebKit présente depuis des années. Sa prise en charge peut se faire avec quelques lignes de CSS.

Le code peut ressembler à cela:

html {
font-size: 0.9em;
font: -apple-system-body;
font-family: 'Avenir Next', 'Helvetica Neue', sans-serif;
}

Ici, il a ajouté la ligne font: -apple-system-body; qui va remplacer la taille de la police définie dans la ligne au-dessus. Malheureusement, cet élément impose également la police système qui ne sera pas forcément au goût de tout le monde. C’est ici qu’intervient font-family, qui permet d’adapter la famille de la police au système sans toucher au sty...