반응형
CSS에서는 h1과 h2의 글꼴사이즈를 어떻게 변경합니까?
WordPress 2111 테마.h1 태그와 h2 태그로 제목을 묶을 때 다음과 같이 머리글 크기를 변경하고 싶다.
<h1>My h1 heading </h1>
<h2> My h2 heading </h2>
사용하고 있는 테마의 표제 글꼴 크기는 굵은 글씨만 제외하고 컨텐츠의 글꼴과 거의 동일합니다.그래서 내 머리글은 그다지 눈에 띄지 않는다.
CSS 파일을 변경해야 할 것 같습니다.정확히 무엇을 넣어야 하는지 알려주세요.
h1 {
font-weight: bold;
color: #fff;
font-size: 32px;
}
h2 {
font-weight: bold;
color: #fff;
font-size: 24px;
}
색상 뒤에 단어를 사용할 수 있습니다(예:white, 16진수 코드(예:#fff) 또는 RGB(예:rgb(255,255,255)또는 RGBA(예:rgba(255,255,255,0.3)).
h1 { font-size: 150%; }
h2 { font-size: 120%; }
필요에 따라서 튜닝 합니다.
뭘 해봤어?이거면 될 거야.
h1 { font-size: 20pt; }
h2 { font-size: 16pt; }
헤더를 특별히 변경하려면 이 방법이 훨씬 더 쉽습니다.
<style>
h1.increase {
font-size: 15px;
}
</style>
<h1 class="increase">Header</h1>
글꼴 크기만 변경하면 작은 장치 유형에서 텍스트가 교차할 수 있습니다.
<style>
.heading-1{
font-size: 350%!important;
}
</style>
<h1 class="heading-1">
Get in Touch
</h1>
응답성을 높이기 위해 회선 높이를 조정하는 것도 고려해 보십시오.
<style>
.heading-1{
font-size: 350%!important;
line-height: 120%!important;
}
</style>
<h1 class="heading-1">
Get in Touch
</h1>
Bootstrap CSS를 사용하면 신속하게 실행할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Larger Heading</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
</main>
</body>
</html>언급URL : https://stackoverflow.com/questions/10668056/in-css-how-do-you-change-font-size-of-h1-and-h2
반응형
'IT' 카테고리의 다른 글
| Word press 이동 후 로그인은 가능하지만 관리자 접근은 더 이상 (0) | 2023.03.14 |
|---|---|
| react-redux 종속성을 설치하는 동안 오류가 발생했습니다. (0) | 2023.03.14 |
| 각도(OR 연산)에서 여러 값을 필터링하는 방법JS (0) | 2023.03.14 |
| AngularJS: 폼이 유효하지 않은 필드를 판별할 수 있는 방법이 있습니까? (0) | 2023.03.14 |
| React 내부에 Polymer를 사용할 수 있습니까? (0) | 2023.03.14 |