HTML 및 CSS를 통해 글꼴 스타일을 수정하는 방법-프런트엔드 Q&A-php.cn

HTML 및 CSS를 통해 글꼴 스타일을 수정하는 방법

PHPz

풀어 주다： 2023-04-13 11:28:55

원래의

898명이 탐색했습니다.

웹 디자인에서 글꼴은 매우 중요한 요소 중 하나입니다. 좋은 글꼴 선택은 웹 페이지의 가독성과 시각적 효과를 향상시킬 수 있습니다. HTML은 다양한 글꼴 선택을 제공하며 글꼴 스타일은 CSS를 통해 수정할 수도 있습니다. 이번 글에서는 HTML과 CSS를 통해 글꼴 스타일을 수정하는 방법을 살펴보겠습니다.

HTML에서 글꼴 선택

HTML에서는 선택할 수 있는 글꼴이 많습니다. 다음은 일반적인 글꼴의 몇 가지 예입니다.

<p style="font-family: Arial, sans-serif;">这里是Arial字体。</p>
<p style="font-family: "Times New Roman", serif;">这里是Times New Roman字体。</p>
<p style="font-family: Verdana, Geneva, sans-serif;">这里是Verdana字体。</p>
<p style="font-family: Impact, Charcoal, sans-serif;">这里是Impact字体。</p>

로그인 후 복사

위의 예에서는 글꼴 계열 속성을 사용하여 글꼴을 지정했습니다. 여기서는 서로 다른 스타일에 해당하는 Arial, Times New Roman, Verdana 및 Impact의 네 가지 글꼴을 지정했습니다. CSS 파일에 동일한 스타일을 정의하는 경우 이러한 스타일은 HTML 태그에 설정된 스타일을 재정의합니다.

CSS에서 글꼴 스타일 정의

CSS에서는 글꼴 계열 속성을 통해 글꼴 스타일을 정의할 수 있습니다. 예:

body {
  font-family: Arial, sans-serif;
}

로그인 후 복사

여기에서는 전체 페이지의 기본 글꼴을 Arial로 정의합니다. Arial 글꼴을 로드할 수 없는 경우 sans-serif 글꼴이 대신 사용됩니다.

font-family 속성 외에도 다른 속성을 통해 글꼴 스타일을 수정할 수도 있습니다. 다음은 몇 가지 일반적인 속성입니다.

font-size: 12px, 14px 등과 같은 글꼴 크기를 정의합니다.
font-style: 일반, 기울임꼴, 기울임꼴 등을 포함한 글꼴 스타일을 정의합니다.
font-weight: 보통, 굵게, 굵게 등 글꼴의 두께를 정의합니다.
line-height: 숫자 또는 백분율로 줄 높이를 정의합니다.

이러한 속성을 결합하여 다양한 글꼴 효과를 만들 수 있습니다. 예:

h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
}

로그인 후 복사

여기에서는 h1 제목의 글꼴을 Arial로, 글꼴 크기를 24px로, 글꼴 두께를 굵게, 줄 높이를 1.5배로 정의합니다.

웹 글꼴 사용

시스템에 내장된 글꼴을 사용하는 것 외에도 웹 글꼴을 사용할 수도 있습니다. 웹 글꼴은 브라우저에서 직접 사용할 수 있는 글꼴 형식으로 WOFF, WOFF2, TTF, OTF 등이 있습니다. 웹 글꼴을 사용하면 글꼴에 다양성과 독창성을 더할 수 있습니다.

웹 글꼴을 사용하려면 CSS에서 @font-face 규칙을 선언하면 됩니다. 예:

@font-face {
  font-family: MyWebFont;
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');
}

body {
  font-family: MyWebFont, Arial, sans-serif;
}

로그인 후 복사

여기에서는 먼저 "MyWebFont"라는 글꼴을 선언한 다음 src 속성을 통해 글꼴 파일의 주소를 지정합니다. Font-family 속성을 사용하면 여러 글꼴을 쉼표로 구분하여 사용할 수 있습니다. 이 예에서는 브라우저가 웹 글꼴을 로드할 수 없는 경우 시스템의 Arial 글꼴이 대신 사용됩니다.