18030 sujets

Questions générales et questions de débutants

[Résolu] Gérer la taille du texte avec les « em »

Bonjour,

J'essaie de recréer l'écriture de l'exemple de l'article (http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html) dans une page WEB mais je n'y arrive pas.


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style type="text/css">
<!--
html {
	font-size: 100%; /* =16px */
	height: 100%;
}
body {
	font-size: 1em;
}

p {float: left; background: skyblue; font-size: 1em;}
.verdana {font-family: Verdana;}
.nimbus {font-family: "Nimbus Roman No9 L";}
.temoin {background: red; height: 1em; width: .25em;}

-->
</style><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>

<body>

<p class="verdana">Ày</p>
<p class="nimbus">Ày</p>
<div class="temoin"></div>

</body>
</html>


Je ne vois pas où cela pêche. j'ai essayé avec des blocks et des floats mais je n'arrive pas à avoir sa mise en forme.

upload/25209-em-schema.png
Modifié par Yes_Papa (20 Mar 2013 - 20:16)
Bonsoir, tu as bien la police Nimbus Roman No9 L sur ton ordinateur ?
Qu'elle résultat as-tu ?
Je cherche juste à recréer l'alignement des deux polices pour pouvoir comparer les polices comme dans l'exemple (l'image à la fin).

Pour la police, je ne pense pas mais les caractères générés y ressemblent drôlement.
Je fais le test en changeant pour la police Arial en lieu et place de la police Nimbus mais c'est la même chose. Je n'arrive pas à intercaler la div rouge entre les divs des deux polices comme sur l'image.
Essayez ça:

<div class="box">
  <p class="verdana">Ày</p>
  <div class="temoin">
    <div class="temoin-in"></div>
  </div>
  <p class="nimbus">Ày</p>
</div>


html {
	font-size: 100%; /* =16px */
	height: 100%;
}
body {
	font-size: 1em;
}
.box {
	display: table;
}
p, .temoin {
	display: table-cell;
}
p {
	margin: 0;
	padding: 0;
	background: skyblue;
	font-size: 1em;
}
.verdana {
	font-family: Verdana;
}
.nimbus {
	font-family: "Nimbus Roman No9 L";
}
.temoin {
	vertical-align: bottom;
}
.temoin-in {
	background: red;
	height: 1em;
	width: .25em;
	margin-right: 0.08em;
	margin-left: 0.08em;
}

Modifié par rodolpheb (20 Mar 2013 - 21:32)
Merci bcp. Exactement ce que je voulais reproduire. Merci encore pour cette aide. Je vais étudier cela de plus prêt maintenant pour comprendre.
Sujet clos
Aller à