28172 sujets

CSS et mise en forme, CSS3

Graisse devenant plus faible alors que la taille de police augmente !

Bonjour,

J'observe un phénomène quelque peu déroutant :

La graisse d'une chaîne de caractères écrite en Verdana bold disparaît presque lorsque j'augmente la taille des caractères, les caractères devenant quasiment en graisse normale, puis réapparaît à partir d'une certaine valeur.

Plus précisément :
Un texte initialement en 13 px (font-size: 13px) apparaît bien en gras.
Pour 14, 15, 16 px, le texte n'est pratiquement plus en gras.
La graisse réapparaît à partir de 17px.

Même chose si la taille est exprimée en em : texte en gras pour 0.8em ; texte fin pour 0.9 et 1em ; texte de nouveau en gras pour 1.04em.

Et ceci aussi bien avec Chrome qu'avec Firefox. (Je ne peux essayer avec IE car je dispose de IE8 alors que j'élabore mon futur site en html5.)

J'ai essayé avec Arial. Le phénomène disparaît et la graisse reste bien constante.

Est-ce un bug de la police Verdana ?

Merci d'avance pour vos réponses.
Modifié par cadbor (30 Dec 2013 - 22:00)
Bonjour,

Sans code, difficile à dire... Le mieux serait d'avoir un exemple en ligne. Sur votre site, ou à défaut un dépôt sur Codepen par exemple.

cadbor a écrit :
Je ne peux essayer avec IE car je dispose de IE8 alors que j'élabore mon futur site en html5.

Houlà ! Mais bien sûr que si, c'est possible. Mon site est codé avec des balises html5 et je n'ai aucun problème sous IE8. Pour ce faire j'utilise une béquille javascript, comme tout le monde :

- soit via document.createElement :
/* émulation maison du html5 pour IE > 9, éléments non-exaustif */
document.createElement("header");
document.createElement("footer");
document.createElement("aside");
document.createElement("section");
document.createElement("article");
document.createElement("nav");
document.createElement("figure");
document.createElement("figcaption");
document.createElement("time");
document.createElement("audio");
document.createElement("canvas");
document.createElement("video");


- soit, mieux encore, via HTML5 Shiv
Modifié par Olivier C (04 Jan 2014 - 09:19)
Bonjour,
Merci de votre réponse, qui plus est le 31 décembre au soir !
(Je ne réponds que maintenant car j'étais absent, puis chargé.)

Concernant la graisse : il semble que cela soit une spécificité de Verdana.
J'ai en effet écris un tout petit programme de test
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Essai de graisse en Verdana</title>
<meta charset="utf-8" />
<style type="text/css">
body  {
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 13px;
}
</style>
</head>

<body>
<p>Essai de graisse avec Verdana</p>
</html>

J'obtiens bien l'effet observé : par exemple, pour font-size = 16px, la graisse paraît presque inexistante alors que pour 17px, elle est importante.

Concernant la béquille javascript sous IE8 — j'ai rajouté "main" —, la page est pour l'instant quelque peu dégradée.
J'étudierai le site sous IE plus tard. Pour l'instant, je le teste sur Chrome et FireFox.

Concernant HTML Shiv, je ne connais pas du tout. Je vais étudier la question. Merci.
Sujet clos
Aller à