Comment utiliser Google Fonts and Font-Display

Points de base

• Google Fonts est une plate-forme open source gratuite qui fournit un grand nombre de polices Web qui peuvent être utilisées dans des projets Web pour créer une conception croisée magnifique et cohérente.
Les propriétés
• font-display sont essentielles pour utiliser les polices Google, qui contrôle le comportement de rendu des polices pendant le chargement et optimise l'expérience utilisateur en réduisant l'impact du chargement de police lent.
• Il existe deux façons principales d'ajouter des polices Google à un projet: lier et importation. Les deux méthodes impliquent la sélection de la police souhaitée sur le site Web de Google Fonts et l'ajout du code fourni à un fichier HTML ou CSS.
Les attributs
• font-display ont cinq valeurs possibles (auto, bloc, swap, repli, facultatif), qui déterminent comment la police est rendue pendant le chargement, permettant une expérience utilisateur personnalisée.

Ce tutoriel explorera comment utiliser les propriétés Google Fonts et font-display.

Google Fonts est une plate-forme open source gratuite qui fournit une grande bibliothèque de polices Web. En tant que développeur Web, l'intégration de ces polices dans votre projet est essentielle pour créer des pages Web qui sont visuellement engageantes et conçues de manière cohérente sur une variété d'appareils. Un aspect clé de l'utilisation efficace des polices Google est de comprendre l'attribut font-display, qui détermine comment les polices sont rendues pendant le chargement.

Nous couvrirons les sujets suivants:

1. Qu'est-ce que les polices Google?
2. Quelles sont les propriétés font-display?
3. Comment ajouter des polices Google à votre projet
   • lier les polices Google
   • Importer Google Fonts
4. Comprendre diverses valeurs font-display
   • Auto
   • Block
   • Swap
   • Fallback
   • Facultatif
5. Implémentation avec Google Fonts font-display Propriétés
   • comment utiliser les liens
   • Utilisation de la méthode @import
6. Dépannage des FAQ
   • Problème: les polices personnalisées ne peuvent pas charger ou afficher
   • Problème: clignotement de texte invisible (FOIT) ou non clignotant de texte (FOUT)
   • Problème: rendu de police incohérent à travers les navigateurs

Qu'est-ce que les polices Google?

Google Fonts est une bibliothèque de plus de 1 000 familles de polices agréées gratuites fournies par Google. Ces polices peuvent être facilement intégrées dans votre site Web pour créer un look unique, professionnel et cohérent. Google Fonts est optimisé pour les performances et l'accessibilité, ce qui en fait un choix idéal pour le développement Web.

Quelles sont les propriétés font-display?

La propriété

font-display est une fonction CSS qui contrôle le comportement de rendu des polices pendant le chargement. Il détermine combien de temps le navigateur doit attendre que la police se charge avant d'afficher des polices ou du texte alternatifs avec des caractères invisibles. En utilisant l'attribut font-display, vous pouvez optimiser l'expérience utilisateur en réduisant l'impact de la charge de police lente sur la conception et les performances du site Web.

Comment ajouter des polices Google à votre projet

Il existe deux façons principales d'ajouter des polices Google à votre projet: lier et importation.

lier les polices Google

Les liens

sont le moyen le plus courant d'ajouter des polices Google à votre projet. Pour ce faire, suivez ces étapes:

1. Obtenez le site Web de Google Fonts.
2. parcourir ou rechercher la police que vous souhaitez utiliser.
3. Cliquez sur la police pour ouvrir sa page Détails.
4. Sélectionnez le style de police et l'épaisseur dont vous avez besoin en cliquant sur la case ou en utilisant le curseur.
5. Cliquez sur le bouton "Sélectionnez ce style" pour ajouter le style de police sélectionné à votre collection.
6. Ouvrez l'onglet Embed et vous verrez une balise de liaison que vous pouvez ajouter à la partie d'en-tête du fichier HTML.

Par exemple, pour ajouter une police "roboto", la balise de liaison ressemblera à ceci:

<code class="language-html"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"></code>

Importer Google Fonts

