Effet de superposition de texte

[Camoche03]

Re Bonjour,
Je cherche à savoir faire ceci :


Je veux dire un effet de superposition de textes

Merci

[Ea]

Bonjour,


Il suffit de mettre un truc du style :

Code:

<div style="text-align:center; line-height:5px; font-size:20px;">
  <span style="color:red;font-style:italic">la compagnie</span><br/>
  des lapins bleus
</div>

line-height donne la "hauteur" d'une ligne, donc si y'a du texte plus grand que la hauteur de la ligne ( font-size pour la taille de la police ), il recouvrira la ligne du dessus/dessous.

[Camoche03]

Merci ça marche ♥ comment changer la police ?

[Camoche03]

En fait j'ai trouvé est-ce que tu connais le nom de la police sur l'image ?

[Ea]

Code:

<div style="text-align:center; line-height:5px; font-size:20px; font-family:'trebuchet ms', arial, verdana, serif;">
  <span style="color:red;font-style:italic">la compagnie</span><br/>
  des lapins bleus
</div>

Ou si il faut une différente sur les 2 lignes :

Code:

<div style="text-align:center; line-height:5px; font-size:20px;">
  <span style="color:red;font-style:italic; font-family:'trebuchet ms', arial, verdana, serif;">la compagnie</span><br/>
  <span style="font-family:candara, tahoma, serif;">des lapins bleus</span>
</div>

Par contre cela agit comme suit : si la première police de la liste est installée sur l'ordinateur, elle est mise au texte, sinon si la deuxième police est installée elle est mise au texte, sinon si la troisième police est installée elle est mise au texte, ..., et si aucune des polices de la liste n'est installée une police par défaut est mise.

Là la police de votre exemple n'est probablement installée chez personne.

Il y a par contre par exemple le service google web fonts qui permet d'utiliser une de leur police sans qu'elle soit installée.

Par exemple si je veux utiliser la Damion je peux mettre :

Code:

<link href='http://fonts.googleapis.com/css?family=Damion&v2' rel='stylesheet' type='text/css'>
<div style="text-align:center; line-height:5px; font-size:20px; font-family: 'Damion', cursive;">
  <span style="color:red;font-style:italic; ">la compagnie</span><br/>
  des lapins bleus
</div>

[Camoche03]

Ca m'a tout fait buger x)


J'aimerais bien celle la pour la phrase : <link href='http://fonts.googleapis.com/css?family=Give You Glory&v2' rel='stylesheet' type='text/css'> Give You Glory

et elle pour la phrase : <link href='http://fonts.googleapis.com/css?family=Bowlby+One+SC&v2' rel='stylesheet' type='text/css'>
Bowlby One SC


Si tu veux bien, bien sûr

[Ea]

Et bien il suffit de mettre les 2 <link> sur la page, et puis on peut utiliser le nom dans la liste des polices du types :

Code:

font-family: 'Give You Glory', arial, verdana, 'Bowlby One SC', 'trebuchet ms', serif;

Donc pour les 2 polices ça donne :

Code:

<link href='http://fonts.googleapis.com/css?family=Give You Glory&v2' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bowlby+One+SC&v2' rel='stylesheet' type='text/css'>

<div style="text-align:center; line-height:10px; font-size:20px;">
  <span style="color:red;font-style:italic; font-family: 'Give You Glory', cursive; font-size:28px;">la compagnie</span><br/>
  <span style="font-family: 'Bowlby One SC', sans-serif;">des lapins bleus</span>
</div>

( j'ai ajouté un font-size à la première ligne parce que la police n'a pas le même gabarit que celle de la deuxième ligne ( donc ça aurait semblé tout petit en laissant à la même taille )

[Camoche03]

Merci, résolu ♥