Wie mache ich meine Schrift mit CSS fett?

249

Ich bin sehr neu in HTML und CSS und habe mich nur gefragt, wie ich meine Schrift mit CSS fett machen kann.

Ich habe eine einfache HTML-Seite, die eine CSS-Datei importiert, und ich kann die Schriftart im CSS ändern. Aber ich weiß nicht, wie ich die Schrift fett machen soll. Kann mir jemand helfen?

css Peter-b
quelle
6
Ich schlage vor, dass Sie die CSS2-Spezifikation lesen. Sie enthält eine sehr gründliche Erklärung, was Sie tun können und wie es geht. Und es ist auch nicht zu trocken. w3.org/TR/CSS2
Robert K
Mögliches Duplikat, wie Wörter in einem Absatz in HTML / CSS fett gedruckt werden?
Ejaz

Antworten:

76

Sie können das strongElement in HTML verwenden, das semantisch großartig ist (auch gut für Bildschirmleseprogramme usw.) und normalerweise fett gedruckt wird:

See here, some <strong>emphasized text</strong>.
Erweitern Sie das Snippet

Oder Sie können die font-weightCSS-Eigenschaft verwenden , um den Text eines Elements fett zu gestalten:

span { font-weight: bold; }
<p>This is a paragraph of <span>bold text</span>.</p>
Erweitern Sie das Snippet

erenon
quelle
Ich habe den gesamten zweiten Absatz fett gedruckt, damit die Wörter "fett" nicht hervorgehoben werden, sondern nur der Stil.
GKFX
2
Semantisch ist es nur dann großartig, wenn Sie versuchen, etwas hervorzuheben. Wenn es sich um einen Stil handelt, ohne ihn hervorzuheben, ist das <strong>Element semantisch irreführend.
Jtpereyda
34

Du würdest benutzen font-weight: bold.

Möchten Sie das gesamte Dokument fett formatieren? Oder nur Teile davon?

David Wolever
quelle
26

Da Sie neu in HTML sind, finden Sie hier drei gebrauchsfertige Beispiele für die Verwendung von CSS zusammen mit HTML. Sie können sie einfach in eine Datei einfügen, speichern und mit dem Browser Ihrer Wahl öffnen:

Dieser bettet Ihren CSS-Stil direkt in Ihre Tags / Elemente ein. Im Allgemeinen ist dies kein sehr guter Ansatz, da Sie den Inhalt / HTML-Code immer vom Design trennen sollten.

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

Der nächste ist ein allgemeinerer Ansatz und arbeitet mit allen "p" -Tags (steht für Absatz) in Ihrem Dokument und macht sie zusätzlich RIESIG. Übrigens. Google verwendet diesen Ansatz für seine Suche:

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

Sie werden wahrscheinlich ein paar Tage brauchen, um mit den ersten Beispielen herumzuspielen, aber hier ist das letzte. Dabei trennen Sie Design (CSS) und Inhalt (HTML) in zwei verschiedenen Dateien vollständig voneinander. Der Stackoverflow verfolgt diesen Ansatz.

In eine Datei legen Sie das gesamte CSS (nennen Sie es 'hello_world.css'):

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

In eine andere Datei sollten Sie das HTML einfügen (nennen Sie es '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>

Hoffe das hilft ein wenig. Um Adresse bestimmte Elemente in Ihrem Dokument und nicht alle Tags sollten Sie sich vertraut machen mit den class, idund nameAttribute. Habe Spaß!

Merkuro
quelle
8 
Selector name{
font-weight:bold;
}

Angenommen, Sie möchten das Element p fett machen

p{
font-weight:bold;
}

Sie können einen anderen alternativen Wert anstelle von Fettdruck verwenden

p{
 font-weight:bolder;
 font-weight:600;
}
Santosh Khalse
quelle
7 
font-weight: bold
OutOfMemory
quelle
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
quelle
6

Schriftdicke: fett;

Luixv
quelle
-1

Sie könnten ein paar Ansätze verwenden. Zunächst müsste das starke Tag verwendet werden

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

Ein anderer Ansatz wäre die Verwendung der Eigenschaft font-weight. Sie können inline oder über eine Klasse oder ID erreichen. Angenommen, Sie verwenden eine Klasse.

.className {
  font-weight: bold;
}

Alternativ können Sie auch einen harten Wert für die Schriftgröße verwenden. Die meisten Schriftarten unterstützen einen Wert zwischen 300 und 700, der um 100 erhöht wird. Folgendes wäre beispielsweise fett gedruckt:

.className {
  font-weight: 700;
}
Andrew Tuzson
quelle
Andere Antworten behandelten diese Punkte bereits. Wie schafft diese Antwort einen Mehrwert?
Basil Bourque