Ouvrir le menu principal

MacGeneration

Recherche

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

Félix Cattafesta

lundi 08 juillet 2024 à 12:30 • 7

macOS

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 style choisi par le designer.

C’est une petite astuce qui permet de rendre un site plus accessible. Craig Hockenberry déplore cependant le fait que la fonction ne soit pas disponible sur macOS et que la taille de la police ne soit pas fixe. Les explications détaillées sont données sur son blog pour les curieux.

illustration magazine 25 ans

MacGeneration a 25 ans !

Participez à la fête et découvrez l’histoire de votre site favori en précommandant notre magazine exclusif.

Je précommande le magazine

Antitrust : le DoJ réclame officiellement que Google vende Chrome

10:32

• 56


Apple, Anker : de nombreux adaptateurs secteur en promo (jusqu’à -33 %)

10:02

• 1


Les meilleures offres de la Black Week. Tout au long du mois de novembre

Partenaire


Le SSD Thunderbolt 5 d'OWC est disponible : le plus rapide du marché, mais aussi le plus cher

20/11/2024 à 21:30

• 14


Test de l’iMac 24" M4 : haut en couleur

20/11/2024 à 20:30

• 26


Promotion Black Friday de Godeal24 : Microsoft Office à - 80 %, c'est maintenant 📍

20/11/2024 à 20:22


macOS 15.2 : quatrième bêta développeur, et troisième bêta publique 🆕

20/11/2024 à 19:56

• 6


Refurb : -220 € sur le MacBook Air M3 en 16/1 To

20/11/2024 à 17:45

• 37


Aqara commercialise aussi un détecteur de fumée connecté compatible HomeKit (avec code promo 🆕)

20/11/2024 à 15:25


Apple vs DoJ : la Pomme va demander à un juge fédéral d’abandonner les poursuites

20/11/2024 à 15:09

• 51


Apple vend désormais elle-même des espaces publicitaires dans Apple News

20/11/2024 à 14:38

• 8


Beats : Erling Haaland fait de la pub à l'ancienne

20/11/2024 à 12:15

• 10


YouTube : IMG_0001 déterre de vieilles vidéos filmées à l’iPhone

20/11/2024 à 11:44

• 9


Incogni en énorme promotion pour le Black Friday, reprenez le contrôle de vos données en ligne ! 📍

20/11/2024 à 10:19


Bluesky dépasse les 20 millions de comptes, dont celui de MacGeneration

20/11/2024 à 09:45

• 99


Pinwheel, un gestionnaire de couleurs destiné aux développeurs par les créateurs d’iStat Menus

20/11/2024 à 08:00

• 9