28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
J'aime bien utiliser des typos non standard pour habiller mes sites web. Pour celà j'utilise google font. Seulement voilà j'aime bien les typos condensées, hors quand le navigateur ne les lis pas, il n'existe pas de typos standard condensée (à part peut être l'impact). Du coup ça casse toute la mise en page.
J'aimerais pouvoir spécifier, que si telle typo utiliser = telle taille....
J'ai essayé sur un principe de css en cascade du style :
font: 18px 'Roboto Condensed';
font: 14px Arial, sans-serif;

Mais ça ne fonctionne pas....

Si quelqu'un a une idée Smiley decu

Merci par avance
Salut,

Pour spécifier la taille de police je pense qu'il faudrait changer ta méthode d'affichage dans le sens ou tu met par exemple (je suis pas sur que la solution soit adapté par contre) :

html{
    font-size: 100%;    
}
h1{
    /* pour la taille des em, il y a un site qui permet de savoir l'équivalence en PX */
    font: 2em/1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}


Pour ce qui est des font-family c'est plus simple à gérer et tu as presques mis la solution qui est :

font: 18px 'Roboto Condensed';
font: 14px Arial, sans-serif;

faut mettre : 
font: Roboto condensed, Arial, sans serif;


En gros si y a pas de roboto alors tu me met de l'arial s'il y en a pas tu me met du sans serif

Bon courage
Merci pour les idées Smiley smile ,
j'ai testé
 font: 2em/1em Verdana, Geneva, Arial, Helvetica, sans-serif;

mais peu importe la font elle s'affiche en 2 em,
Ce que je souhaite c'est "roboto" en 2em et si pas roboto : "Arial" mais en 1 em
Quand tu déclares font 2em/1em c'est pour dire ça en faite:
font-size:2em;
line-height:1em

Le 2eme choix n'a rien avoir avec la 2eme taille possible.

Faudrait que tu cibles les navigateurs sur lequel ça ne fonctionne pas, et forcer l'affichage de ton arial en fonction. Je ne vois pas d'autre solution
Aahhh Smiley smile
Je n'ai pas l'habitude de déclarer les fonts de façon condensée...
A mon avis il faudrait du Js, car ça n'a pas l'air de dépendre du navigateur (ça dépends si JS bloqué et d'autres choses apparemment, mais que je n'arrive pas à identifier)...

merci en tout cas