Alternativement, vous pouvez importer des polices Google en utilisant les règles @import dans le fichier CSS. Pour ce faire, suivez ces étapes:

1. Suivez les étapes 1 à 5 dans la méthode de liaison.
2. Dans l'onglet Embed, passez à l'onglet @Import.
3. Copiez l'extrait de code fourni et collez-le sur le fichier CSS.

Par exemple, pour importer une police "roboto", la règle @import ressemblera à ceci:

<code class="language-css">@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');</code>

Comprendre diverses valeurs font-display

Les attributs

font-display ont cinq valeurs possibles, chacune avec un comportement de rendu différent:

• Auto
• Block
• Swap
• Fallback
• Facultatif

Auto

auto Les valeurs laissent le comportement de rendu de police aux paramètres par défaut du navigateur. Cette option peut provoquer un rendu incohérent entre différents navigateurs:

<code class="language-css">font-display: auto;</code>

Block

block La valeur indique que le navigateur masque initialement le texte et attend que la police se charge. Si la police n'est pas chargée pendant une courte période, le navigateur affichera la police alternative. Une fois la police personnalisée chargée, le navigateur changera le texte pour utiliser la police personnalisée. Cette méthode peut provoquer un "clignotement de texte invisible" (FOIT) en attendant que la police se charge:

<code class="language-css">font-display: block;</code>

Swap

swap La valeur indique au navigateur d'afficher immédiatement du texte à l'aide de polices alternatives et de passer aux polices personnalisées après le chargement de la police personnalisée. Cette méthode peut provoquer un «scintillement de texte non style» (FOT), mais garantit que l'utilisateur peut voir le texte depuis le début:

<code class="language-css">font-display: swap;</code>

Fallback

La valeur est une combinaison de

et fallback. Le navigateur cache initialement le texte brièvement (généralement environ 100 millisecondes). Si la police personnalisée est chargée dans ce délai, le navigateur l'affichera. Sinon, il affichera des polices alternatives. Après une période plus longue (généralement environ trois secondes), si la police personnalisée n'est toujours pas chargée, le navigateur abandonnera et continuera à utiliser la police alternative: block

<code class="language-html"><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"></code>

Facultatif

Les valeurs

optional sont similaires à fallback, mais le temps d'attente pour le chargement des polices personnalisées est courte. Si la police personnalisée n'est pas chargée pendant ce court laps de temps (selon le navigateur), le navigateur abandonnera et continuera à utiliser la police alternative. Cette approche himinalise l'expérience utilisateur et les performances par rapport au rendu de police précis:

<code class="language-css">@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');</code>

Implémentation avec Google Fonts font-display Propriétés

Les polices Google vous permet de définir la valeur @import directement dans le lien ou dans l'URL font-display. Pour ce faire, suivez l'une des options suivantes.

comment utiliser les liens

• Suivez les étapes 1 à 6 dans la section de liaison ci-dessus.
• Dans l'onglet Embed, trouvez la section Personnaliser.
• Dans le menu déroulant "Font-Display", sélectionnez la valeur font-display souhaitée.
La balise de liaison
• sera mise à jour avec la valeur font-display sélectionnée. Ajoutez la balise de liaison mise à jour à la partie d'en-tête du fichier HTML.

par exemple, pour ajouter une police "roboto" avec font-display valeur swap:

<code class="language-css">font-display: auto;</code>

Utilisation de la méthode @import

• Selon les étapes 1 à 3 de la méthode d'importation ci-dessus.
• Dans l'onglet Embed, trouvez la section Personnaliser.
• Dans le menu déroulant "Font-Display", sélectionnez la valeur font-display souhaitée.
La règle
• @import sera mise à jour avec la valeur font-display sélectionnée. Ajoutez la règle @import mise à jour à votre fichier CSS.

par exemple, pour importer une police "roboto" avec font-display valeur swap:

<code class="language-css">font-display: block;</code>

Dépannage des FAQ

Voici quelques problèmes et solutions courants lors de l'utilisation des propriétés de polices Google et font-display.

Problème: les polices personnalisées ne peuvent pas charger ou afficher

