Remplacer l'antédiluvien par du CSS

Version imprimable

27/10/2020, 18h00
laurentSc

Remplacer l'antédiluvien par du CSS
Bonjour,

je suis en train de modifier un site très vieux, qui comporte des lignes

Code:

du texte

3 est un exemple. Pour le mettre à jour, je pensais à

Code:

du texte

avec
Code:

1 2 3 .size3 { font-size:3xx; }
mais le xx, malgré des essais (px, em, %), j'ai pas trouvé. Peut-on m'aider ?

Salut

Citation:

mais le xx, malgré des essais (px, em, %), j'ai pas trouvé. Peut-on m'aider ?

Tu dois avoir un problème ailleurs car

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="fr"> <!-- ABaseHTML.html -->
 
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Minimum pour page HTML</title>
 
		<style>
.size60 {
font-size:60px;
}
.size10 {
font-size:10em;
}
 
                </style>
 
		<script>
                        'use strict'; // force la déclaration des variables
                        //********************************************************************************
                        //--------------------------------------------------------------------------------
 
                </script>
 
	</head> 
	<body>	<!-- ........................................................................................................... -->
<label for="title" class="size60" >Titre de la note</label>
<br />
<span class="size10">du texte</span>
		<script> // ........................................................................................................ --> 
 
                </script> <!-- ..................................................................................................... -->
	</body>	<!-- ........................................................................................................... -->
 
</html>

fonctionne normalement

27/10/2020, 18h51
laurentSc

Que ça fonctionne bien, j'en suis convaincu, ayant moi-même fait un essai similaire. Mon souci est de trouver l'équivalent de la vieille balise html . Dans cette balise xx est un nombre avec aucune unité. Or la balise css font-size réclame une unité (par exemple px, em, %, cm, etc). Et j'ai pas trouvé l'équivalent...
27/10/2020, 22h13
laurentSc
Tous comptes faits, je procéderai à tâtons. Par exemple, par essais successifs, j'ai trouvé que l'équivalent de du texte est du texte avec
Code:

1 2 3 .size16 { font-size:16px; }
28/10/2020, 18h37
albedo0

Bonjour,

Plutôt que d'utiliser l'unité px, je te recommande plutôt de travailler avec rem. Cela permet de conserver l'accessibilité.

Lorsque l'on utilise l'unité px pour les textes, cela a pour effet de figer la taille.
L'unité rem est une unité relative à la taille par défaut du navigateur (fixée à 16px par défaut). L'avantage dans ce cas là est que si tu as un utilisateur mal-voyant qui a réglé son navigateur pour doubler la taille par défaiut des caractères, l'unité rem s'adapte alors que px pas du tout...
28/10/2020, 18h51
laurentSc

Merci pour ta remarque qui tombe à pic : je suis le webmaster du site de mon club handisport et certains utilisateurs sont mal ou non-voyants. Cela dit, ce site est passé depuis 2 ans en Wordpress : https://vercorshandisport.org/...

Mais ce que je disais hier ne concerne pas ce site-là, et de plus, j'ai changé mon fusil d'épaule depuis hier soir : j'étais parti pour mettre à jour un vieux site (d'où cette discussion) et vu l'ampleur des dégâts, j'ai décidé de tout refaire à 0.
29/10/2020, 16h43
NoSmoking
Bonjour,
il existe une correspondance, je dirais indirecte, entre les SIZE et la taille de la font dans les navigateurs

value 'font-size'
keyword HTML
Heading

1 xx-small ^(*) h6

x-small -

2 small h5

3 medium h4

4 large h3

6 xx-large h1

7 xxx-large -

Ressources :
- Font size: the font-size property CSS Fonts Module, le reste n'est pas inintéressant ;
- font-size pour info. générale.

value	'font-size' keyword	HTML Heading
1	xx-small ^(*)	h6
	x-small	-
2	small	h5
3	medium	h4
4	large	h3
6	xx-large	h1
7	xxx-large	-

Remplacer l'antédiluvien <font size="x"> par du CSS