web-dev-qa-db-fra.com

Comment définir une police 'semi-bold' via CSS? Le poids de la police de 600 ne le fait pas ressembler au demi-gras que je vois dans mon fichier Photoshop

Je fais une conversion de Photoshop en - XHTML , et le concepteur du site Web a utilisé la police Myriad Pro Semi-bold qui semble bonne dans le fichier Photoshop, mais Lorsque j'essaie l'option semi-gras en CSS, cela ressemble beaucoup à une police normale en gras, trop audacieuse pour mon propos. Existe-t-il un moyen d’obtenir des polices semi-gras plus jolies en HTML et CSS ou suis-je coincé avec 'font-weight: 600;'?

cssfonts
54
Simon Suh

La manière pratique est de mettre font-family à une valeur correspondant au nom spécifique de la version semibold, telle que

font-family: "Myriad pro Semibold"

si c’est le nom. (Personnellement, j'utilise mon propre outil de liste de polices , qui s'exécute sur Internet Explorer uniquement pour afficher les polices de mon système sous des noms utilisables en CSS.)

Dans cette approche, font-weight n'est pas nécessaire (et probablement pas mieux).

Les navigateurs Web ont mal appliqué les poids de police par livre: ils ne peuvent généralement pas trouver la version de poids spécifique, sauf gras. La solution de contournement consiste à inclure les informations dans le nom de famille de la police, même si ce n'est pas ainsi que les choses sont censées fonctionner.

Lors des tests avec Segoe UI, qui existe souvent sous différentes versions d’épaisseurs de police sur les systèmes Windows, j’ai pu faire en sorte qu’Internet Explorer 9 sélectionne la version appropriée lors de l’utilisation de l’approche logique (utilisation du nom de la famille de polices Segoe UI et de font-weight valeurs), mais il a échoué sous Firefox 9 et Chrome 16 (travail normal et gras uniquement). Sur tous ces navigateurs, par exemple, la définition de font-family: Segoe UI Light fonctionne bien.

38
Jukka K. Korpela

En CSS, pour le font-weight propriété, la valeur: normal par défaut est la valeur numérique 400 et bold à 700.

Si vous souhaitez spécifier d'autres poids, vous devez donner la valeur numérique. Cette valeur numérique doit être prise en charge pour la famille de polices que vous utilisez .

Par exemple, vous définiriez les caractères semi-gras comme ceci:

font-weight: 600;

Voici une JSFiddle utilisant la famille de polices 'Open Sans', chargée avec les poids ci-dessus.

59
Jesús Carrera

Pour moi, ce qui suit fonctionne bien. Ajoutez-le simplement. Vous pouvez le modifier selon vos besoins. Ceci est juste un bon tour que j'utilise.

text-shadow : 0 0 0 #your-font-color;
28
Raj

famille de polices: 'Open Sans'; poids de police: 600; important de changer de famille de polices

2
Martian2049

À la mi-2016, le moteur Chromium (v53) ne prend en charge que 3 styles d'accentuation:

Texte brut, gras et super gras ...

 <div style="font:normal 400 14px Arial;">Testing</div>

 <div style="font:normal 700 14px Arial;">Testing</div>

 <div style="font:normal 800 14px Arial;">Testing</div>
1
SomeUser

Sélectionnez les polices en spécifiant les poids dont vous avez besoin à la charge

Les familles de polices sont composées de plusieurs polices distinctes

Par exemple, extra-gras donnera à la police une apparence très différente dans Photoshop, par exemple, car vous sélectionnez une police différente. La même chose s'applique à la police italique, qui peut paraître très différente. Réglage font-weight:800 ou font-style:italic peut entraîner un effort maximum du navigateur Web pour grossir ou incliner la police normale de la famille .

Même si vous chargez une famille de polices, vous devez spécifier les poids et styles dont vous avez besoin pour que certains navigateurs Web vous permettent de sélectionner une police différente dans la famille avec font-weight et font-style.

Exemple

Cet exemple spécifie les polices claires, normales, italiques normales, gras et extra-gras de la famille de polices Open Sans:

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
    <style>
      body {
        font-family: 'Open Sans', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>    
    <div style="font-weight:400">Didn't work with all the fonts</div>
          <div style="font-weight:600">Didn't work with all the fonts</div>
          <div style="font-weight:800">Didn't work with all the fonts</div>
  </body>
</html>

Référence

(avertissement Quora, veuillez l'enlever s'il n'est pas autorisé.)

https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts

Essai

Testé dans Firefox 66.0.3 sur Mac et Firefox 36.0.1 sous Windows.

Polices non Google

Les autres polices doivent être téléchargées sur le serveur, le style et le poids étant spécifiés par leurs noms respectifs.

Polices système

Ne supposez rien, en ce qui concerne les polices, sur le périphérique visitant votre site Web ou sur les polices installées sur son système d'exploitation.

(Vous pouvez utiliser les solutions de remplacement serif et sans-serif, mais vous obtiendrez la police correspondante avec la version du navigateur Web utilisée, dans les polices disponibles dans la version du système d'exploitation sous laquelle il est exécuté, et non avec ce que vous avez conçu. )

Les tests doivent être effectués avec la police temporairement désinstallée de votre système, afin de vous assurer que votre conception est effective.

0
Henrik Erlandsson