 Dans cette vidéo, nous allons voir les polices de caractère qui sont fluides. Qu'est-ce qu'une typo fluide ou une police de caractère ? C'est simplement qu'elle va s'adapter en fonction de la taille de l'écran. Je te fais une démo, je vais vers une page, j'ai une page dédiée sur mon site en local. J'inspec, je passe en mode mobile et je peux redimensionner la fenêtre. Pour l'instant, la seule qui est fluide, c'est le texte qui est très très grand. Tu vois que si je redimensionne mon écran, les polices qui sont ici ne bougent pas au niveau de la taille. Par contre, le dernier, tu vois que ça change en fonction de la taille de l'écran. Donc c'est ça, une police qui est fluide. Je te montre comment est réglée cette page dans le back-office. J'ai à chaque fois pris un paragraph et j'ai créé mes propres tailles. Donc taille c'est petit, ensuite la prochaine, c'est normal, c'est grand et le dernier, c'est très grand. Je te montre ce que ça donne dans le fichier de mon thème. Je suis dans le fichier Thames Jason et la première chose à faire, c'est qu'il faut déclarer que c'est fluide. Donc je suis dans le groupe typographie. C'est un objet qui dépend de settings et je déclare que c'est fluide, tru. Par défaut, je te montre et tu as toujours les réglages par défaut quand tu es dans Thames Jason. Il faut se laisser guider par l'auto-completion. Si je tape fluide, tu vois que par défaut, c'est false. Donc là, je vais mettre sur tru. Ça, c'est le premier réglage. Ensuite, je déclare une bibliothèque de taille de police. Alors c'est un objet qui s'appelle font size et à chaque fois, j'ajoute des objets pour déclarer des tailles. Donc j'ai c'est petit, la valeur donc size, slug, le slug. Je reprends les slugs qui sont natifs à WordPress. Du coup, ça remplace automatiquement par mes propres tailles. J'ai créé quelques tailles, c'est petit, c'est normal, c'est grand et la dernière, c'est très grand. Comment déclarer que c'est fluide ? Enfin plutôt comment ajouter les valeurs qui permettent le changement en fonction de la taille de l'écran. Eh bien, j'ajoute sur réglages fluides. Je mets max et min. Donc ça va être minimum 2 REM, maximum 5 REM. La valeur normale sera 3 REM. Donc je vais te faire sur le normal pour te montrer. Alors je peux me placer avant ou après peu importe. On se laisse guider par l'autocomplétion, donc max. Donc là on était à 1 REM, on va mettre 2 REM. Et tu vois qu'il me propose que min, parce qu'il a repéré que max était déjà implémenté. Attention, cette autocomplétion marche avec Visual Code Studio. Et la valeur par défaut c'était 1 REM, donc on va mettre 0.8 REM. On n'est pas obligé de mettre 0 devant. J'enregistre, je repars sur la page pour te montrer ce que ça donne. Je suis à nouveau sur le site, je repars sur la page de prévisualisation. Je recharge ma page et tu vois que le normal a changé. Toi, si j'augmente et il réduit en fonction de la taille de l'écran. Alors évidemment, il faudrait penser un peu mieux la hiérarchie pour tous les éléments. Mais pour l'instant, là je te montre juste le principe. Après, tu peux l'appliquer à tous les réglages que tu aurais déjà installé. Donc tu vois que le normal fonctionne. Je vais te refaire la même chose pour le grand. Je repartis dans Visual Code, Autocomplétion, Attention, IMSOOLING, Généreur, je oublie la virgule. Le point dans l'objet, je déclarerai les deux. Donc max, tu vois, il me propose soit max ou min. Donc on était à 1.8, on va mettre 2.5 REM comme min. On était à 1.8, on va faire 1.5, 1.3. L'idée c'est pas de tout caler, c'est plutôt que tu comprennes le principe. J'enregistre, je suis reparti sur ma page, je recharge. Et donc là tu vois que ça a été mis à jour pour ses grands. Et toutes les polices sont fluides, à part celle qui est ses petits. Mais voilà, ça sera la même logique. Ça c'est une vraie avancée dans les thèmes qui reposent sur des blocs. Donc les thèmes Full City Ditting. Parce que du coup, avec un réglage de base et qui est intégré automatiquement dans le back-office, on peut sans mediacquéries changer la taille des polices automatiquement en fonction de la taille d'écran.