CSS를 사용하여 글꼴을 굵게 만드는 방법은 무엇입니까?


249

HTML과 CSS를 처음 접했고 CSS를 사용하여 글꼴을 굵게 만드는 방법이 궁금했습니다.

CSS 파일을 가져 오는 일반 HTML 페이지가 있으며 CSS에서 글꼴을 변경할 수 있습니다. 그러나 글꼴을 굵게 만드는 방법을 모르는 사람이 있습니까?


6
CSS2 사양을 읽으십시오. 할 수있는 작업과 수행 방법에 대한 자세한 설명이 제공됩니다. 그리고 너무 건조하지도 않습니다. w3.org/TR/CSS2
Robert K

답변:



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>


두 번째 단락 전체를 굵게 표시했습니다. 따라서 "굵은 글씨"라는 단어를 강조하지 않고 그냥 스타일입니다.
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속성. 즐기세요!



8
Selector name{
font-weight:bold;
}

p 요소에 대해 굵게 표시하려고한다고 가정하십시오.

p{
font-weight:bold;
}

대담한 대신 다른 대체 값을 사용할 수 있습니다

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

몇 가지 접근 방식을 사용할 수 있습니다. 먼저 강력한 태그를 사용하는 것입니다

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

또 다른 방법은 font-weight 속성을 사용하는 것입니다. 인라인 또는 클래스 또는 ID를 통해 달성 할 수 있습니다. 수업을 사용한다고 가정 해 보겠습니다.

.className {
  font-weight: bold;
}

또는 글꼴 두께에 단단한 값을 사용할 수도 있고 대부분의 글꼴은 300에서 700 사이의 값을 100 씩 증가시켜 지원합니다. 예를 들어 다음은 굵게 표시됩니다.

.className {
  font-weight: 700;
}

다른 답변들은 이미이 요점들을 다루었습니다. 이 답변은 어떻게 가치를 더합니까?
Basil Bourque
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.