일부 사이트는 애니메이션이 아닌, 사진이나 사진이 아닌, 비디오 클립이 아닌 텍스트 콘텐츠로만 사용자를 끌어들입니다. 텍스트는 많은 인기 있는 웹사이트에서 없어서는 안될 부분입니다. 이전 수업에서 텍스트 색상을 변경하고, 텍스트에 그림자를 추가하고, 정렬하고, 밑줄, 윗줄 또는 취소선을 추가할 수 있는 CSS 속성을 살펴보았습니다. 이 단원에서는 글꼴 모음이 무엇인지와 기본 텍스트 글꼴을 변경하는 방법을 살펴봅니다.

Sans-serif와 Serif 글꼴 패밀리의 차이점

웹사이트 - 산세리프체

웹사이트 - 세리프체

CSS의 글꼴 모음

CSS에서 글꼴은 패밀리로 나뉘며, 각 패밀리는 다음과 같은 글꼴 세트로 구성됩니다. 일반적 특성. 글꼴 모음은 5개뿐입니다.

sans-serif - sans-serif 글꼴로, 컴퓨터 화면에서 serif 글꼴보다 가독성이 더 좋은 것으로 간주됩니다.
serif는 serif 글꼴 모음입니다. 많은 사람들이 그것들을 신문 기사와 연관시킵니다. 세리프는 글자의 가장자리를 따라 장식적인 획과 대시입니다.
고정 폭은 문자가 동일한 고정 너비를 갖는 글꼴 모음입니다. 이러한 글꼴은 주로 프로그램 코드 예제를 표시하는 데 사용됩니다.
필기체 - 손으로 쓴 텍스트를 모방하는 글꼴.
판타지 - 예술적이고 장식적인 글꼴. 그것들은 널리 퍼져 있지 않고 모든 컴퓨터에서 사용할 수 없으며 웹 디자인에서 거의 사용되지 않습니다.

font-family 속성을 사용하면 기본 글꼴을 변경할 수 있습니다. 일반적으로 동일한 패밀리에 속하는 교체 가능한 글꼴 목록을 쉼표로 구분하여 포함합니다. 글꼴 이름이 둘 이상의 단어로 구성된 경우 따옴표로 묶어야 합니다. 가족의 이름은 일반적으로 목록 끝에 표시됩니다.

본문( 글꼴군: Verdana, Helvetica, Arial, sans-serif; )

브라우저가 font-family 속성에 제공된 글꼴 목록을 처리하는 방법을 살펴보겠습니다.

먼저 Verdana 글꼴이 컴퓨터에 설치되어 있는지 확인하고 설치되어 있으면 이를 요소 내부(이 경우 요소 내부)의 텍스트 글꼴로 사용합니다. )
Verdana가 설치되어 있지 않으면 Helvetica 글꼴을 찾습니다. 검색 성공 시 내부적으로 사용 .
Helvetica도 설치되어 있지 않으면 Arial 글꼴을 찾습니다. 컴퓨터에서 사용할 수 있는 경우 내부적으로 적용합니다. .
마지막으로 지정된 글꼴이 없으면 컴퓨터의 브라우저에서 찾은 첫 번째 sans-serif 글꼴이 사용됩니다. 따라서 브라우저는 패밀리에서 적절한 글꼴을 독립적으로 결정할 수 있습니다.

문서 이름

CSS 글꼴 패밀리 속성

Times New Roman 글꼴을 사용하는 단락.

Arial 글꼴을 사용하는 단락.

노력하다 "

참고: 특정 글꼴을 하나만 선택하는 경우 해당 글꼴이 사용자의 컴퓨터에 설치된 경우에만 브라우저에 해당 글꼴이 표시된다는 점을 이해하는 것이 중요합니다. 글꼴을 찾을 수 없는 경우 텍스트는 모든 브라우저의 기본 글꼴인 "Times New Roman"으로 렌더링됩니다.

설명

