diff options
Diffstat (limited to 'files/fr/learn/css/styling_text/web_fonts/index.md')
| -rw-r--r-- | files/fr/learn/css/styling_text/web_fonts/index.md | 48 |
1 files changed, 24 insertions, 24 deletions
diff --git a/files/fr/learn/css/styling_text/web_fonts/index.md b/files/fr/learn/css/styling_text/web_fonts/index.md index 3374ac8986..70c4d1f26b 100644 --- a/files/fr/learn/css/styling_text/web_fonts/index.md +++ b/files/fr/learn/css/styling_text/web_fonts/index.md @@ -46,7 +46,7 @@ Ce système fonctionne bien, mais généralement, le choix des développeurs Web Mais il y a autre chose qui fonctionne très bien, depuis la version 6 d'IE. La fonctionnalité CSS des polices Web permet de définir les fichiers de polices à télécharger avec le site Web au fur et à mesure de sa consultation ; autrement dit, tout navigateur prenant en charge les polices Web aura exactement la police précisée à sa disposition. Incroyable ! La syntaxe requise ressemble à ce qui suit. -Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger : +Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger : ```css @font-face { @@ -55,7 +55,7 @@ Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il prà } ``` -Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement : +Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement : ```css html { @@ -65,7 +65,7 @@ html { La syntaxe peut devenir un peu plus complexe que cela, nous reviendrons sur le sujet plus bas. -Deux points important sont à garder présents à l'esprit à ce propos : +Deux points important sont à garder présents à l'esprit à ce propos : L'utilisation des polices n'est généralement pas gratuite. Vous devez payer pour les utiliser et/ou respecter d'autres conditions de licence telles que citer le créateur de la police dans le code (ou sur le site). Ne vous appropriez pas les polices et ne les utilisez pas sans donner le crédit voulu. @@ -74,9 +74,9 @@ L'utilisation des polices n'est généralement pas gratuite. Vous devez payer po > **Note :** La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 ! -## Apprentissage actif : un exemple de fonte web +## Apprentissage actif : un exemple de fonte web -En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus. +En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus. Utilisez les fichiers [web-font-start.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) et [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) comme point de départ pour ajouter votre code (voir l'[exemple en direct](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html) aussi.) Faites une copie de ces fichiers dans un nouveau répertoire sur votre ordinateur. Dans le fichier `web-font-start.css`, vous trouverez un CSS minimal pour traiter la mise en page et la composition de base de l'exemple. @@ -84,17 +84,17 @@ Utilisez les fichiers [web-font-start.html](https://github.com/mdn/learning-area -Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes : +Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes : -- un distributeur de fontes gratuites : c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/) et [Everything Fonts](https://everythingfonts.com/). -- un distributeur de fontes payantes : c'est un site qui met à disposition des fontes contre paiement, comme [fonts.com](http://www.fonts.com/) ou [myfonts.com](http://www.myfonts.com/). Vous pouvez aussi acheter directement auprès du fondeur, par exemple [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com) ou [Exljbris](http://www.exljbris.com/). -- un service de fontes en ligne : c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails. +- un distributeur de fontes gratuites : c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/) et [Everything Fonts](https://everythingfonts.com/). +- un distributeur de fontes payantes : c'est un site qui met à disposition des fontes contre paiement, comme [fonts.com](http://www.fonts.com/) ou [myfonts.com](http://www.myfonts.com/). Vous pouvez aussi acheter directement auprès du fondeur, par exemple [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com) ou [Exljbris](http://www.exljbris.com/). +- un service de fontes en ligne : c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails. Cherchons des polices de caractères ! Allez dans [Font Squirrel](https://www.fontsquirrel.com/) et choisissez deux polices — une police adaptée aux en-têtes (peut-être une belle police d'affichage de blocs avec sérifs) et une police un peu moins criarde et plus lisible pour les paragraphes. Après avoir trouvé chaque police, appuyez sur le bouton de téléchargement et enregistrez le fichier dans le même répertoire que les fichiers HTML et CSS précéemment enregistrés. Peu importe qu'il s'agisse de TTF (True Type Fonts) ou OTF (Open Type Fonts). Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas. -> **Note :** Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher. +> **Note :** Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher. ### Créer le code requis @@ -104,7 +104,7 @@ Maintenant, créez le code requis (et les formats de police). Pour chaque police 2. Allez sur le [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) de Fontsquirrel. 3. Téléversez les deux fichiers de fontes avec le bouton _Upload Fonts_. 4. Cochez la case nommée « Yes, the fonts I'm uploading are legally eligible for web embedding » (_Oui, les fontes téléversées sont légalement éligibles à une intégration web_). -5. Cliquez sur « *Download your kit* » (_Télécharger le kit_) . +5. Cliquez sur « *Download your kit* » (_Télécharger le kit_) . Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP à télécharger — enregistrez‑le dans le même répertoire que les fichiers HTML et CSS. @@ -112,16 +112,16 @@ Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP Maintenant, faites l'extraction de l'ensemble des polices web crées. Dans le répertoire d'extraction, trois éléments utiles : -- Plusieurs versions de chaque police : (par ex., `.ttf`, `.woff`, `.woff2`, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire. +- Plusieurs versions de chaque police : (par ex., `.ttf`, `.woff`, `.woff2`, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire. - Un fichier HTML de démo pour chaque police — chargez‑les dans votre navigateur pour voir ce à quoi elles ressemblent dans divers contextes d'emploi. - Un fichier `stylesheet.css`, qui contient le code @font-face dont vous avez besoin. -Pour mettre en œuvre ces polices dans la démo, suivez ces étapes : +Pour mettre en œuvre ces polices dans la démo, suivez ces étapes : 1. Renommez le répertoire d'extraction avec quelque chose de simple, comme `fonts`. -2. Ouvrez le fichier `stylesheet.css` et copiez y les deux blocs `@font-face` contenus dans le fichier `web-font-start.css` — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site. -3. Chaque fonction `url()` pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez `fonts/` au début de chaque chemin (si nécessaire). -4. Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : +2. Ouvrez le fichier `stylesheet.css` et copiez y les deux blocs `@font-face` contenus dans le fichier `web-font-start.css` — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site. +3. Chaque fonction `url()` pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez `fonts/` au début de chaque chemin (si nécessaire). +4. Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : ```css font-family: 'zantrokeregular', serif; @@ -135,7 +135,7 @@ Vous devriez obtenir une page de démonstration avec les belles polices impléme ## Utiliser un service de polices en ligne -Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code `@font-face`, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent [Typekit](https://typekit.com/) and [Cloud.typography](http://www.typography.com/cloud/welcome/). La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de [Google Fonts](https://www.google.com/fonts), un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos. +Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code `@font-face`, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent [Typekit](https://typekit.com/) and [Cloud.typography](http://www.typography.com/cloud/welcome/). La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de [Google Fonts](https://www.google.com/fonts), un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos. @@ -144,7 +144,7 @@ La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pa 1. Allez sur [Google Fonts](https://www.google.com/fonts). 2. Utilisez les filtres sur la droite pour afficher les types de polices à choisir et retenez une paire de fontes qui vous plaisent. 3. Pour sélectionner une famille de fontes, pressez le bouton ⊕ sur le côté. -4. Après avoir choisi les familles de fontes, pressez la barre avec _\[Nombre] Families Selected_ en bas de la page. +4. Après avoir choisi les familles de fontes, pressez la barre avec _\[Nombre] Families Selected_ en bas de la page. 5. Dans l'écran résultant, copiez d'abord la ligne de code HTML affichée et collez‑la dans l'en-tête de votre fichier HTML. Mettez-la au-dessus de l'élément {{htmlelement("link")}} existant, de sorte que la police soit importée avant que le navigateur essaye de l'utiliser dans la CSS. 6. Copiez ensuite les déclarations CSS listées dans la CSS comme il convient pour appliquer la fonte personnalisée à votre HTML. @@ -152,7 +152,7 @@ La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pa ## @font-face plus en détail -Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bloc de ce type : +Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bloc de ce type : ```css @font-face { @@ -168,17 +168,17 @@ Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bl } ``` -Elle est désignée sous le vocable « bulletproof @font-face syntax » (_syntaxe @font-face à puces garanties_), d'après un post de Paul Irish lors des débuts des succès de `@font-face` ([Bulletproof @font-face Syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Voyons les actions : +Elle est désignée sous le vocable « bulletproof @font-face syntax » (_syntaxe @font-face à puces garanties_), d'après un post de Paul Irish lors des débuts des succès de `@font-face` ([Bulletproof @font-face Syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Voyons les actions : -- `font-family` : cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS. +- `font-family` : cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS. - `src` : ces lignes indiquent les chemins vers les fichiers de fontes à importer dans la CSS (la partie `url`) et le format de chaque fichier de fonte (la partie `format`). Cette dernière partie est dans chaque cas optionnelle, mais il est utile de la déclarer car elle permet aux navigateurs de trouver la police à utiliser plus rapidement. Plusieurs déclarations peuvent être mises dans la liste, séparées par des virgules — le navigateur cherchera parmi celles-ci et utilisera la première trouvée qu'il comprend — toutefois il est préférable de mettre en tête les formats nouveaux comme WOFF2 et le plus anciens comme TTF en fin de liste. Les fontes EOT font exception — elles seront placées en tête pour corriger une paire de bogues dans les anciennes versions de IE, car IE essayera d'utiliser la première trouvée même s'il est en fait incapable de l'utiliser. -- {{cssxref("font-weight")}}/{{cssxref("font-style")}} : ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. [@font-face tip: define font-weight and font-style to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) (_en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples_) par Roger Johansson montre que faire plus en détail. +- {{cssxref("font-weight")}}/{{cssxref("font-style")}} : ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. [@font-face tip: define font-weight and font-style to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) (_en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples_) par Roger Johansson montre que faire plus en détail. -> **Note :** Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété. +> **Note :** Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété. ## Résumé -Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale. +Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale. {{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}} |