CSS 페이지 글꼴 설정

CSS는 웹페이지의 스타일을 지정하여 웹페이지를 더욱 아름답고 읽기 쉽게 만드는 데 사용되는 언어입니다. 그 중 글꼴 설정은 CSS에서 가장 일반적으로 사용되는 중요한 부분 중 하나입니다. 적절한 글꼴 설정은 웹 사이트의 가독성과 시각적 효과를 향상시킬 수 있기 때문입니다. 이 문서에서는 CSS를 사용하여 페이지 글꼴을 설정하는 방법을 살펴보겠습니다.

1. 글꼴 계열 및 글꼴

CSS에서 글꼴 계열은 웹 사이트에서 사용되는 글꼴 계열을 나타냅니다. 예를 들어 글꼴 모음을 "Arial, sans-serif"로 설정할 수 있습니다. 즉, Arial 글꼴이 사용자 컴퓨터에 설치되지 않은 경우 CSS는 시스템의 기본 sans-serif 글꼴을 사용하려고 시도합니다.

글꼴(글꼴)은 글꼴 시리즈, 글꼴 크기, 글꼴 두께, 글꼴 스타일(예: 기울임꼴) 등을 포함하여 글꼴의 특정 속성을 나타냅니다. 다음은 일반적으로 사용되는 CSS 글꼴 속성입니다.

1. font-family: 글꼴 이름 또는 글꼴 모음.
2. font-size: 글꼴 크기, px, em, rem 단위 또는 상대적 크기 비율을 사용할 수 있습니다.
3. font-weight: 글꼴의 두께로 보통(기본값), 굵게 또는 숫자 값(100-900)일 수 있습니다.
4. font-style: 글꼴 스타일은 일반(기본값), 기울임꼴 또는 기울임꼴일 수 있습니다.

2. 페이지 글꼴 설정 방법

CSS에는 다음 세 가지 방법으로 글꼴을 설정할 수 있습니다.

1. @font-face를 사용하여 사용자 정의 글꼴을 가져옵니다.

@font-face {
글꼴 -family: 맞춤 -font;
src: url('path/to/font.woff2') 형식('woff2');
}

body {
글꼴 가족: 맞춤 글꼴, sans-serif;
글꼴 -size: 16px ;
}

이 예에서 "custom-font"는 우리가 정의한 글꼴 계열로, 경로가 "path/to/font.woff2"인 글꼴 파일을 나타냅니다. 그런 다음 이 글꼴은 body 요소에 적용되고 기본 글꼴은 sans-serif로 설정됩니다.

2. Google 글꼴 사용:

Google 글꼴은 선택할 수 있는 수백 가지 글꼴을 제공하는 무료 온라인 글꼴 라이브러리입니다. Google 글꼴을 사용하려면 HTML 문서의 헤드 섹션에 다음 코드를 추가하세요.

그런 다음 요소에 글꼴을 적용합니다.

body {
font-family: 'Open Sans', sans-serif;
글꼴 크기: 16px;
}

3. 시스템 기본 글꼴 사용:

페이지에서 시스템 기본 글꼴을 사용하도록 하려면 다음 코드를 사용할 수 있습니다:

body {
Font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell , “Helvetica Neue”, sans-serif ;
글꼴 크기: 16px;
}

시스템 기본 글꼴은 가독성이 좋은 경향이 있으므로 좋은 선택입니다.

3. 글꼴 크기 및 줄 높이 조정

글꼴 크기와 줄 높이는 가독성에 영향을 미치는 두 가지 요소입니다. CSS에서는 다음 코드를 사용하여 글꼴 크기와 줄 높이를 조정할 수 있습니다.

body {
font-size: 18px;
line-height: 1.6;

여기서 line-height는 줄 높이를 나타냅니다. 글꼴 크기 일반적으로 페이지 레이아웃을 아름답고 읽기 쉽게 만들 수 있는 1.4-1.6의 비율이 좋은 선택입니다.

4. 글꼴 두께와 스타일

글꼴 두께와 스타일은 글꼴의 가독성과 시각적 효과에도 영향을 줄 수 있습니다. CSS에서는 다음 코드를 사용하여 글꼴의 두께, 스타일 또는 둘 다를 변경할 수 있습니다.

body {

font-weight:bold;
}

p {

font-style: italic;
}

h1 {

글꼴 두께: 굵게;
글꼴 스타일: 기울임꼴;
}

5. 결론

적절한 글꼴 설정을 통해 웹 사이트의 가독성, 시각 효과 및 사용자 경험을 향상시킬 수 있습니다. 응용 프로그램에서는 웹 사이트의 테마와 대상 고객에 따라 적절한 글꼴 모음, 글꼴 크기, 두께, 스타일 및 줄 높이를 선택할 수 있습니다. 이를 통해 웹 사이트를 더욱 아름답고 읽기 쉽게 만들고 사용자에게 더 나은 서비스를 제공할 수 있습니다. 독서 경험.

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