꼬리표 일반 텍스트에 비해 글꼴 크기를 1만큼 늘립니다. HTML에서 글꼴 크기는 1에서 7까지 임의의 단위로 측정되며 기본 평균 텍스트 크기는 3입니다. 따라서 태그를 추가하면 텍스트를 기존 단위로 늘립니다. 중첩 태그가 허용됩니다. , 각 레벨에 따라 글꼴 크기가 커집니다.

글꼴의 크기는 태그의 주어진 크기 속성에 의해서만 영향을 받는 것이 아닙니다. , 그러나 또한 서체의 선택. Arial 글꼴은 Times 글꼴보다 크게 보이고 Verdana 글꼴은 Arial 글꼴보다 약간 더 큽니다. 글꼴과 크기를 선택할 때 이 기능을 고려하십시오. 텍스트 크기를 더 세밀하게 제어하려면 스타일을 사용하십시오.

통사론

텍스트

닫는 태그

필수의.

속성

CSS 아날로그

HTML 4.01 IE Cr Op Sa Fx

큰 태그

Lorem ipsum dolor sitmet

로렘 ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 우트 wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

결과 이 예아래에 표시됩니다.

< 폰트 크기=… 색깔=... 얼굴=...> 텍스트 폰트>

크기- 설치 글꼴 크기 FONT 요소에 포함된 텍스트에서 사용됩니다. 1에서 7 사이의 정수를 지정하여 절대 글꼴 크기를 설정할 수 있습니다. 글꼴 크기를 지정할 수도 있습니다. 상대적 크기, 속성에 부호 있는 정수를 제공합니다(예: SIZE="+1" 또는 SIZE="-2"일 수 있음).

색깔- 나타내다 색깔, 이 텍스트를 강조 표시합니다. 색상은 16진수 표기법의 RGB 값으로 지정되거나 표준 색상 중 하나의 문자 값이 선택됩니다.

얼굴- 세트 서체, 예를 들어 FACE=ARIAL.

텍스트 - 텔레타이프 텍스트(고정 폭).

텍스트 - 기울임꼴 글꼴 스타일( 기울임꼴).

텍스트- 스타일 굵게폰트.

텍스트 유>- 스타일 밑줄텍스트.

텍스트 빅>- 글꼴로 텍스트 인쇄 특대(주변 텍스트보다 큼).

텍스트 스몰>- 글꼴로 텍스트 인쇄 축소된 크기(주변 텍스트보다 작음).

텍스트 서브>- 아래로 이동하여 텍스트 인쇄( 아래 첨자또는 아래첨자).

텍스트 저녁>- 위로 이동하여 텍스트 인쇄( 위에 쓴또는 위 첨자).

텍스트 스트라이크>또는 < 에스> …에스> - 취소선 텍스트가 있는 스타일.

특수 html 태그

꼬리표< 주소> 문서 작성자와 해당 주소(예: 전자 메일)를 강조 표시하는 데 사용됩니다.

~~일부 캐릭터는 제어 문자 HTML에서 ESC 시퀀스를 사용하여 텍스트에 추가됩니다.~~

~~왼쪽 꺾쇠 괄호 "<" - <~~

~~오른쪽 꺾쇠 괄호 ">" ->~~

~~앰퍼샌드 "&" - &~~

