Référence version en gras sans utiliser font-weight: bold?

Question

Je utilise des polices web sur un site. Pour certains en-têtes (h1, h2, etc.) je utilise des variantes en gras (et réglant font-weight à normal) parce qu'elles sont bien meilleures que d'utiliser la variante régulière et laisser les balises h avec le poids en gras par défaut. Il est nécessaire de spécifier font-weight: normal parce que sinon "le gras est mis en gras", ce qui est vraiment terrible.

Le problème que j'ai est, comment spécifier des polices web standards comme polices de secours et avoir le réglage en gras "restauré" ?

Par exemple, je pourrais faire quelque chose comme :

@font-face {
    font-family: "Ma police web en gras";
    src: url("url/de/la/police/web/variante/gras");
}

h1 {
    font-family: "Ma police web en gras", Arial, sans-serif;
    font-weight: normal; 
}

Tant que la police web est présente, nous n'avons pas de problème, mais si la police web échoue, nous nous retrouvons avec du Arial non gras.

Y a-t-il un moyen de spécifier "Arial en gras" dans le font-family du h1 (je sais que cela ne fonctionne pas, mais c'est l'objectif désiré) ? Ou peut-être dans la définition de @font-face je peux dire "cela s'applique uniquement à la version en gras de ce à quoi elle est attribuée" - donc je peux omettre font-weight: normal du style h1 ?

Answer 1

Essayez de spécifier font-weight: bold aux deux endroits :

@font-face {
    font-family: "Ma police web en gras";
    src: url("url/de/la/police/web/en/gras");
    font-weight: bold;
}

h1 {
    font-family: "Ma police web en gras", Arial, sans-serif;
    font-weight: bold;
}

Voici une démo. p#one montre cette technique en action ; si vous regardez dans un navigateur qui ne prend pas en charge les polices web WOFF, vous verrez la police par défaut en gras.