CSS에서 글꼴 가중치 속성을 사용하는 방법
- 不言원래의
- 2018-12-10 16:39:585973검색
CSS의 글꼴 가중치 속성을 사용하여 텍스트의 두께를 설정합니다. 텍스트를 더 돋보이게 하고 싶다면 CSS의 글꼴 가중치 속성을 사용하여 텍스트를 굵게 만들 수 있습니다. 그래서 이번 글에서는 CSS의 Font-Weight 속성 사용법을 소개하겠습니다.
HTML 코드를 준비하자
코드는 다음과 같습니다
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <p class="sample1">加粗ABCabc123</p> <p class="sample2">加粗ABCabc123</p> </body> </html>
그럼 CSS에서 글꼴 가중치 속성을 적용합니다
글꼴 가중치 속성 사용 방법
가장 먼저 살펴보겠습니다 기본 속성값 normal과 굵은 글씨
p.sample1 {CSS에서 글꼴 가중치 속성을 사용하는 방법:normal; }
p.sample2 {CSS에서 글꼴 가중치 속성을 사용하는 방법:bold; }normal이 기본값이고 초기값은 이것으로 설정됩니다. 굵은 값을 설정하면 글꼴이 두꺼워집니다
브라우저에서 표시되는 효과는 다음과 같습니다
자세히 살펴보겠습니다숫자를 사용하여 텍스트의 두께를 지정합니다
먼저 위의 HTML 코드를 변경해 보겠습니다
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <p class="sample1">加粗ABCabc123</p> <p class="sample2">加粗ABCabc123</p> <p class="sample3">加粗ABCabc123</p> </body> </html>
CSS 코드는 다음과 같습니다
p.sample1 {CSS에서 글꼴 가중치 속성을 사용하는 방법:200; }
p.sample2 {CSS에서 글꼴 가중치 속성을 사용하는 방법:400; }
p.sample3 {CSS에서 글꼴 가중치 속성을 사용하는 방법:800; }값에 지정되는 유형은 100/200/300/400/500/600/600/600/800/900의 9단계입니다. 실제로는 2가지 유형만 있습니다. 브라우저에서 설정하면 페이지에는 하단 800만 표시됩니다. (값이 700 이상일 경우 굵게 표시 동일)
마지막으로 더 굵고 가벼워진
구체적인 예를 살펴보겠습니다
HTML 코드는 위와 동일합니다
CSS 코드는 다음과 같습니다
body {CSS에서 글꼴 가중치 속성을 사용하는 방법:bold; }
p.sample1 {CSS에서 글꼴 가중치 속성을 사용하는 방법:inherit; }
p.sample2 {CSS에서 글꼴 가중치 속성을 사용하는 방법:bolder; }
p.sample3 {CSS에서 글꼴 가중치 속성을 사용하는 방법:lighter; }브라우저에서의 표시 효과는 다음과 같습니다
첫 번째 줄의 텍스트는 상위 요소를 상속받아 굵게 표시됩니다
두 번째 줄의 텍스트는 설정되어 있습니다 굵게 표시하면 상위 요소보다 두껍기 때문에 텍스트의 첫 번째 줄과 동일합니다. 요소의 행은 동일합니다.
세 번째 줄은 상위 요소의 볼드체보다 가늘게 설정되어 일반 두께가 됩니다.
위 내용은 CSS에서 글꼴 가중치 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!