>  기사  >  웹 프론트엔드  >  CSS에서 글꼴 두께를 설정하는 방법

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

醉折花枝作酒筹
醉折花枝作酒筹원래의
2021-04-07 16:37:5917159검색

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으로 문의하세요.