Comment rendre ma police en gras en utilisant CSS?

249

Je suis très nouveau en HTML et CSS et je me demandais simplement comment je pourrais rendre ma police en gras en utilisant CSS.

J'ai une page HTML simple qui importe un fichier CSS et je peux changer la police dans le CSS. Mais je ne sais pas comment mettre la police en gras, quelqu'un peut-il m'aider?

css peter-b
la source
6
Je vous suggère de lire la spécification CSS2, elle donne une explication très approfondie de ce que vous pouvez faire et comment le faire. Et ce n'est pas trop sec non plus. w3.org/TR/CSS2
Robert K
doublon possible de comment mettre des mots en gras dans un paragraphe en html / css?
Ejaz

Réponses:

76

Vous pouvez utiliser l' strongélément en html, qui est très bien sémantiquement (également bon pour les lecteurs d'écran, etc.), qui s'affiche généralement en texte gras:

See here, some <strong>emphasized text</strong>.
Développer l'extrait

Ou vous pouvez utiliser la font-weightpropriété css pour styliser le texte de n'importe quel élément en gras:

span { font-weight: bold; }
<p>This is a paragraph of <span>bold text</span>.</p>
Développer l'extrait

erenon
la source
J'ai mis tout le 2ème paragraphe en gras, donc ça ne met pas l'accent sur les mots "texte en gras", c'est juste du style.
GKFX du
2
Ce n'est génial que si vous essayez de mettre l'accent sur quelque chose; si c'est un style sans essayer de le souligner, l' <strong>élément est sémantiquement trompeur.
jtpereyda
34

Vous utiliseriez font-weight: bold.

Voulez-vous mettre l'intégralité du document en gras? Ou juste des parties?

David Wolever
la source
26

Sine vous êtes nouveau en html voici trois exemples prêts à l'emploi sur la façon d'utiliser CSS avec html. Vous pouvez simplement les mettre dans un fichier, l'enregistrer et l'ouvrir avec le navigateur de votre choix:

Celui-ci intègre directement votre style CSS dans vos balises / éléments. Généralement, ce n'est pas une très bonne approche, car vous devez toujours séparer le contenu / html de la conception.

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
    </head>           
    <body>
        <p style="font-weight:bold;">Hi, I'm very bold!</p>
    </body>
</html>

Le suivant est une approche plus générale et fonctionne sur toutes les balises "p" (signifie paragraphe) dans votre document et les rend en plus ÉNORMES. Btw. Google utilise cette approche dans sa recherche:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
        <style type="text/css">
            p {
              font-weight:bold;
              font-size:26px;
            }
        </style>
    </head>   
    <body>
        <p>Hi, I'm very bold and HUGE!</p>
    </body>
</html>

Il vous faudra probablement quelques jours pour jouer avec les premiers exemples, mais voici le dernier. En cela, vous séparez enfin complètement la conception (css) et le contenu (html) dans deux fichiers différents. stackoverflow adopte cette approche.

Dans un fichier, vous mettez tous les CSS (appelez-le 'hello_world.css'):

  p {
    font-weight:bold;
    font-size:26px;
  }

Dans un autre fichier, vous devez mettre le html (appelez-le 'hello_world.html'):

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
        <link rel="stylesheet" type="text/css" href="hello_world.css" />  
    </head>       
    <body>
        <p>Hi, I'm very bold and HUGE!</p>
    </body>
</html>

Espérons que cela aide un peu. Pour les éléments spécifiques d'adresse dans votre document et non pas tous les tags que vous devriez vous familiariser avec les class, idet les nameattributs. S'amuser!

merkuro
la source
8 
Selector name{
font-weight:bold;
}

Supposons que vous souhaitiez mettre en gras l'élément p

p{
font-weight:bold;
}

Vous pouvez utiliser une autre valeur alternative au lieu de gras comme

p{
 font-weight:bolder;
 font-weight:600;
}
Santosh Khalse
la source
7 
font-weight: bold
Mémoire insuffisante
la source
7 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
   body
   {
      font-weight: bold;
   }
</STYLE>
</HEAD>
<BODY>
Body text is now bold.
</BODY>
</HTML>
Ian Boyd
la source
-1

Vous pouvez utiliser quelques approches. La première serait d'utiliser la balise forte

Here is an <strong>example of that tag</strong>.

Une autre approche consisterait à utiliser la propriété font-weight. Vous pouvez réaliser en ligne, ou via une classe ou un identifiant. Disons que vous utilisez une classe.

.className {
  font-weight: bold;
}

Alternativement, vous pouvez également utiliser une valeur fixe pour le poids de police et la plupart des polices prennent en charge une valeur comprise entre 300 et 700, incrémentée de 100. Par exemple, ce qui suit serait en gras:

.className {
  font-weight: 700;
}
Andrew Tuzson
la source
D'autres réponses ont déjà couvert ces points. Comment cette réponse ajoute-t-elle de la valeur?
Basil Bourque