28106 sujets

CSS et mise en forme, CSS3

Bonjour

1) le point 2 de cet article http://www.alsacreations.com/article/lire/631-quelles-polices-pour-un-site-web.html me pose des questions du point de vue de la taille ( l'article n aborde que le design et l 'aspect esthétiques de différentes fontes dans une même page ) .

Qu'est ce que la taille d'une fonte ? Toutes les formes ( vectorielles) sont contenues dans un rectangle( boundingbox). Donc 16 px est soit la largeur soit la hauteur de quelque chose d 'invariable ? mais de quoi ? une idée ? un scale ? une projection ?

2) les items dans font-family doit ils s écrivent
a- font-family:"Times New Roman", Times, "Liberation Serif", FreeSerif;
b- font-family:Times New Roman, Times, Liberation Serif, FreeSerif;
comment sont interprétés les virgules ,les espaces et les guillemets par le parseurs Css des navigateurs ?

merci
Modifié par 75lionel (16 Feb 2016 - 00:33)
Modérateur
Bonjour,

1) La taille de la font se réfère "habituellement" à la hauteur d'un rectangle capable d'englober tous les caractères de la font. Le rectangle peut être plus grand que le minimum (ce qui fait que pour une taille donnée, certaines fonts apparaissent plus petites). Mais des fois, on a des fonts dont certains caractères dépassent du rectangle. Bref, en résumé, tout dépend de ce que le concepteur de la font a voulu faire.

2) Les noms des fonts dans font-family sont séparés par des virgules. Le nom peut être en plusieurs mots. Mais quand il est en plusieurs mots et sans guillemets, il faut que tous les mots soient des identifiants valides (c'est à dire ne commençant pas un chiffre, ne contenant que certains caractères, ...). Si tu as un doute, tu mets des guillemets.

EDIT : tes deux syntaxes étaient donc toutes les deux possibles.

EDIT : les mots clés génériques ne doivent pas être entre guillemet. On écrira donc par exemple sans-serif sans guillemet.

Amicalement,
Modifié par parsimonhi (08 Feb 2016 - 23:42)
Donc rien n'est très claire . En physique on parle de relation avec des unités : des choses mesurables ...quoi!! . La typographie est elle si difficile à expliquer de façon infographique ? ( grid unit , font unit , EMunit , origine v/h ...) . Déja il n'est pas facile comprendre si un style (weigh width slang) fait partie de la définition d'une fonte ou est un style ( variant) en soi sans parler de la différence entre italic et oblique et l'éffet italic de word .Le monde de la typographie n'est pas vraiement évident .....

Sinon merci beaucoups ...je ne savais pas que sans-serif était un mot réservé
https://css-tricks.com/sans-serif/
Modifié par 75lionel (16 Feb 2016 - 00:24)
"Le monde de la typographie n'est pas vraiment évident."
C'est probablement pour cette raison qu'être typographe est un métier.
Et comme tout métier, il requiert d'abord une formation et ensuite une expérience.
Rien de bien nouveau sous le soleil en soi Smiley cligne
Modérateur
75lionel a écrit :
En physique on parle de relation avec des unités : des choses mesurables ...quoi!!

75lionel a écrit :
Le monde de la typographie n'est pas vraiment évident .....

Pour moi la typo n'est pas vraiment une science, mais plus un art Smiley ravi
Administrateur
Bonjour,

Science, art, technique... Smiley lol

75lionel a écrit :
Quest ce que la taille d'une fonte ? Toutes les formes ( vectorielles) sont contenues dans un rectangle( boundingbox). Donc 16 px est soit la largeur soit la hauteur de quelque chose d 'invariable ? mais de quoi ? une idée ? un scale ? une projection ?

Le rectangle en question est ce que voit le concepteur d'une fonte dans son logiciel de conception... mais il en fait ce qu'il veut (parce que c'est super délire de créer des caractères 3 fois plus haut avec moults déliés ou avec de bonnes raisons pour faire cohabiter une police toute pitite à côté des habituelles Times, Verdana et cie).
16px, c'est la taille la plus couramment associée à 1em dans les navigateurs et autres UA, devices mais pas toujours. Soit que l'utilisateur a choisi 18px ou que le device est une télé d'1m de diagonale avec 24px comme taille de base. En utilisant les em et les rem (et en permettant aux blocs de s'agrandie en hauteur en évitant height par ex), peu importe, on peut faire comme si c'était 16 partout et ça s'adaptera chez ceux chez qui ce n'est pas 16...
un article qui explique un peu que pt à un contexte dans le monde de l imprimerie ou de l écran web
en gros entre le print et le web dans le domaine des fontes on perd toutes les notions de typographie ( une grande partie même si la norme CSS évolue) et d'agencement (*) et seul reste en gros CSS line-height et tout ce fait par test à la main !? ( je ne sais pas si modular scale est la solution à tous ça !!! a tester ).

par agencement j'entends alignement vertical et horizontal
-a) aligner les block entre eux
-b) aligner( horizontalement) les lignes de support ( baseline) du texte entre les différents block en jouant sur la symétrie +/- avec les propriétés padding marging / top bottom ( border width vient compliquer les choses !!)