• Assurez-vous que vous avez correctement ajouté la balise de liaison ou les règles @import au fichier HTML ou CSS.
• Vérifiez les URL mal orthographiées ou incorrectes dans le code du lien ou @import.
• Vérifiez que le nom de famille de police et l'épaisseur correct sont utilisés dans la règle CSS.

Problème: clignotement de texte invisible (FOIT) ou non clignotant de texte (FOUT)

• Sélectionnez différentes valeurs font-display pour mieux répondre à vos besoins. Par exemple, si vous rencontrez Foit, essayez swap ou fallback. Si vous rencontrez FOT, envisagez d'utiliser block ou fallback.
• Assurez-vous que vos polices personnalisées chargent le plus tôt possible pendant le chargement de la page en plaçant le code de liaison ou @import près de la section d'en-tête ou près du haut du fichier CSS.
• Optimiser la taille du fichier de police en sélectionnant uniquement les styles et épaisseurs de police nécessaires.

Problème: rendu de police incohérent à travers les navigateurs

• Définissez des valeurs font-display spécifiques au lieu d'utiliser des valeurs auto pour assurer un comportement cohérent sur différents navigateurs.
• Testez votre site Web sur divers navigateurs pour identifier tout problème de rendu et effectuer les ajustements nécessaires à votre CSS.

Conclusion

Dans cet article, nous explorons comment utiliser les propriétés Google Fonts et font-display pour créer des sites Web engageants visuellement et hautes performances. En comprenant les différentes valeurs font-display et leurs significations, vous pouvez optimiser le rendu de police pour améliorer l'expérience utilisateur. Assurez-vous de tester votre implémentation sur une variété de navigateurs et d'appareils pour assurer la cohérence de l'apparence et des performances.

En tant que développeur Web, l'intégration des propriétés Google Fonts et font-display dans votre projet vous permettra de créer des conceptions professionnelles et accessibles qui répondent aux besoins d'un large éventail d'utilisateurs.

(Ce qui suit est la FAQ, qui a été réécrite et rationalisée en fonction du texte d'origine)

FAQ sur l'utilisation des polices Google

• Comment optimiser les polices Google pour améliorer les performances du site? Vous pouvez utiliser l'attribut font-display (par exemple, la valeur swap), ou considérer les polices gérées localement pour réduire les demandes HTTP.

• Quels sont les avantages de l'utilisation des polices Google? Google Fonts propose une large gamme de polices open source gratuites faciles à utiliser, hébergées par Google, rapide et fiable, et optimisée pour les plates-formes de bureau et mobiles.

• Comment ajouter des polices Google à votre site WordPress? Les polices Google peuvent être facilement ajoutées et personnalisées à l'aide de plugins WordPress tels que "Swap Google Font Affichage" ou "Fonts Plugin".

• Comment utiliser les polices Google dans CSS? Sélectionnez une police sur le site Web Google Fonts, copiez la balise de liaison fournie à la section du fichier HTML et ajoutez les règles CSS à votre fichier CSS.

• Pouvez-vous utiliser Google Fonts hors ligne? Les fichiers de police peuvent être téléchargés et utilisés localement, mais uniquement à des fins personnelles.

• Comment modifier l'affichage de la police dans les polices Google? Utilisez la propriété font-display dans CSS.

• Les polices Google sont-elles compatibles avec tous les navigateurs? Compatible avec la plupart des navigateurs modernes, mais les navigateurs plus anciens peuvent ne pas prendre en charge certaines fonctionnalités ou polices.

• Comment trouver les meilleures polices Google pour mon site Web? Le site Web Google Fonts fournit des fonctions de filtrage, de filtrage des polices par catégorie, langue et autres attributs, et peut être prévisualisée.

• Pouvez-vous utiliser plusieurs polices Google sur mon site Web? Oui, mais chaque police augmentera le temps de chargement, et il est recommandé de limiter le nombre.

• Comment mettre à jour les polices Google sur votre site Web? Les polices Google sont hébergées par Google et seront mises à jour automatiquement. Si hébergé localement, vous devez mettre à jour manuellement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!