Hébergez la police vous-même, préchargez le seul fichier nécessaire au premier paint, et utilisez font display swap pour que le texte soit visible tout de suite. Ensuite supprimez le décalage en faisant correspondre les métriques de la police de repli avec size adjust, ascent override et descent override, ou en utilisant une face de repli générée. Sous-ensemblez la police aux caractères que vous utilisez vraiment, ne livrez que du woff2, et évitez de charger plusieurs graisses quand une police variable couvre la plage.
Pourquoi les recruteurs posent cette question
Les polices sont la cause la plus courante de décalage de mise en page et l'un des gains les plus faciles dans une revue de performance. Le recruteur vérifie si vous savez pourquoi le décalage se produit, à savoir une discordance de métriques entre le repli et la vraie face, plutôt que de réciter font display swap. Connaître l'auto-hébergement et le préchargement montre aussi que vous comprenez que les origines tierces coûtent une connexion supplémentaire avant même que la police soit découverte.
Comment structurer votre réponse
- Expliquez pourquoi le décalage se produit : les métriques du repli diffèrent de la vraie face.
- Donnez la stratégie de chargement : auto-hébergement, préchargement, woff2, sous-ensemble.
- Couvrez l'arbitrage de la valeur display entre texte masqué et échange.
- Terminez par les surcharges de métriques qui rendent l'échange imperceptible.
Exemple de réponse
Le décalage se produit parce que la police de repli a des métriques différentes, donc quand la vraie police arrive chaque ligne se recompose et tout ce qui est en dessous bouge. Il y a donc deux problèmes à corriger : quand le texte apparaît, et de combien il bouge quand il change. Pour le premier, j'héberge la police moi-même, je précharge seulement le fichier nécessaire à la vue initiale, et j'utilise font display swap pour que personne ne fixe un bloc de texte vide sur une connexion lente. Pour le second, je surcharge les métriques du repli, size adjust plus les surcharges d'ascent et de descent sur une face de repli locale, pour que le repli occupe presque exactement le même espace et que l'échange soit à peine visible. Au-delà, c'est de l'hygiène : woff2 seulement, sous-ensemble limité au jeu de caractères vraiment utilisé, et une police variable au lieu de quatre graisses statiques. Sur un site qui tirait trois graisses depuis une origine tierce, passer à une police variable auto-hébergée et sous-ensemblée a retiré environ 180 kilo-octets et fait passer le CLS d'environ 0,18 à moins de 0,02.
Vous passez cet entretien bientôt ? GhostPilot écoute votre appel en direct, repère la question dès qu'elle est posée et affiche une réponse structurée à l'écran en temps réel. Essayez-le lors de votre prochain entretien blanc, ou prenez un Session Pass à $29, sans abonnement, pour le jour J.
Voir comment ça marcheQuestions de relance à prévoir
- Quelle est la différence entre font display swap, optional et fallback ?
- Comment mesureriez-vous le décalage de mise en page causé par une police ?
- Quand une pile de polices système est-elle la meilleure réponse ?
Autres questions pour Développeur frontend
Votre recruteur posera sa propre version de celle-ci. Collez votre véritable fiche de poste dans le Question Predictor gratuit et obtenez les 20 questions que ce poste a le plus de chances de poser, avec ce que chacune cherche vraiment à sonder.
Prédire mes questions