찾다
웹 프론트엔드CSS 튜토리얼CSS에서 글꼴 두께를 설정하는 방법

CSS에서는 글꼴 가중치 속성을 통해 글꼴 두께를 설정할 수 있습니다. 이 속성의 값이 "lighter"로 설정되면 얇은 스타일이고, 값이 "normal"이면 일반 두께입니다. , 값이 "굵게"이면 얇은 스타일이고, 값이 "굵게"이면 매우 굵은 스타일입니다.

CSS에서 글꼴 두께를 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS는 텍스트의 굵기를 세심하게 나눌 수 있고, 굵은 텍스트를 일반 두께 표시로 변경할 수도 있습니다. 텍스트의 두께는 CSS에서 font-weight 속성을 ​​통해 설정됩니다. 위 코드는 거의 모든 텍스트 두께 값을 포함하며 글꼴 자체는 굵게 표시될 수도 있고 일반 굵게 표시될 수도 있습니다. 예: font-weight设置,如上代码几乎涵盖了所有的文字粗细值,并且,可以是本身是粗体的字体,变成正常粗体。如:

.lighter {
    font-weight: lighter;
}
.normal {
    font-weight: normal;
}
.bold {
    font-weight: bold;
}
.bolder {
    font-weight: bolder;
}
<p class="lighter">字体粗细: lighter</p>
<p class="normal">字体粗细: normal</p>
<p class="bold">字体粗细: bold</p>
<p class="bolder">字体粗细: bolder</p>

上述代码定义了 4 种不同粗细的字体,按顺序依次变粗。运行结果如图 

CSS에서 글꼴 두께를 설정하는 방법

为了实现更细致的控制,CSS也允许使用数字来设置字体的粗细。数字必须是100的整数倍,取值在100~900 之间,值越大字体越粗。400 等同于 normal,700 等同于 bold。不同取值的结果如图 

CSS에서 글꼴 두께를 설정하는 방법

浏览器会自动为一些元素(如,strong、h1~h6 和b)添加粗体格式,有些元素还继承了父元素粗体格式,可以通过 font-weight: normalrrreeerrreee

위 코드는 두께가 다른 4개의 글꼴을 정의하며, 순서대로 두꺼워집니다. 실행 결과는 그림

font -weight 속성 효과

보다 세부적인 제어를 달성하기 위해 CSS에서는 숫자를 사용하여 글꼴의 두께. 숫자는 100의 정수배여야 하며 값은 100~900 사이입니다. 값이 클수록 글꼴이 굵어집니다. 400은 보통에 해당하고 700은 굵은 글씨에 해당합니다. 다양한 값의 결과는 그림 🎜🎜font-weight 속성 값 비교 테이블🎜🎜브라우저는 자동으로 일부 요소에 속성을 할당합니다(예: 강한, h1~h6 및 b) 굵은 형식 추가 일부 요소는 상위 요소의 굵은 형식도 상속합니다. font-weight: Normal을 통해 이러한 요소의 굵은 형식을 취소할 수 있습니다. 🎜🎜추천 학습: "🎜css 동영상 튜토리얼🎜"🎜

위 내용은 CSS에서 글꼴 두께를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Google 글꼴을 태그하고 Goofonts.com을 작성한 방법Google 글꼴을 태그하고 Goofonts.com을 작성한 방법Apr 12, 2025 pm 12:02 PM

Goofonts는 개발자 부인과 디자이너 남편이 서명 한 사이드 프로젝트로, 둘 다 타이포그래피의 큰 팬입니다. 우리는 Google에 태그를 지정했습니다

시대를 초월한 웹 개발 기사시대를 초월한 웹 개발 기사Apr 12, 2025 am 11:44 AM

Pavithra Kodmad

섹션 요소와의 거래섹션 요소와의 거래Apr 12, 2025 am 11:39 AM

두 기사가 정확히 같은 날에 출판되었습니다.

JavaScript API 상태로 GraphQL 쿼리를 연습하십시오JavaScript API 상태로 GraphQL 쿼리를 연습하십시오Apr 12, 2025 am 11:33 AM

GraphQL API를 구축하는 방법을 배우는 것은 매우 어려울 수 있습니다. 그러나 10 분 안에 GraphQL API를 사용하는 방법을 배울 수 있습니다! 그리고 그것은 완벽하게 얻었습니다

구성 요소 수준 CMS구성 요소 수준 CMSApr 12, 2025 am 11:09 AM

구성 요소가 데이터를 쿼리하는 환경에 거주하면 근처에 사는 경우 시각적 구성 요소와

오프셋 경로로 원에 유형을 설정하십시오오프셋 경로로 원에 유형을 설정하십시오Apr 12, 2025 am 11:00 AM

여기 Yuanchuan의 합법적 인 CSS 속임수입니다. 이 CSS 속성 오프셋 경로가 있습니다. 옛날 옛적에, 그것은 모션 경로라고 불렸다가 이름이 바뀌 었습니다. 나

CSS에서 '리버 트'는 무엇을합니까?CSS에서 '리버 트'는 무엇을합니까?Apr 12, 2025 am 10:59 AM

Miriam Suzanne 은이 주제에 대한 Mozilla 개발자 비디오에서 설명합니다.

현대 애호가현대 애호가Apr 12, 2025 am 10:58 AM

나는 이런 것들을 좋아한다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.