멋진 배경과 색상 외에도 글꼴 설정도 웹 디자인의 중요한 부분입니다. 적절한 글꼴은 페이지를 더욱 아름답게 만들 뿐만 아니라 사용자 경험도 향상시킵니다. CSS는 글꼴 변경, 글꼴 크기 및 두께 제어 등과 같은 텍스트 글꼴 스타일 설정을 위한 일련의 속성을 제공합니다.
위의 CSS 속성을 학습 하면 HTML 텍스트의 글꼴, 크기, 스타일, 기울임꼴, 굵게 등을 설정할 수 있습니다.
1. 글꼴 모음
Font-family 속성은 요소의 글꼴을 설정하는 데 사용됩니다. 글꼴은 Song, Kai 등입니다.
글꼴 계열 속성을 통해 여러 글꼴을 동시에 선언할 수 있으며 글꼴은 쉼표로 구분됩니다. 글꼴 호출 원칙에 따라 첫 번째 글꼴이 먼저 호출됩니다. 발견되지 않으면 다음 글꼴이 발견되지 않으면 기본 글꼴이 호출됩니다.
예:
예를 들어, 다음 <p> 태그의 텍스트 글꼴을 설정합니다.
<p>dotcpp 프로그래밍</p>
태그 선택기를 사용한 다음 글꼴 모음 속성에서 설정할 수 있습니다.
p{font-family:'TimesNewRoman','sans-serif',宋体,楷体;}글꼴 선언 시에는 영어 글꼴과 중국어 글꼴을 별도로 선언해야 하며, 영어 글꼴 선언은 중국어 글꼴 앞에 와야 합니다. 대부분의 중국어 글꼴에는 영어 문자가 포함되어 있지만 그다지 아름답 지 않은 반면 영어 글꼴에는 한자가 포함되어 있지 않기 때문입니다. 따라서 영어를 표시하기 위해 중국어 글꼴을 사용하고 싶지 않다면 먼저 영어 글꼴을 선언해야 한다는 점을 기억해야 합니다. 먼저 선언된 것이 먼저 호출됩니다.
일반적으로 사용되는 영어 글꼴: Arial, Helvetica, Tahoma, Verdana, Lucida Grande, Georgia 등
일반적으로 사용되는 중국어 글꼴: SimSun, SimHei, Microsoft YaHei, FangSong, KaiTi 등
2.글꼴 스타일
글꼴 스타일은 글꼴 스타일을 기울임꼴, 기울임꼴 또는 일반 글꼴로 설정할 수 있습니다. 기울임꼴 글꼴은 일반적으로 글꼴 모음 내의 개별 글꼴로 정의됩니다.
이 속의 일반적인 속성 값은 다음과 같습니다.
3.글꼴 두께
글꼴 가중치 속성은 표시되는 요소의 텍스트에 사용되는 글꼴의 굵기를 설정합니다.
이 속성의 일반적인 속성 값은 다음과 같습니다.
4.글꼴 크기
글꼴 크기 속성은 글꼴 크기를 설정하는 데 사용됩니다. 일반적으로 사용되는 단위는 픽셀입니다.
px는 Pixel의 약자로, 디지털 디스플레이 장치에 표시되고 표현될 수 있는 디지털 이미지나 그래픽의 최소 단위입니다. 픽셀은 디지털 그래픽의 기본 논리 단위이며, 픽셀은 이미지 요소라고도 합니다.
5. 글꼴 변형
Font-variant 속성은 텍스트의 영어 소문자를 작은 대문자로 변환할 수 있습니다(변환된 대문자는 변환 전 소문자와 크기가 비슷하므로 작은 대문자라고 합니다). 글꼴 변형 속성의 선택적 값은 다음과 같습니다.
6. 글꼴
글꼴 속성은 하나의 선언에서 모든 글꼴 속성을 설정하는 데 사용되며 각 속성을 공백으로 구분합니다. 즉, 위 속성들의 포괄적인 약칭 속성이다.
글꼴 스타일을 설정하기 위해 글꼴 속성을 사용하는 경우 설정 순서는 글꼴 스타일, 글꼴 변형, 글꼴 두께, 글꼴 크기/줄 높이, 글꼴 계열입니다. 값을 설정할 필요가 없으며 설정되지 않은 속성은 기본값을 사용합니다.