Font-size 16 px 12pt 1em de quoi ?

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)

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)

Bonsoir,
En complément, notion de typographie :
Corps
Petit guide des polices et de la typographie
Toujours utiles...

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)

Bonjour,

Science, art, technique...

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...

.....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 :


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)