HTML에서 글꼴을 설정하는 속성은 무엇입니까?

HTML에서 글꼴 속성 설정: 글꼴, 글꼴 계열, 글꼴 크기, 글꼴 스타일, 글꼴 변형, 글꼴 가중치, "@font-face", 글꼴 크기 조정, 글꼴 스트레치.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

글꼴 속성은 글꼴, 굵게, 크기, 텍스트 스타일을 정의합니다.

html에서 글꼴 속성 설정

property	Description
font	모든 글꼴 속성을 하나의 명령문으로 설정
font-family	문자
font-size	텍스트의 글꼴 크기를 지정합니다
font-style	텍스트의 글꼴 스타일을 지정합니다
font-variant	텍스트의 글꼴 스타일을 지정합니다. 텍스트를 표시하기 위해 작은 대문자 글꼴을 설정하면 모든 소문자는 대문자로 변환되지만 작은 대문자를 사용하는 모든 문자는 나머지 텍스트에 비해 글꼴 크기가 더 작습니다.
font-weight	글꼴의 두께를 지정합니다
@font-face	웹사이트에서 "웹 안전" 글꼴이 아닌 다른 글꼴을 다운로드하고 사용할 수 있도록 허용하는 규칙
font-size -adjust	요소의 측면 값을 지정합니다. 기본 글꼴의 x 높이가 유지되도록 요소의 가로세로 값을 지정합니다.
font-stretch	현재 글꼴 모음을 축소하거나 늘립니다. 현재 글꼴 모음의 크기를 조정하고 변형합니다. 모든 주요 브라우저에서는 지원되지 않습니다.

확장 정보:

HTML/CSS에는 두 가지 유형의 글꼴 계열 이름이 있습니다.

• 범용 글꼴 계열 - 비슷한 모양을 공유하는 글꼴 시스템의 조합(예: "Serif" 또는 "Monospace" ")

• 특정 글꼴 모음 - 특정 글꼴 모음(예: "Times" 또는 "Courier")

verdana Lucida Console여러 글꼴 모음은 쉼표로 구분하여 지정합니다.

p{font-family:"Times New Roman", Times, serif;}

Generic family	Font Family	Description
Serif	Times Times Times New Romansgeorgia serif fonts 캐릭터가 Linesans-serif	arial
	"Sans"의 끝에서 추가 장식을하는 글꼴 이 글꼴 끝 추가 장식 없음 Monospace	Courier New
	모든 고정 폭 문자의 너비는 동일합니다 font-family 속성은 여러 글꼴 이름을 하나로 설정해야 합니다." "대체" 메커니즘, 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도합니다.	참고: 글꼴 모음 이름이 두 문자 이상인 경우 글꼴 모음: "宋体"과 같이 따옴표로 묶어야 합니다.

다음은 일반적으로 사용되는 글꼴 조합과 일반적인 글꼴 모음입니다.

Serif 글꼴

font

텍스트 예

Georgia, serif이것은 단락입니다이것은 문단입니다이것은 문단입니다

이것은 제목입니다

"Palatino Linotype ", "Book Antiqua", 팔라티노 , serif

이것은 제목입니다

"Times New Roman", Times, serif

이것은 제목입니다

sans - serif 글꼴

" 루시다 Console", Monaco, monospace제목입니다 (동영상 공유 학습:

font	텍스트 예
Arial, Helvetica, sans-serif	이것은 제목입니다 이것은 단락입니다
Arial Black , 가젯, 산세 -serif	제목입니다 문단입니다
"Comic Sans MS", 필기체, sans-serif	제목입니다 문단입니다
임팩트 , Charcoal, sans-serif	제목입니다 문단입니다
"Lucida Sans Unicode", "Lucida Grande", sans-serif	제목 문단
Tahoma, Geneva, sans-serif	제목입니다 제목입니다
"Trebuchet MS", Helvetica, sans-serif	문단입니다
	문단입니다

css 동영상 튜토리얼

)

위 내용은 HTML에서 글꼴을 설정하는 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!