28111 sujets

CSS et mise en forme, CSS3

Rendu des font-weight

Bonsoir
Je constate avec surprise que les diverses valeurs de font-weight, entre 100 et 900, n'ont pas l'ai d'être correctement traitées par les navigateurs: en gros c'est soit normal soit bold, point.
Mais c'est peut être dû aux polices que j'utilise?
Auriez vous des informations à ce sujet?
Merci de votre conseils sur la façon de contourner ce problème... ou pas
Modérateur
Bonsoir.

Alors une police de caractères regroupe des fontes. Chaque fonte a des caractéristiques précises: graisse (épaisseur), chasse (largeur), italique, etc.

La plupart des polices installées sur la plupart des machines sont des polices bon marché qui contiennent en général entre 1 et 4 fontes: normal, gras, italique, italique gras (par ordre de priorité). Pour une bonne partie des webfontes communes c'est aussi le cas (le développement d'une police de 40 fontes est très long, fastidieux et onéreux).

Concernant le CSS, les propriétés définies permettent d'aller chercher la fonte qui convient le mieux, la plus proche. Bien que ce ne soit pas officiellement dans la norme, la plupart des navigateurs offrent une version simulée du gras (700) et de l'italique. Mais que de ces variantes là (c'est déjà assez laid, pouser le vice plus loin serait un massacre).

Pour vraiment pouvoir utiliser d'autres graisses, inutile de compter sur les «web-safe fonts» genre Arial, times & compagnie qui n'en ont pas (du moins pas celles installées par défaut). Par contre dans les webfontes (gratuites), il en existe quelques unes qui ont des familles relativement importantes: Un exemple Raleway (https://fonts.google.com/specimen/Raleway?selection.family=Raleway) qui dispose de 9 variantes. Bien entendu pour des questions de performances je déconseille d'intégrer toutes les variantes d'une webfont (ce qui est d'ailleurs peu pertinent typographiquement), mais il n'est pas rare d'avoir besoin d'une light ou une heavy en sus du couple normal/bold.
Merci Kusto

C'est exactement la conclusion à laquelle j'étais parvenu.
La police que j'utilise a bien des variantes light, heavy, medium,xbold, voir le bas de la page http://tests.osirisnet.net/migration/manuals/newtitles3.html

Dans cette page de test, les <p> sont stylés en "medium", et j'aurais aimé styler les <strong> en mois gras que medium + bold, mais light + bold ne fait pas l'affaire.
J'ai mis AdelonSerial + bold mais ça n'a pas l'air de faire de différence
Modifié par PapyJP (01 Sep 2016 - 12:14)
Modérateur
C'est complètement un problème de déclaration.

Là chaque fonte est déclarée comme une police séparée avec les mêmes caractéristiques…

au lieu de:

@font-face {font-family: 'AdelonSerial-Bold';
	src: url('/webfonts/2F98F9_1_0.eot');
	src: url('/webfonts/2F98F9_1_0.eot?#iefix') format('embedded-opentype'),
		url('/webfonts/2F98F9_1_0.woff2') format('woff2'),
		url('/webfonts/2F98F9_1_0.woff') format('woff'),
		url('/webfonts/2F98F9_1_0.ttf') format('truetype'),
		url('/webfonts/2F98F9_1_0.svg#wf') format('svg');}
@font-face {font-family: 'AdelonSerial-Heavy';
	src: url('/webfonts/2F98F9_2_0.eot');
	src: url('/webfonts/2F98F9_2_0.eot?#iefix') format('embedded-opentype'),
		url('/webfonts/2F98F9_2_0.woff2') format('woff2'),
		url('/webfonts/2F98F9_2_0.woff') format('woff'),
		url('/webfonts/2F98F9_2_0.ttf') format('truetype'),
		url('/webfonts/2F98F9_2_0.svg#wf') format('svg');}


Il faudrait avoir:


@font-face {font-family: 'AdelonSerial';
	src: url('/webfonts/2F98F9_1_0.eot');
	src: url('/webfonts/2F98F9_1_0.eot?#iefix') format('embedded-opentype'),
		url('/webfonts/2F98F9_1_0.woff2') format('woff2'),
		url('/webfonts/2F98F9_1_0.woff') format('woff'),
		url('/webfonts/2F98F9_1_0.ttf') format('truetype'),
		url('/webfonts/2F98F9_1_0.svg#wf') format('svg');
        font-weight: bold; /** ou 700 **/
        font-style: normal;
}
@font-face {font-family: 'AdelonSerial';
	src: url('/webfonts/2F98F9_2_0.eot');
	src: url('/webfonts/2F98F9_2_0.eot?#iefix') format('embedded-opentype'),
		url('/webfonts/2F98F9_2_0.woff2') format('woff2'),
		url('/webfonts/2F98F9_2_0.woff') format('woff'),
		url('/webfonts/2F98F9_2_0.ttf') format('truetype'),
		url('/webfonts/2F98F9_2_0.svg#wf') format('svg');
        font-weight: 900;
        font-style: normal;
}


Pour les déclarer comme étant de la même police (en stipulant des variantes de caractéristiques)
Ok, je comprends mieux comment ça fonctionne.
Je m'étais simplement contenté de copier ce que m'a fourni le site qui m'a vendu cette police et ses variantes sans me plonger dans la compréhension du fonctionnement de ces polices.
Funeste erreur de ma part!
Je vais regarder cela à tête reposée.
Modérateur
p.s. : La solution d'utiliser des font-family différentes utilisée par plusieurs générateurs (dont myfonts) était très fréquent aux débuts et semble être faite pour certains problèmes de compatibilité IE 7 & 8, mais cela pose beaucoup de problèmes:

Il faut tout redéfinir à la main:

strong, bold, th, label, h1, h2, h3 […]{
  font-family: 'MaTypoBold', sans-serif;
  font-weight: normal; /** (pour éviter un faux-gras sur une font bold) **/
}
em, i, address, […]{
  font-family: 'MaTypoRegularItalic', sans-serif;
  font-style: normal; /** (pour éviter un faux-oblique sur une font italique) **/
}
/** et là ça devient tordu: **/
strong em, em strong, strong i, strong address, h1 em, h1 i, […] {
  font-family: 'MaTypoBoldItalic', sans-serif;
  font-weight: normal;
  font-style: normal;
}

En plus de s'ajouter ce travail fastidieux, cette méthode crée des problèmes lorsque on passe sur le fallback (typo indisponible, non prise en charge, désactivée par le user-agent) : Plus aucun gras/italique sur le site…
Modifié par kustolovic (02 Sep 2016 - 09:32)
Oui, il y a des polices qui ne prennent pas en considération les "weight". Du moins pour ce que j'ai découvert y a peu avec Helvetica neue et neue light..
Modérateur
Si Helvetica Neue ne prend pas en compte les weight moi je suis le pape, par contre il faut en disposer des ces «weight». Cet police contient une cinquantaine de variantes (mais coûte dans les 500$ pour les acquérir). Si vous avez une version packagée «gratuite» avec votre OS ou une application, vous n'avez probablement que le gras et le normal.
Bonjour,

Je déterre le sujet.

Pour obtenir un semi-bold équivalent à font-weight : 600, pas de salut en dehors de @font qui ressemble un peu à une galère ?

Sur une page Google, il me semble que les liens en bleu sont en semi-bold.
Bonjour,

Et Google Fonts, qu'en pensez-vous ?

Je l’utilise en test, facile à mettre en œuvre, grand choix dans toutes les polices, toutes les graisses.
Modifié par boteha_2 (17 Sep 2017 - 18:38)
Sujet clos
Aller à