> 웹 프론트엔드 > 프런트엔드 Q&A > CSS에서 Microsoft Yahei 글꼴을 설정하는 방법

CSS에서 Microsoft Yahei 글꼴을 설정하는 방법

PHPz
풀어 주다: 2023-04-24 09:54:59
원래의
3631명이 탐색했습니다.

CSS(Cascading Style Sheets)는 웹 디자인에 사용되는 스타일 시트 언어로, 웹 페이지의 다양한 시각적 효과를 제어할 수 있습니다. 그 중에서도 폰트는 웹디자인에 있어서 가장 기본적이고 중요한 요소 중 하나입니다.

Microsoft Yahei는 뛰어난 가독성, 선명한 선, 편안한 글꼴을 갖춘 매우 우수한 글꼴입니다. 이 기사에서는 웹 페이지에서 사용하기 위해 CSS에서 Microsoft Yahei 글꼴을 설정하는 방법을 소개합니다.

먼저 웹 페이지 헤드에 CSS 스타일 시트를 선언합니다.

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
로그인 후 복사

여기에서는 Font Awesome 글꼴 라이브러리를 다운로드하지 않고도 웹 페이지에서 직접 사용할 수 있습니다. 글꼴 파일.

다음으로 다음 코드를 사용하여 CSS에서 글꼴을 설정할 수 있습니다.

body {
  font-family: "微软雅黑", sans-serif;
}
로그인 후 복사

이 예에서는 글꼴 계열을 "Microsoft Yahei"로 설정했으며 이 값은 지정된 글꼴 이름에 해당합니다. 또한 이 예에서는 대체 글꼴 모음을 "sans-serif"로 설정합니다(이 값은 지정된 글꼴을 사용할 수 없는 경우 브라우저가 자동으로 사용하는 일반 글꼴 클래스입니다).

이 CSS 규칙에서는 "body" 요소에 스타일 설정을 적용합니다. 이렇게 하면 본문 텍스트와 제목을 포함하여 모든 텍스트가 지정된 글꼴로 렌더링됩니다.

전체 문서가 아닌 특정 요소에 스타일을 적용하려면 해당 선택기를 사용할 수 있습니다. 예를 들어, 다음 스타일 규칙은 헤더 요소의 모든 텍스트가 Microsoft Yahei 글꼴을 사용하도록 합니다.

header {
  font-family: "微软雅黑", sans-serif;
}
로그인 후 복사

글꼴 모음 설정 외에도 글꼴 크기, 두께, 색상 등을 설정할 수도 있습니다. 예를 들어 다음 코드는 텍스트 글꼴 크기를 18픽셀로, 두께를 보통으로, 색상을 검정색으로 설정합니다.

body {
  font-size: 18px;
  font-weight: normal;
  color: #000000;
}
로그인 후 복사

여기서 "font-size" 속성은 글꼴 크기를 설정하고 "font-weight" 속성은 글꼴 크기를 설정합니다. 글꼴 두께("bold"는 굵게, "normal"은 일반 글꼴을 의미), "color" 속성은 글꼴 색상을 설정합니다.

CSS에서 Microsoft Yahei 글꼴을 사용할 때 letter-spacing(문자 간격), line-height(줄 높이), text-align( text)과 같은 더 많은 속성을 사용하여 글꼴의 스타일과 레이아웃을 제어할 수도 있습니다. 수평 정렬) 등이 있습니다.

즉, CSS를 사용하여 Microsoft Yahei 글꼴을 설정하는 것은 기본적이고 중요한 기술입니다. 이 기술을 익히면 웹 디자인을 더욱 전문적이고 아름답게 만들 수 있습니다. 이 기사의 소개를 통해 CSS에서 Microsoft Yahei 글꼴을 설정하는 방법을 처음으로 익혔기를 바랍니다.

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

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