HTML의 글꼴 설정

HTML은 웹 페이지 작성 언어로, 가장 기본적인 요소 중 하나가 글꼴입니다. HTML을 통해 글꼴 유형, 크기 및 색상을 설정하여 텍스트 내용을 더 명확하게 만들 수 있습니다. 이 기사에서는 HTML에서 글꼴을 설정하는 방법과 몇 가지 주의 사항을 자세히 소개합니다.

1. HTML의 기본 글꼴 설정

HTML에서는 일반적으로 다음 태그를 사용하여 텍스트 글꼴을 설정합니다.

1. 태그

사용 형식은

Text content

그 중 size 속성은 글꼴 크기를 설정하는 데 사용되며 color 속성은 글꼴 색상을 설정하는 데 사용되며, 얼굴 속성은 글꼴 유형을 설정하는 데 사용됩니다. 다양한 속성 값 조합을 지정하여 다양한 글꼴 효과를 얻을 수 있습니다.

예:

이것은 빨간색, Arial 글꼴, 크기 4로 된 텍스트입니다.

2. 태그

태그는 다음 형식을 사용하여 텍스트 제목을 설정할 수 있습니다.

텍스트 콘텐츠

The 숫자 1 -6은 다양한 타이틀 레벨을 나타냅니다. 사용 시 필요에 따라 해당 숫자를 선택해야 합니다. 기본적으로 다양한 수준의 제목 글꼴 크기는 제목 수준이 낮아짐에 따라 작아지지만 CSS 스타일 시트 또는 인라인 스타일을 통해 수정할 수 있습니다.

예:

1차 수준 제목입니다

2차 수준 제목입니다

3. 태그

태그는 텍스트의 단락 형식을 설정할 수 있습니다. 형식은 다음과 같습니다.

텍스트 내용

태그 내의 텍스트는 자동으로 줄바꿈됩니다. 기본적으로 상단 및 하단 간격이 추가되어 조판을 더욱 아름답게 만듭니다.

2. HTML의 글꼴 속성

기본 글꼴 설정 태그 외에도 글꼴 스타일을 설정하는 데 사용할 수 있는 HTML의 일부 속성도 있습니다. 다음은 일반적으로 사용되는 글꼴 속성입니다.

1. size 속성

size 속성은 글꼴 크기를 설정하는 데 사용할 수 있습니다. 해당 속성 값은 1에서 7까지 7단계를 가질 수 있습니다. 숫자가 클수록 글꼴이 커집니다. 그러나 글꼴 크기를 변경하면 텍스트의 전체 레이아웃에 영향을 미치므로 주의해서 사용해야 합니다.

예:

크기 6의 글꼴입니다

2. color attribute

color 속성을 사용하여 글꼴 색상을 설정할 수 있습니다. 속성 값은 빨간색, 녹색 등의 색상 이름이나 #ff0000과 같은 16진수 색상 값을 사용할 수 있습니다.

예:

이것은 빨간색 글꼴입니다

이것은 녹색 글꼴입니다

3. 얼굴 속성

얼굴 속성을 사용하여 글꼴 유형을 설정할 수 있으며, 속성 값은 시스템 글꼴 또는 웹 글꼴이 될 수 있습니다. 그러나 사용자 컴퓨터에 정의된 글꼴이 없으면 웹 페이지는 대신 기본 글꼴을 사용하므로 전체적인 시각적 효과에 영향을 미칩니다.

예:

이것은 Arial 글꼴입니다

이것은 송나라 글꼴입니다

4. weight 속성

weight 속성은 글꼴 두께를 설정하는 데 사용할 수 있으며 속성 값은 일반, 굵게 또는 숫자(예: 100)일 수 있습니다.

예:

굵은 글꼴입니다

5. style attribute

style 속성은 기울임꼴, 밑줄과 같은 글꼴 스타일을 설정하는 데 사용할 수 있습니다. , 등. 속성 값은 이탤릭체, 일반, 밑줄 등이 될 수 있습니다.

예:

이것은 기울임꼴 글꼴입니다

이것은 밑줄 글꼴입니다

6. family 속성

family 속성을 사용하면 여러 글꼴 유형을 설정할 수 있습니다. 사용자 컴퓨터에 특정 글꼴이 없으면 시스템이 자동으로 다른 글꼴을 선택합니다. 속성 값은 쉼표로 구분됩니다.

예:

이것은 Songti 또는 SimSun 글꼴입니다

Three.Notes

1. CSS를 사용하여 글꼴 설정을 최적화하세요

HTML에서 사용하는 글꼴 스타일을 직접 설정하지만, 스타일시트(CSS)를 이용하면 좀 더 유연하고 편리하게 글꼴을 제어할 수 있습니다. 또한 스타일 시트는 글꼴 속성을 클래스나 ID로 정의한 다음 이를 여러 텍스트에 적용하여 코드 양을 크게 줄일 수 있습니다.

예를 들어 CSS에서 다음 스타일을 정의합니다.