Jak pogrubić czcionkę za pomocą css?

249

Jestem bardzo nowy w HTML i CSS i zastanawiałem się, jak mogę pogrubić czcionkę za pomocą CSS.

Mam zwykłą stronę HTML, która importuje plik CSS, i mogę zmienić czcionkę w CSS. Ale nie wiem, jak pogrubić czcionkę, czy ktoś może mi pomóc?

css Peter-b
źródło
6
Sugeruję przeczytanie specyfikacji CSS2, która bardzo dokładnie wyjaśnia, co możesz zrobić i jak to zrobić. I też nie jest zbyt sucho. w3.org/TR/CSS2
Robert K,
możliwy duplikat pogrubienia słów w akapicie w html / css?
Ejaz

Odpowiedzi:

76

Możesz użyć tego strongelementu w html, który jest świetny semantycznie (również dobry dla czytników ekranu itp.), Który zazwyczaj renderuje się jako pogrubiony tekst:

See here, some <strong>emphasized text</strong>.
Rozwiń fragment kodu

Można też użyć do font-weightwłaściwości CSS do stylu tekstu dowolny element jako pogrubione:

span { font-weight: bold; }
<p>This is a paragraph of <span>bold text</span>.</p>
Rozwiń fragment kodu

erenon
źródło
Cały drugi akapit pogrubiłem, więc nie podkreśla słów „pogrubiony tekst”, to po prostu styl.
GKFX,
2
Jest to świetne semantycznie tylko wtedy, gdy próbujesz coś podkreślić; jeśli jest to styl bez próby podkreślenia, <strong>element jest semantycznie wprowadzający w błąd.
jtpereyda
34

Użyłbyś font-weight: bold.

Czy chcesz, aby cały dokument był pogrubiony? Czy tylko jego części?

David Wolever
źródło
26

Ponieważ jesteś nowy w html, oto trzy gotowe do użycia przykłady użycia CSS razem z html. Możesz po prostu umieścić je w pliku, zapisać i otworzyć w wybranej przeglądarce:

Ten bezpośrednio osadza Twój styl CSS w twoich tagach / elementach. Zasadniczo nie jest to bardzo miłe podejście, ponieważ zawsze należy oddzielić zawartość / HTML od projektu.

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

Następny jest bardziej ogólnym podejściem i działa na wszystkich znacznikach „p” (skrót akapitu) w twoim dokumencie, a dodatkowo czyni je OGROMNYMI. Btw. Google stosuje to podejście podczas wyszukiwania:

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

Prawdopodobnie poświęcisz kilka dni na zapoznanie się z pierwszymi przykładami, jednak tutaj jest ostatni. W ten sposób w końcu oddzielasz całkowicie projekt (css) i treść (html) od siebie w dwóch różnych plikach. stackoverflow przyjmuje to podejście.

W jednym pliku umieścisz cały CSS (nazwij go „hello_world.css”):

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

W innym pliku powinieneś umieścić HTML (nazwij go „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>

Mam nadzieję, że to trochę pomoże. Do elementów specyficznych adres w dokumencie i nie wszystkie znaczniki należy zrobić sobie znać class, idi nameatrybutów. Baw się dobrze!

merkuro
źródło
8 
Selector name{
font-weight:bold;
}

Załóżmy, że chcesz pogrubić element p

p{
font-weight:bold;
}

Możesz użyć innej alternatywnej wartości zamiast pogrubionej jak

p{
 font-weight:bolder;
 font-weight:600;
}
Santosh Khalse
źródło
7 
font-weight: bold
Brak pamięci
źródło
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
źródło
-1

Możesz użyć kilku podejść. Najpierw byłoby użyć silnego znacznika

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

Innym podejściem byłoby użycie właściwości font-weight. Możesz osiągnąć inline lub poprzez klasę lub identyfikator. Powiedzmy, że używasz klasy.

.className {
  font-weight: bold;
}

Alternatywnie można również użyć twardej wartości dla grubości czcionki, a większość czcionek obsługuje wartość między 300 a 700, zwiększoną o 100. Na przykład, pogrubienie byłoby następujące:

.className {
  font-weight: 700;
}
Andrew Tuzson
źródło
Inne odpowiedzi już dotyczyły tych punktów. Jak ta odpowiedź dodaje wartości?
Basil Bourque