Bagaimana cara membuat font saya tebal menggunakan css?

249

Saya sangat baru dalam HTML dan CSS dan saya hanya ingin tahu bagaimana saya dapat membuat font saya tebal menggunakan CSS.

Saya memiliki halaman HTML biasa yang mengimpor file CSS, dan saya dapat mengubah font di CSS. Tapi saya tidak tahu bagaimana membuat huruf tebal, adakah yang bisa membantu saya?

css peter-b
sumber
6
Saya menyarankan Anda membaca spesifikasi CSS2, itu memberikan penjelasan yang sangat menyeluruh tentang apa yang dapat Anda lakukan dan bagaimana melakukannya. Dan juga tidak terlalu kering. w3.org/TR/CSS2
Robert K
mungkin duplikat bagaimana cara tebal kata dalam suatu paragraf di html / css?
Ejaz

Jawaban:

76

Anda dapat menggunakan yang strongelemen di html, yang besar semantik (juga baik untuk pembaca layar dll), yang biasanya menjadikan sebagai teks tebal:

See here, some <strong>emphasized text</strong>.
Luaskan cuplikan

Atau Anda dapat menggunakan yang font-weightproperti css untuk gaya teks setiap elemen sebagai tebal:

span { font-weight: bold; }
<p>This is a paragraph of <span>bold text</span>.</p>
Luaskan cuplikan

erenon
sumber
Saya telah menempatkan seluruh paragraf ke-2 dalam huruf tebal, jadi itu tidak menekankan kata-kata "teks tebal", itu hanya gaya.
GKFX
2
Hanya bagus secara semantik jika Anda mencoba untuk menekankan sesuatu; jika itu adalah gaya tanpa berusaha untuk menekankan, <strong>elemen tersebut secara semantik menyesatkan.
jtpereyda
34

Anda akan menggunakan font-weight: bold.

Apakah Anda ingin membuat seluruh dokumen tebal? Atau hanya sebagian saja?

David Wolever
sumber
26

Karena Anda baru mengenal html, berikut adalah tiga contoh siap pakai tentang cara menggunakan CSS bersama-sama dengan html. Anda cukup memasukkannya ke dalam file, menyimpannya dan membukanya dengan browser pilihan Anda:

Yang ini langsung menyematkan gaya CSS Anda ke tag / elemen Anda. Secara umum ini bukan pendekatan yang sangat bagus, karena Anda harus selalu memisahkan konten / html dari desain.

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

Yang berikutnya adalah pendekatan yang lebih umum dan bekerja pada semua tag "p" (singkatan dari paragraf) dalam dokumen Anda dan selanjutnya membuatnya menjadi BESAR. Btw. Google menggunakan pendekatan ini pada pencariannya:

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

Anda mungkin perlu beberapa hari untuk bermain-main dengan contoh-contoh pertama, namun di sini adalah yang terakhir. Dalam hal ini Anda akhirnya sepenuhnya memisahkan desain (css) dan konten (html) dari satu sama lain dalam dua file berbeda. stackoverflow mengambil pendekatan ini.

Dalam satu file Anda meletakkan semua CSS (sebut saja 'hello_world.css'):

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

Di file lain Anda harus meletakkan html (sebut saja '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>

Semoga ini bisa membantu sedikit. Untuk mengatasi elemen tertentu dalam dokumen Anda dan tidak semua tag, Anda harus membuat diri Anda terbiasa dengan class, iddan nameatribut. Selamat bersenang-senang!

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

Misalkan Anda ingin membuat tebal untuk elemen p

p{
font-weight:bold;
}

Anda dapat menggunakan nilai alternatif lain daripada yang tebal

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

font-weight: bold;

Luixv
sumber
-1

Anda bisa menggunakan beberapa pendekatan. Pertama adalah menggunakan tag yang kuat

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

Pendekatan lain adalah dengan menggunakan properti font-weight. Anda dapat mencapai inline, atau melalui kelas atau id. Katakanlah Anda menggunakan kelas.

.className {
  font-weight: bold;
}

Atau, Anda juga dapat menggunakan nilai keras untuk font-weight dan sebagian besar font mendukung nilai antara 300 dan 700, ditambah 100. Sebagai contoh, berikut ini akan dicetak tebal:

.className {
  font-weight: 700;
}
Andrew Tuzson
sumber
Jawaban lain sudah mencakup poin-poin ini. Bagaimana Jawaban ini menambah nilai?
Basil Bourque