> 웹 프론트엔드 > HTML 튜토리얼 > HTML과 CSS에서 글꼴을 굵게 만드는 세 가지 방법

HTML과 CSS에서 글꼴을 굵게 만드는 세 가지 방법

yulia
풀어 주다: 2018-10-31 15:05:49
원래의
17531명이 탐색했습니다.

웹사이트를 탐색할 때 페이지의 일부 텍스트나 글꼴이 굵게 표시되어 있는 것을 본 적이 있나요? HTML과 CSS를 배우는 친구들, HTML에서 텍스트를 굵게 표시하는 방법을 알고 있나요? CSS에서 글꼴 굵기를 설정하는 방법은 무엇입니까? 이 문서에서는 HTML 및 CSS 글꼴 볼드 스타일의 볼드 태그를 포함하여 글꼴과 텍스트를 볼드하게 만드는 세 가지 방법을 요약하고 있으며 관심 있는 친구들이 이를 참조할 수 있습니다.

글꼴과 텍스트를 굵게 표시하는 방법에는 세 가지가 있습니다. 하나는 CSS의 글꼴 두께: 굵은 스타일이고, 다른 하나는 HTML의 태그입니다. 첫 번째는 HTML의 태그입니다.

방법 1: CSS에서 글꼴 가중치: 굵은 스타일을 사용하여 글꼴을 굵게 만듭니다.

font-weight 속성은 글꼴의 두께 속성 값이 보통이면 일반 글꼴을 나타내며 이는 숫자 400에 해당합니다. 속성 값이 굵은 글꼴이면 숫자 700에 해당합니다. 또한 태그의 효과와 동일합니다.

인스턴스 설명: 두 개의 p 태그를 만들고 태그 중 하나에 클래스 이름을 지정하여 CSS 스타일링을 용이하게 합니다. 클래스 이름이 있는 p 태그에font-weight:bold 속성을 추가하고 두 p 태그를 비교하여 차이점을 확인하세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{font-weight: bold;}
</style>
</head>
<body>
<p>床前明月光</p>
<p class="aa">低头思故乡</p>
</body>
</html>
로그인 후 복사

아래 그림과 같습니다. , "아래를 내려다보고 생각하십시오. "고향"이라는 텍스트는 굵게 표시되었습니다.

HTML과 CSS에서 글꼴을 굵게 만드는 세 가지 방법

방법 2: html에서 굵은 태그 사용

태그는 글꼴을 굵게 표시하며 모든 주요 브라우저에서 지원됩니다.

설명 예: HTML에서 태그를 직접 사용하면 굵은 텍스트 효과를 얻을 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<strong>疑是地上霜</strong>
</body>
</html>
로그인 후 복사

그림과 같이 p 태그와 Strong 태그의 내용을 비교해 보면 Strong 태그의 내용이 굵게 표시되어 있는 것을 발견했습니다.

HTML과 CSS에서 글꼴을 굵게 만드는 세 가지 방법

방법 3: html에서 굵은 태그 사용

태그는 굵은 텍스트를 정의할 수 있으며 모든 주요 브라우저는 태그를 지원합니다.

예시 설명: 태그는 태그와 동일하며, 특정 코드를 사용하면 간단하고 편리합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<b>举头望明月</b>
</body>
</html>
로그인 후 복사

아래 그림과 같이 b 태그 안의 텍스트는 굵게 표시됩니다.

HTML과 CSS에서 글꼴을 굵게 만드는 세 가지 방법

#🎜 🎜#요약: 위에서 텍스트를 굵게 표시하는 세 가지 방법, 즉 CSS의 굵은 스타일과 HTML의 태그를 소개했습니다. html 태그를 직접 사용하세요. 어떤 방법을 선택해야 할까요? 이 글이 도움이 되길 바랍니다.

【관련 튜토리얼 권장 사항】

1,

html 및 CSS(그림 및 텍스트)의 텍스트에 취소선을 추가하는 세 가지 방법 #🎜🎜 #2.

HTML 튜토리얼

3

HTML온라인 매뉴얼

위 내용은 HTML과 CSS에서 글꼴을 굵게 만드는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