pour b) ; Je me demande si ce genre de technique concept n'est que intellectuel ( scolaire/universitaire ) et pas du tout appliqué dans les designs lors du passage d'un psd vers css ? Encore je suppose que celui ci est pris en compte dans le psd !! ( dans quarkxpress ..... oui ? )

Sinon le design CSS de la première page d' alsacréation utilise t il ce concept ?. Un ratio ( un pas de 0.05 em de différence) est bien appliquer pour les fontes ( même typeface ? helvetica ) mais cela ne veut pas dire que l alignement inter ligne entre les block existent !!! Est ce une notion basé uniquement sur line-height et sans rapport directe avec le choix d une fonte . En css , un navigateur ne met pas en relation un pointsize de la fonte avec la propriété line-height ? .


line-height heritance is a little bit more complicated slide share item 28


upload/48731-alsacreati.jpg
Modifié par 75lionel (14 Feb 2016 - 19:57)
.....pour compliquer
-line-height : normal ;
--normal est une valeur prédéfini qui change selon les navigateurs et cette valeur n 'est pas facilement convertible en valeur numérique dans la console . firefox retourne une valeur numérique avec unité en px alors que chrome retourne "normal" . Dans chrome l'utilisation d' opérateur mathématique +/- dans le but d 'avoir une convertion de type retourne NaN ( jquery line-height avt ou apres font-size ) .
--l héritage à plusieurs comportement selon la valeur et l unité (voir lien ci dessus)

-font-size :
--valeurs définies par le navigateur ou l utilisateur si celui ci change la valeur par défaut !!
--en plus la valeur de font-size à plusieurs syntaxes optionnelles / obligatoires en mode raccourci avec un caractère / qui ne signifie pas division mais séparation de différents type de valeurs !! En gros les séparateurs sont lors de la présence de plusieurs valeurs pour la valeur d 'un attribut parfois
----des espaces " "
-----ou un slash "/"
-----ou une virgules.
Les éditeurs css avec complétions arrivent ils gérer ça !!! Sinon une images tirées de ce spreadsheet synthétise les caractéristiques de la syntaxe de l'attribut font :
upload/48731-alsa-fonts.jpg

même eric meyer a un article sur son site apropos de line-height avec notion de line-box

Pour terminer sur le ratio line-height/font-size .....donc même en CSS rien n'est vraiment fixe !! les valeurs sont définies de façon esthétiques /visuelles "correcte " ( wcga 1.5 pour line-height ) ...trouvez moi après cela un article sur la taille en typographie css claire et compréhensible si aucune de ces notions/termes ne sont abordés dans l introduction !!! ( Cela me rappelle une question sur un forum sur les raisons pour lesquelles un menu horizontal en plusieurs langues "typeface" cassait le design )
Modifié par 75lionel (16 Feb 2016 - 00:41)