Le deal à ne pas rater :
Cartes Pokémon : la prochaine extension Pokémon sera EV6.5 Fable ...
Voir le deal

 :: Zone détente :: Graphisme & Codage Voir le sujet précédent Voir le sujet suivant Aller en bas

Les astuces de Giyu

Invité
Invité
Les astuces de Giyu Jeu 3 Juin - 22:29
Invité



1. Poster des titres personnalisés


Les astuces de Giyu  Krtb

Il y a deux éléments en prendre en compte pour rajouter une "font" (= une police d'écriture). La balise "link" et la balise "span

1. / La balise Link parait comme la plus compliquée à coder, mais est pourtant la plus facile, puisque cette balise est donnée par Google et qu'il suffit donc de la COPIER / COLLER au début de votre code.

Voici comment prendre la balise Link sur Google Font :

2. / Pour la balise "span", il faut en effet la réécrire, ou la copier/coller du code qui je mets ci-dessous avec l'exemple de mon titre. Je vais à ce titre à quoi correspond chaque champ. 

Span : La balise Link, comme son nom l'indique, permet de faire le lien avec un "font" présente sur le cloud de Google. La balise "Span" permet donc de l'activer, tout simplement. 

Font-size : La font-size est la taille souhaitée pour la police d'écriture. Sachez, à titre comparaison, que la taille du texte à lire sur le forum est soit de 11px ou 12px. L'idéal est de toujours utiliser les pixels pour les tailles, même si vous pouvez utiliser une autre unité de mesure comme le em, mais cette unité est plus utilisée par les anglo-saxons. 

color: Représente le code hexadécimal de la couleur choisie. Elle est toujours précédée du "#" et contient six caractères (chiffre et/ou lettre). Je vous conseille d'aller sur ce site pour choisir la couleur et copier le code : https://htmlcolorcodes.com/fr/

Voilà, j'espère que cette petite astuce vous a plus, la prochaine que je posterai sera pour réaliser des tailles d'image responsive que ce soit sur Smartphone ou PC.

Voici mon code de titre utilisé pour l'exemple :
Code:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<center>
<span style="font-family: 'Permanent Marker'; font-size:30px; color:#C9AA91;">1. Poster des titres personnalisés </span> </center>
Revenir en haut Aller en bas
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Dawn of Ninja :: Zone détente :: Graphisme & Codage-
Sauter vers:

Cliquez sur une technique de la Bibliothèque pour obtenir son code !
Il ne vous restera plus qu'à le copier-coller ailleurs.

Acte II -  Infestation