~~큰따옴표 """ - "~~

의 경우 " ", 의 경우 "®"과 같이 특수 문자에 대한 이스케이프 시퀀스가 많이 있습니다. 기능 중 하나는 문자 테이블의 두 번째 부분(127번째 문자 이후)의 문자를 전송을 위한 이스케이프 시퀀스로 대체하는 것입니다. 텍스트 파일 7 비트 채널을 통해 자국어와 함께.

~~ESC 시퀀스 대소문자 구분: 대신 사용할 수 없습니다.<.~~

~~가장 일반적으로 사용되는 태그는 표 2에 나와 있습니다.~~

~~표 1.2 - HTML 문서 서식 지정을 위한 기본 태그~~

	기인하다	기능
	버전= 라인	이 문서를 만드는 데 사용된 HTML 버전을 지정합니다.
		태그가 지정된 텍스트는 기울임꼴로 표시됩니다.
HEAD 태그 - HTML 문서 헤드 부분의 시작 및 종료 태그
꼬리표제목- 시작 및 끝 헤더 태그HTML-문서
꼬리표ㅏ- 하이퍼링크를 생성할 수 있는 시작 및 종료 태그(속성href) 또는 조각 식별자(속성이름) 헤더HTML-문서

	href= URL	하이퍼링크의 대상 문서 URL을 지정합니다(이름 앵커가 아닌 경우 필수).
	방법= 목록	브라우저별 표시 방법 목록을 지정합니다(쉼표로 구분).
	이름= 라인	프래그먼트 식별자의 이름이 지정됩니다(하이퍼텍스트 링크 앵커가 아닌 경우 필수).
	상대= 연결	이 문서와 대상 문서의 관계를 결정합니다.
	레브= 연결
	대상= 이름	참조 문서의 프레임 이름이나 표시 창을 지정합니다.
	제목= 라인
		주어진 하이퍼링크에 대해 위치 독립적인 Uniform Resource Name을 지정합니다.
꼬리표주소– 이 태그에 포함된 텍스트는 주소입니다.
꼬리표비– 이 태그에 포함된 텍스트는 굵게 표시됩니다.
꼬리표베이스- 베이스를 나타냅니다.URL모든 친척을 위해URL이 문서에서
	기인하다	기능
	href= URL	기본 URL이 지정되었습니다.
	대상= 이름	모든 링크에 대한 기본 대상 창을 설정합니다. 문서에서. 주로 링크를 다른 프레임으로 리디렉션하기 위한 것입니다. 4개의 특수 값이 있습니다: _blank, _parent, _self 및 _top
꼬리표베이스폰트- 다음 텍스트의 글꼴 크기를 나타냅니다.
	기인하다	기능
	크기= 의미
꼬리표큰– 태그로 묶인 텍스트는 더 큰 글꼴 크기로 표시됩니다.
꼬리표신체- 문서 본문의 시작 및 끝 태그

	링크= 색깔	문서에서 활성 하이퍼텍스트 링크의 색상 설정
	배경= URL	배경 이미지 URL이 지정됩니다.
	bgcolor= 색깔	문서 배경색 설정
	bg속성= 의미	만약 의미고정과 동일, 배경 이미지가 문서 내용과 함께 스크롤되는 것을 방지 (즉2 이상)
	왼쪽 여백=값 N즉	문서의 왼쪽 여백 크기(픽셀) 설정 (즉2 이상)
	링크= 색깔	문서에서 "방문하지 않은" 하이퍼텍스트 링크의 색상 설정
	텍스트= 색깔	문서의 일반 텍스트 색상 설정
	상단 여백 = 의미	문서의 위쪽 여백 크기(픽셀)를 설정합니다. (즉2 이상)
	브이링크= 색깔	문서에서 "방문한" 링크의 색상 설정
꼬리표BR- 현재 텍스트 스트림을 끊고 다음 줄의 시작 부분에서 다시 시작합니다.
	기인하다	기능
		이 속성의 값(왼쪽, 오른쪽 또는 모두)에 의해 위치가 표시되는 개체의 "둘러싸기"를 설정합니다. 새 줄로 줄 바꿈할 때 개체가 계속 표시되도록 텍스트가 배치됩니다.
꼬리표센터– 태그가 지정된 텍스트를 중앙에 배치
꼬리표인용하다– 태그로 묶인 텍스트는 따옴표입니다.
꼬리표논평– 문서의 텍스트에 주석을 추가합니다. 댓글은 모든 브라우저에서 볼 수 있습니다. 모든 브라우저에서 주석은 다음과 같이 표시됩니다.
꼬리표DD– 정의 목록의 요소에 대해 설명 부분이 설정됩니다.
꼬리표DFN– 태그로 묶인 텍스트는 정의 형식으로 지정됩니다.
꼬리표DL– 태그를 포함하는 정의 목록 생성< dt> 그리고< dd>
꼬리표DT– 기술 조건부 부분은 정의 목록의 요소에 대해 설정됩니다.
꼬리표포함시키다- 문서에 포함된 개체를 설명할 수 있는 시작 및 종료 태그. 포함된 개체의 유형에 따라 아래 나열된 매개변수 외에 추가 매개변수가 포함될 수 있습니다.
	기인하다	기능
		포함 가능한 개체의 URL을 지정합니다. 이 속성은 필수입니다.
	높이 = N	포함된 개체가 차지할 영역의 높이를 지정합니다.
	이름= 이름	포함된 개체의 이름을 지정합니다.
		포함된 개체가 차지할 영역의 너비를 지정합니다.
꼬리표폰트– 태그가 지정된 텍스트의 크기, 색상 또는 서체 설정
	기인하다	기능
		태그가 지정된 텍스트의 색상 설정
	얼굴=목록	태그가 지정된 텍스트의 서체를 설정합니다(쉼표로 구분된 목록에서 첫 번째 글꼴 이름 설정).
	크기= 의미	기본 글꼴 크기를 설정합니다. 범위 - 1 ~ 7
꼬리표엥– 태그로 묶인 텍스트는 레벨의 제목입니다.N. 가능한 값N– 1에서 6까지
	기인하다	기능
	정렬= 유형	제목 정렬 방법을 지정합니다: 왼쪽(왼쪽, 기본값), 가운데(중앙) 또는 오른쪽(오른쪽)
꼬리표인사– 현재 텍스트 스트림을 깨는 것. 중단점에 가로 눈금자가 삽입됩니다.
	기인하다	기능
	정렬= 유형	눈금자를 정렬하는 방법을 지정합니다: 왼쪽(왼쪽), 가운데(중앙, 기본값) 또는 오른쪽(오른쪽)
		눈금자를 표시할 때 체적 음영을 사용하지 마십시오.
		눈금자 두께를 정수 픽셀 수로 설정
	너비= 의미
꼬리표나- 태그로 묶인 텍스트는 기울임꼴로 표시됩니다.
꼬리표이미지– 이미지가 현재 텍스트 스트림에 삽입됩니다.
	기인하다	기능
	대체= 텍스트	이미지를 지원하지 않는 브라우저에 대한 대체 텍스트 설정
	테두리= N	하이퍼링크에 포함된 이미지 주변 프레임의 두께(픽셀)를 설정합니다.
		포함된 비디오 클립에 대한 재생 컨트롤 추가 (즉2 이상)
	Dynsrc= URL	주어진URL- 촬영할 비디오 클립의 주소( 즉 2 이상)
	높이= N	이미지의 높이를 픽셀 단위로 설정합니다.
	H스페이스= N	너비가 다음과 같은 여유 공간 영역 이미지의 왼쪽과 오른쪽에 배치를 지정합니다 N픽셀
		태그 내에서 이 태그를 사용할 때 지정합니다. 마우스로 이미지 선택
	루프= 의미	동영상 재생을 반복할 횟수를 설정합니다. 의미정수 또는 무한 값일 수 있습니다. (즉2 이상)
	Lowsrc= URL	브라우저가 먼저 로드해야 하는 저해상도 이미지로 표시됩니다. 그 뒤에 속성에 의해 지정된 이미지가 옵니다. (즉2 이상)
		재생할 이미지의 소스 URL을 지정합니다. 이 속성은 필수입니다.
	시작= 시작	비디오 클립을 재생할 시기를 지정합니다(옵션: fileopen 또는 mouseover).
	사용지도= URL	마우스 움직임에 민감한 이미지 영역 지정
	가상공간= N	여유 공간 영역의 이미지 위아래 위치를 n픽셀로 설정합니다.
		이미지의 너비를 픽셀 단위로 지정합니다.
꼬리표산업통상자원부– 태그로 묶인 텍스트는 문자 단위로 입력됩니다(키보드에서 입력할 때와 같이).
꼬리표링크- 제목에서 (< 머리 >) 문서는 이 문서에서 다른 문서로의 링크를 정의합니다.
	기인하다	기능
	href= URL
	방법= 목록	브라우저에 따라 이 링크에 대한 표시 방법 목록을 설정합니다(쉼표로 구분).
	상대= 연결	이 문서와 대상 문서의 관계가 결정됩니다. InternetExplorer3.0rel=style의 경우 외부 스타일 시트의 존재를 의미합니다.
	레브= 연결	데이터와 함께 대상 문서의 피드백이 결정됩니다.
		문서 형식을 지정하는 데 사용할 외부 스타일 시트의 URL을 지정합니다( 즉2 이상)
	제목= 라인	대상 문서의 제목을 설정합니다.
	유형= 텍스트/css
		대상 문서의 경우 위치에 관계없이 리소스의 범용 이름이 지정됩니다.
꼬리표지도- 마우스 움직임에 민감한 이미지 영역을 결정
	기인하다	기능
	이름= 라인	이 영역의 이름을 지정합니다. 이 속성은 필수입니다.
꼬리표노브르– 태그로 묶인 텍스트에는 나누기가 허용되지 않습니다.
꼬리표피- 단락 시작 및 종료 태그
	정렬= 유형	단락의 텍스트 정렬을 설정합니다: 왼쪽(왼쪽), 가운데(중앙) 또는 오른쪽(오른쪽)
꼬리표식물 텍스트- 문서의 나머지 부분이 처리 없이 미리 서식이 지정된 텍스트로 표시되어야 함을 나타냅니다.
꼬리표사전– 태그로 묶인 텍스트는 다음과 같이 표시됩니다. 줄 바꿈과 간격을 엄격하게 준수하면서 처리 없이 사전 형식화되는 방식
		브라우저는 라인이 (가능한 경우) n 문자에 맞도록 텍스트를 배치합니다.
꼬리표에스
꼬리표삼프– 태그로 묶인 텍스트는 템플릿입니다.
꼬리표작은– 태그로 묶인 텍스트는 더 작은 글꼴 크기로 표시됩니다.
꼬리표스페이서- 문서에 구분 기호 삽입(오직N3)

	유형= 유형	구분 기호 유형이 지정됩니다: vertical– 지정된 크기의 공백 영역은 두 줄의 텍스트 사이에 배치됩니다. horizontal– 지정된 크기의 공백 영역은 단어 또는 문자 사이에 배치됩니다. block– 직사각형 영역의 삽입
		가로 구분 기호의 너비 또는 세로 구분 기호의 높이를 지정합니다(픽셀 단위).
		블록 유형 구분 기호의 너비가 지정됩니다.
	높이 = N	블록 유형 구분 기호의 높이가 지정됩니다.
	정렬= 의미	주변 텍스트를 기준으로 블록 구분 기호를 정렬하는 방법을 지정합니다.
꼬리표기간– 태그가 지정된 텍스트는 스타일 시트를 사용하여 형식이 지정됩니다.(오직즉3 이상)
	기인하다	기능
	스타일= 집단	주어진 간격의 텍스트에 대해 스타일 시트 요소가 설정됩니다.
꼬리표스트라이크– 태그로 묶인 텍스트는 가로선으로 표시됩니다.
꼬리표보결- 태그로 묶인 텍스트는 아래 첨자로 표시됩니다.
꼬리표저녁을 먹다- 태그로 묶인 텍스트는 위 첨자로 표시됩니다.
꼬리표TT– 태그로 묶인 텍스트는 고정 폭 글꼴로 표시됩니다.
꼬리표VAR– 태그로 묶인 텍스트는 변수의 이름입니다.

또는 HTML 텍스트의 형식을 지정하는 태그 연구

이 튜토리얼의 가장 간단하고 핵심적인 강의 중 하나에 주의를 기울이게 됩니다.

HTML 텍스트대부분의 인터넷 페이지의 주요 구성 요소입니다.

키워드별 HTML 페이지의 본문에서사용자가 귀하의 사이트를 찾을 수 있습니다.

HTML 텍스트원하는 크기와 색상이 될 수 있습니다. 글꼴 유형과 볼륨을 정의할 수도 있습니다.

HTML 글꼴 크기일반적으로 픽셀로 설정됩니다.

HTML 텍스트 서식광범위하게 서식 지정 태그가 사용됩니다.

아래 참조 HTML 텍스트의 형식을 지정하는 태그:

태그 → 굵은 HTML 텍스트(볼드체).

태그 → 굵게 HTML 텍스트(볼드체).

태그 → 고정 폭 HTML 텍스트(고정 폭 글꼴).

태그 → 고정 폭 HTML 텍스트(고정 폭 글꼴).

태그 → 고정 폭 HTML 텍스트(고정 폭 글꼴).

태그 → HTML 텍스트, 크기가 평소보다 큽니다(큰 글꼴).

태그 → HTML 텍스트, 크기가 평소보다 작습니다(작은 글씨).

태그 → 비스듬한 HTML 텍스트(이탤릭체).

태그 → 비스듬한 HTML 텍스트(이탤릭체).

태그 → 비스듬한 HTML 텍스트(이탤릭체).

태그 → 밑줄 친 HTML 텍스트(밑줄친 글꼴).

태그 → 취소선 HTML 텍스트(취소선 글꼴).

태그 → HTML 텍스트(글꼴) 아래 첨자.

태그 → HTML 텍스트(글꼴) 위 첨자.

HTML 텍스트 형식: 취소선, 밑줄이 그어진 텍스트

결과: ... 고정 폭 글꼴

결과: ... 평소보다 글꼴 크기가 큽니다.

결과: ... 기울임꼴

결과: 취소선 텍스트(취소선 글꼴)

결과: 위 첨자

C 위에 제시된 형식 지정 방법은 텍스트의 작은 부분에만 사용해야 합니다. 즐기다 CSS예를 들어 전체 페이지 또는 여러 줄에 대해 특정 글꼴을 설정하려는 경우.

설명

요소의 글꼴 크기를 지정합니다. 크기는 여러 가지 방법으로 설정할 수 있습니다. 상수 세트(xx-small , x-small , small , medium , large , x-large , xx-large )는 절대 크기라고 하는 크기를 지정합니다. 사실, 그것들은 브라우저와 운영 체제의 설정에 의존하기 때문에 완전히 절대적이지는 않습니다.

다른 상수 세트(larger , small )는 상대적 글꼴 크기를 설정합니다. 크기는 상위 요소에서 상속되기 때문에 이러한 상대 크기는 상위 요소에 적용되어 현재 요소의 글꼴 크기를 결정합니다.

궁극적으로 글꼴 크기는 요소의 부모에 있는 font-size 속성 값에 크게 의존합니다.

글꼴 크기 자체는 그림 1과 같이 기준선에서 핀 영역 상단까지의 높이로 정의됩니다. 하나.

쌀. 1. 글꼴 크기

통사론

글꼴 크기: 절대 크기 | 상대적 크기 | 가치 | 관심 | 상속하다

가치

절대 크기를 설정하는 데 사용되는 값은 xx-small , x-small , small , medium , large , x-large , xx-large 입니다. HTML의 글꼴 크기에 대한 대응은 표에 나와 있습니다. 하나.

상대적인 글꼴 크기는 더 큰 값과 더 작은 값으로 지정됩니다.

em(요소 글꼴 높이), ex(x 문자 높이), 포인트(pt), 픽셀(px), 백분율(%) 등 유효한 CSS 단위를 사용할 수도 있습니다. 상위 요소 글꼴 크기는 100으로 간주됩니다. %. 음수 값은 허용되지 않습니다.
Inherit 부모의 값을 상속합니다.
HTML5 CSS2.1 IE Cr Op Sa Fx
글꼴 크기
뒤스 테 푸기파실리시

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

이 예의 결과는 그림 1에 나와 있습니다. 하나.

쌀. 2. font-size 속성 적용하기

개체 모델

document.getElementById("elementID").style.fontSize

브라우저

Internet Explorer 버전 7.0까지는 상속 값을 지원하지 않습니다.