Làm thế nào để làm cho phông chữ của tôi đậm bằng css?


249

Tôi rất mới với HTML và CSS và tôi chỉ tự hỏi làm thế nào tôi có thể làm cho phông chữ của mình được in đậm bằng CSS.

Tôi có một trang HTML đơn giản nhập tệp CSS và tôi có thể thay đổi phông chữ trong CSS. Nhưng tôi không biết làm thế nào để làm cho phông chữ đậm, bất cứ ai có thể giúp tôi?


6
Tôi đề nghị bạn đọc đặc tả CSS2, nó đưa ra lời giải thích rất kỹ lưỡng về những gì bạn có thể làm và cách thực hiện. Và nó cũng không quá khô. w3.org/TR/CSS2
Robert K

Câu trả lời:



76

Bạn có thể sử dụng các strongyếu tố trong html, đó là rất tốt ngữ nghĩa (cũng tốt cho người đọc màn hình vv), mà thường ám như chữ in đậm:

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

Hoặc bạn có thể sử dụng thuộc tính font-weightcss để tạo kiểu cho bất kỳ văn bản nào của phần tử là đậm:

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


Tôi đã đặt toàn bộ đoạn thứ 2 in đậm, vì vậy nó không nhấn mạnh các từ "văn bản in đậm", đó chỉ là phong cách.
GKFX

2
Nó chỉ tuyệt vời về mặt ngữ nghĩa nếu bạn đang cố gắng nhấn mạnh điều gì đó; nếu đó là một phong cách mà không cố gắng nhấn mạnh, <strong>yếu tố này là sai lệch về mặt ngữ nghĩa.
jtpereyda

34

Bạn sẽ sử dụng font-weight: bold.

Bạn có muốn làm cho toàn bộ tài liệu đậm? Hay chỉ là một phần của nó?


26

Sine bạn chưa quen với html ở đây có ba ví dụ sẵn sàng để sử dụng CSS cùng với html. Bạn có thể chỉ cần đặt chúng vào một tệp, lưu nó và mở nó lên với trình duyệt bạn chọn:

Cái này trực tiếp nhúng kiểu CSS của bạn vào thẻ / phần tử của bạn. Nói chung đây không phải là một cách tiếp cận hay, bởi vì bạn phải luôn tách nội dung / html khỏi thiết kế.

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

Cách tiếp theo là một cách tiếp cận tổng quát hơn và hoạt động trên tất cả các thẻ "p" (viết tắt của đoạn văn) trong tài liệu của bạn và phần bổ sung làm cho chúng LỚN. Btw. Google sử dụng phương pháp này trong tìm kiếm của mình:

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

Bạn có thể sẽ mất vài ngày để chơi xung quanh với các ví dụ đầu tiên, tuy nhiên đây là ví dụ cuối cùng. Cuối cùng, bạn hoàn toàn tách biệt thiết kế (css) và nội dung (html) với nhau trong hai tệp khác nhau. stackoverflow có cách tiếp cận này.

Trong một tệp, bạn đặt tất cả CSS (gọi nó là 'hello_world.css'):

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

Trong một tệp khác, bạn nên đặt html (gọi nó là '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> 

Hy vọng điều này sẽ giúp một chút. Đến các yếu tố cụ thể địa chỉ trong tài liệu của bạn và không phải tất cả thẻ bạn nên làm cho mình làm quen với class, idnamecác thuộc tính. Chúc vui vẻ!



8
Selector name{
font-weight:bold;
}

Giả sử bạn muốn làm đậm cho phần tử p

p{
font-weight:bold;
}

Bạn có thể sử dụng giá trị thay thế khác thay vì in đậm như

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


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>


-1

Bạn có thể sử dụng một vài cách tiếp cận. Đầu tiên sẽ là sử dụng thẻ mạnh

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

Một cách tiếp cận khác là sử dụng thuộc tính trọng lượng phông chữ. Bạn có thể đạt được nội tuyến, hoặc thông qua một lớp hoặc id. Giả sử bạn đang sử dụng một lớp học.

.className {
  font-weight: bold;
}

Ngoài ra, bạn cũng có thể sử dụng giá trị cứng cho trọng lượng phông chữ và hầu hết các phông chữ hỗ trợ giá trị trong khoảng từ 300 đến 700, tăng thêm 100. Ví dụ: phần sau sẽ được in đậm:

.className {
  font-weight: 700;
}

Câu trả lời khác đã bao gồm những điểm này. Làm thế nào để câu trả lời này thêm giá trị?
Basil Bourque
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.