วิธีทำให้แบบอักษรของฉันเป็นตัวหนาโดยใช้ css

249

ฉันยังใหม่กับ HTML และ CSS มากและฉันก็แค่สงสัยว่าฉันจะทำให้ตัวอักษรของฉันกล้าใช้ CSS

ฉันมีหน้า HTML ธรรมดาที่นำเข้าไฟล์ CSS และฉันสามารถเปลี่ยนแบบอักษรใน CSS แต่ฉันไม่รู้วิธีทำให้ตัวอักษรเป็นตัวหนาใคร ๆ สามารถช่วยฉันได้บ้าง

css

— Peter-B
แหล่งที่มา

6

ฉันขอแนะนำให้คุณอ่านข้อกำหนดของ CSS2 ซึ่งจะให้คำอธิบายอย่างละเอียดเกี่ยวกับสิ่งที่คุณสามารถทำได้และวิธีการทำ และไม่แห้งเกินไป w3.org/TR/CSS2

— Robert K

เป็นไปได้ที่ซ้ำกันของวิธีการใช้ตัวหนาในย่อหน้าใน html / css?

— Ejaz

295

font-weight: bold;คุณสามารถใช้การประกาศแบบ CSS

ผมจะแนะนำให้คุณอ่านคู่มือการเริ่มต้น CSS ที่http://htmldog.com/guides/cssbeginner/

— Wolfr
แหล่งที่มา

76

คุณสามารถใช้องค์ประกอบใน html ซึ่งเป็นที่ดีความหมาย (ยังดีสำหรับโปรแกรมอ่านหน้าจออื่น ๆ ) ซึ่งมักจะแสดงผลเป็นตัวหนา:strong

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

ขยายตัวอย่างข้อมูล

หรือคุณสามารถใช้คุณสมบัติ CSSสไตล์ข้อความองค์ประกอบใด ๆ ที่เป็นตัวหนา:font-weight

span { font-weight: bold; }

<p>This is a paragraph of <span>bold text</span>.</p>

ขยายตัวอย่างข้อมูล

— erenon
แหล่งที่มา

ฉันใส่ย่อหน้าที่สองทั้งหมดไว้ในตัวหนาดังนั้นจึงไม่เน้นคำว่า "ข้อความตัวหนา" เป็นเพียงรูปแบบ

— GKFX

2

มันยอดเยี่ยมทางความหมายถ้าคุณพยายามเน้นบางสิ่งบางอย่างเท่านั้น หากเป็นสไตล์โดยไม่พยายามเน้น<strong>องค์ประกอบจะทำให้เข้าใจผิดทางความหมาย

— jtpereyda

34

font-weight: boldคุณต้องการใช้

คุณต้องการทำให้เอกสารทั้งหมดเป็นตัวหนาหรือไม่ หรือเพียงแค่บางส่วนของมัน

— เดวิดโวเลเวอร์
แหล่งที่มา

26

เพราะคุณยังใหม่ต่อ html นี่คือสามตัวอย่างพร้อมที่จะใช้วิธีการใช้ CSS ร่วมกับ html คุณสามารถใส่ลงในไฟล์บันทึกและเปิดมันด้วยเบราว์เซอร์ที่คุณต้องการ:

อันนี้โดยตรงฝังสไตล์ CSS ของคุณลงในแท็ก / องค์ประกอบของคุณ โดยทั่วไปนี่ไม่ใช่วิธีที่ดีมากเพราะคุณควรแยกเนื้อหา / 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>  
    </head>           
    <body>
        <p style="font-weight:bold;">Hi, I'm very bold!</p>
    </body>
</html>

วิธีถัดไปคือวิธีการทั่วไปและใช้งานได้กับทุกแท็ก "p" (ย่อมาจากย่อหน้า) ในเอกสารของคุณ Btw Google ใช้วิธีนี้กับการค้นหาของเขา:

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

คุณอาจใช้เวลาสองสามวันในการเล่นกับตัวอย่างแรกอย่างไรก็ตามนี่คือตัวอย่างสุดท้าย ในที่สุดคุณก็แยกการออกแบบ (css) และเนื้อหา (html) ออกจากกันโดยสมบูรณ์ในสองไฟล์ที่แตกต่างกัน stackoverflow ใช้วิธีนี้

ในไฟล์เดียวคุณใส่ CSS ทั้งหมด (เรียกว่า 'hello_world.css'):

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

ในไฟล์อื่นคุณควรใส่ html (เรียกว่า '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>

หวังว่านี่จะช่วยได้เพียงเล็กน้อย องค์ประกอบเฉพาะที่อยู่ในเอกสารของคุณและไม่แท็กทั้งหมดที่คุณควรทำให้ตัวเองคุ้นเคยกับclass, idและnameคุณลักษณะ มีความสุข!

— merkuro
แหล่งที่มา

14

ใช้font-weightคุณสมบัติCSS

— clawr
แหล่งที่มา

8

Selector name{
font-weight:bold;
}

สมมติว่าคุณต้องการสร้างตัวหนาสำหรับองค์ประกอบ p

p{
font-weight:bold;
}

คุณสามารถใช้ค่าทางเลือกอื่นแทนค่าตัวหนา

p{
 font-weight:bolder;
 font-weight:600;
}

— Santosh Khalse
แหล่งที่มา

7

font-weight: bold

— ความจำเต็ม
แหล่งที่มา

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
แหล่งที่มา

6

น้ำหนักตัวอักษร: ตัวหนา;

— Luixv
แหล่งที่มา

-1

คุณสามารถใช้วิธีการสองสามอย่าง ก่อนอื่นต้องใช้แท็กที่คาดเดายาก

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

อีกวิธีคือการใช้คุณสมบัติน้ำหนักตัวอักษร คุณสามารถบรรลุแบบอินไลน์หรือผ่านชั้นเรียนหรือรหัส สมมติว่าคุณกำลังใช้คลาส

.className {
  font-weight: bold;
}

หรือคุณสามารถใช้ค่าแบบหนักสำหรับฟอนต์น้ำหนักและฟอนต์ส่วนใหญ่รองรับค่าระหว่าง 300 และ 700 เพิ่มขึ้น 100 ตัวอย่างเช่นตัวอักษรต่อไปนี้จะเป็นตัวหนา:

.className {
  font-weight: 700;
}

— Andrew Tuzson
แหล่งที่มา

คำตอบอื่น ๆ ครอบคลุมประเด็นเหล่านี้แล้ว คำตอบนี้เพิ่มคุณค่าอย่างไร?

— Basil Bourque