28172 sujets

CSS et mise en forme, CSS3

Problème de typos sur le web

Bonjour,
Nouveau sur ce forum, pour la petite histoire, je suis un graphiste spécialisé en flash qui vient de se mettre au html 5, css 2/3 et jquery….et oui mes derniers templates html remontaient à l’époque des tableaux ! Du coup je peux avoir quelques lacunes et c’est pourquoi je sollicite votre aide tout en souhaitant que mes questions puissent aussi servir à d’autres personnes.

Je rencontre donc quelques problèmes sur les typos :

J’embarque des fonts (format SVG, TTF, EOT…) mais certains navigateurs, certes très rares (exemple le navigateur du système HP WebOs) n’arrivent pas à interpréter le format de la typo et du coup, c’est ma deuxième police qui se met en place (dans mon cas, la Georgia). Pour ces navigateurs, je souhaite mettre ma police de substitution en gras et en italique mais je ne peux pas déclarer ces deux attributs dans la classe de ma font car sinon cela impacte aussi ma première typo………voyez-vous une solution ?
Et autre point, j’ai mis un background de couleur sur une de mes fonts et le problème, une marge automatique se crée sans que je puisse modifier la taille au niveau du top et bottom contrairement aux valeurs right et left que je peux modifier……….Normal ? 

h1 {color:#ffffff; font-family: "GeometricSlabserif703Bold", Georgia, Times New Roman, serif; font-size: 42px;  text-decoration: none; font-weight:normal; padding-bottom: 25px;}
h1 span{padding-left: 6px; padding-right: 6px; background-color:#1e1e1e;}


Lien : http://gillesn.perso.sfr.fr/main/index.html

Et dernier point, sous Safari mobile, impossible d’afficher une font en taille 11px, il augmente automatiquement la taille et du coup comparé à mes polices en taille 16px, elles paraissent plus grosses. J’ai pensé à un problème lié à ma typo embarquée mais même avec une police système comme l’Arial, j’ai la même chose ! J’ai remarqué le même problème sur un autre site donc je ne sais pas si il y a une solution Une idée ? Problème de lissage des typos?

h2 {font-family: "LatoRegular", Arial, sans-serif; font-size: 11px; color:#3c3c3c; font-weight:normal; padding-bottom: 18px; }


Lien : http://gillesn.perso.sfr.fr/blog/index.html

Merci d'avance pour votre aide.
Modifié par Gilles_73 (26 Jun 2012 - 09:11)
Gilles_73 a écrit :
Pour ces navigateurs, je souhaite mettre ma police de substitution en gras et en italique mais je ne peux pas déclarer ces deux attributs dans la classe de ma font car sinon cela impacte aussi ma première typo………voyez-vous une solution ?

Tu peux déclarer ta WebFont comme étant en gras + italique, même si concrètement le dessin de la fonte utilisée ne correspond pas à ces attributs:
@font-face {
  font-family: "machin";
  font-style: italic;
  font-weight: bold;
  src: url("machin-regular.woff") format("woff");
}

À partir de là, tu déclares ton texte:
h1 {
  font-family: "machin", "Georgia", serif;
  font-style: italic;
  font-weight: bold;
}

Dans ton code actuel toutes les déclarations @font-face déclarent du font-style: normal; font-weight: normal; même quand ça ne correspond pas aux caractéristiques de la fonte. Idéalement il faudrait déclarer une famille unique (N déclaration @font-face avec le même nom de fonte à chaque fois), comme dans cet exemple:
http://fvsch.com/code/css-font-face/

Gilles_73 a écrit :
Et autre point, j’ai mis un background de couleur sur une de mes fonts et le problème, une marge automatique se crée sans que je puisse modifier la taille au niveau du top et bottom contrairement aux valeurs right et left que je peux modifier……….Normal ?

S'agit-il vraiment d'une marge? À voir avec un outil de debugging CSS tel que Firebug ou Web Inspector. C'est peut-être tout simplement l'espace occupé par le line-height?
Edit: ok, c'est tout simplement l'espace réservé pour le texte, avec de l'espace en dessous de la ligne de base pour les jambages (Typography 101 Smiley smile ). Tu ne peux pas supprimer cet espace, à part en:
- jouant sur la hauteur de ligne (line-height);
- ou sur la hauteur de l'élément (height).
La première solution est peut-être préférable. Un line-height faible (par exemple 0.8) et un peu de padding-top pour compenser peut te donner un résultat correct. Mais CSS n'est pas vraiment fait pour ce genre de gestion graphique fine, donc c'est un peu de la bidouille, et pas sûr que ça passe super bien dans tous les navigateurs. À tester.
Dans les deux cas pour pouvoir utiliser line-height ou height sur ton SPAN, il faudra le passer en display:inline-block (au lieu de "inline" par défaut).

Gilles_73 a écrit :
impossible d’afficher une font en taille 11px

En même temps faut être con pour vouloir afficher un texte en 11px en 2012. Smiley langue

Une piste:
http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/
http://developer.mozilla.org/en/CSS/text-size-adjust
fvsch a écrit :



En même temps faut être con pour vouloir afficher un texte en 11px en 2012. Smiley langue


heu... j'ai pas compris :X tu parles des px ? a la place des em par exemple ?
saajuck a écrit :
heu... j'ai pas compris :X tu parles des px ?

Non, je parle juste de la taille de texte ridicule que ça représente. Bon c'est à moitié une boutade, mais juste à moitié. Smiley smile
Pour rappel: The 100% Easy-2-Read Standard
Exactement ce que je recherchais !
Je vais tester ce soir sur ma tablette HP pour la police de substitution. Mais à ce sujet, déclarer ma web font en gras et en italique, ne risque t'il pas de créer un confit dans certains navigateurs ou sur certains systèmes ?

Merci pour ton aide fvsch !

PS : oui, je sais, 11px, c'est petit............
Sujet clos
Aller à