CSS에서 글꼴을 가장 잘 활용하는 방법?

이 기사에서는 Fonts In이라는 간단하면서도 중요한 주제를 소개합니다. 또한 주제에 대한 실제적인 데모를 제공합니다. 이 기사에서는 다음 사항을 다룰 것입니다.

• CSS의 글꼴
• CSS 글꼴의 속성
• 글꼴 스타일 속성
• 글꼴 두께 속성
• 글꼴 크기 속성
• 글꼴 패밀리 속성

웹 사이트는 이미지, 오디오, 비디오 및 텍스트 콘텐츠의 형태로 콘텐츠를 전달합니다. 그러나 대부분의 웹 페이지는 여전히 텍스트를 주요 형식으로 사용합니다. 이는 일반 텍스트가 매우 중요한 이점을 제공하기 때문입니다.

방해받지 않는 가독성 – 사무실에있는 동안 최신 경기 점수를 확인하려고합니다. 당연히 시끄러운 비디오가 아닌 빠른 텍스트 업데이트를 원합니다!
낮은 네트워크 대역폭 요구 사항 – 인터넷 연결이 좋지 않은 영역에서도 텍스트 콘텐츠를로드 할 수 있지만 리치 미디어는로드 할 수 없습니다.
검색 친화적 – 웹 사이트는 항상 자신의 콘텐츠가 검색 엔진에서 얼마나 쉽게 인식되는지 주시합니다. 적어도 AI가 인터넷을 완전히 장악 할 때까지는 텍스트가 가장 적합합니다!

텍스트 콘텐츠의 서식을 지정하는 동안 웹 디자이너는 글꼴, 정렬, 강조 표시 및 색상과 같이 작업 할 매개 변수가 거의 없습니다. 텍스트에 적합한 글꼴을 선택하는 것은 중요한 선택입니다. 표준 관행은 CSS 글꼴 태그를 사용하여 HTML 페이지의 텍스트 글꼴을 정의하는 것입니다.
HTML 프로그래밍의 세계가 처음이라면 여기에서 기본 시작 둘러보기를 받으십시오. CSS 글꼴에 대해 배우기 전에 CSS 기본 사항을 읽어 보는 것이 좋습니다.

포괄적 인 CSS 자습서는 초보자를위한 Edureka CSS 자습서를 참조하십시오. CSS가 HTML 웹 디자인을 보강하는 데 사용되는 방식에 대한 훌륭한 경고를 받게됩니다.

CSS의 글꼴에 대한이 기사로 이동

CSS의 글꼴

글꼴은 기본적으로 텍스트 표시와 관련된 일련의 특성입니다. 글꼴은 크기, 들여 쓰기, 너비, 기울기 등에 따라 서로 다릅니다. 다양한 글꼴로 된 기본 텍스트 디스플레이부터 시작하겠습니다.

예 1 : 다양한 글꼴의 제목 및 단락

body {background-color : lightblue} h1 {font : bold 30px arial, sans-serif} h2 {font : 15px verdana} p {font : italic bold 12px / 30px Georgia, serif}
기울임 꼴 굵은 Georgia 글꼴의 단락
 

 예 1 : 출력 

해시 맵과 해시 테이블 간의 차이

예제 1에는 서로 다른 글꼴로 된 3 줄의 텍스트가 있습니다. 각 글꼴의 문자 너비, 들여 쓰기 등이 다양하다는 것을 알 수 있습니다.

CSS의 글꼴에 대한이 기사로 이동

CSS 글꼴의 속성

CSS 글꼴에는 스타일, 무게, 크기 및 제품군의 4 가지 기본 속성이 있습니다. 스타일 속성은 보통 또는 기울임 꼴을 나타냅니다. 두께는 글꼴을 일반 또는 굵게 표시합니다. 무게는 숫자로도 표현할 수 있습니다. 크기는 단순히 글꼴 크기가 클수록 텍스트가 커지는 것입니다. 글꼴 크기를 지정할 수있는 방법은 여러 가지가 있으며 자세한 설명은 이후 섹션에서 제공됩니다. 패밀리 속성은 텍스트에 글꼴 이름을 지정하는 것입니다.

예제 1에서는 제목과 단락에 서로 다른 글꼴 이름을 사용했습니다. h1 및 p 태그 아래에 두 개의 글꼴 이름이 나열되는 반면 h2 태그는 하나의 글꼴 이름 만 표시합니다. 이것은 글꼴 패밀리의 정의이며 나중에 자세히 설명합니다.

CSS의 글꼴에 대한이 기사로 이동

글꼴 스타일 속성 :

설정할 수있는 두 가지 기본 스타일은 '보통'과 '기울임 꼴'입니다. 기울임 꼴은 본질적으로 기울어 진 필기체 여야합니다. 보통은 직선 인 기본 옵션입니다. 대부분의 글꼴에서 기울임 꼴 옵션과 유사한 '사각형'이라는 덜 사용되는 옵션이 있습니다. 부모 요소에서 글꼴 스타일을 가져 오도록 스타일을 '상속'으로 설정할 수도 있습니다.

CSS의 글꼴에 대한이 기사로 이동

글꼴 두께 속성 :

이 속성은 글꼴을 두껍게 표시할지 얇게 표시할지 결정합니다. '보통'또는 '굵게'로 설정할 수 있습니다. 기본값은 정상입니다. 이 값은 숫자로도 설정할 수 있습니다. 무게 400은 보통을 나타내고 700은 굵게 나타냅니다. 다른 설정은 거의 없지만 (100 – 매우 밝음에서 900 – 매우 굵게) 모든 글꼴에서 지원되지는 않습니다. 모든 무게 옵션은 예제 3에 나와 있습니다.

CSS의 글꼴에 대한이 기사로 이동

글꼴 크기 속성 :

크기 속성은 여러 방법으로 설정할 수 있습니다. 아래에 이러한 방법을 나열 해 보겠습니다.
● '중간', '큼'과 같은 열거 된 값. 실제로 옷의 크기와 마찬가지로 값은 XX Small에서 XX ​​Large까지 다양합니다!
● 상위 요소를 기준으로 '크게'또는 '작게'로 설정합니다.
● 상위 요소 크기의 백분율.
● 상위 요소의 크기를 직접 적용하려면 '상속'으로 설정합니다.
● px (픽셀), pt (포인트) 또는 cm (센티미터) 단위의 절대 값
'중간'은이 매개 변수에 설정된 기본값입니다.

CSS의 글꼴에 대한이 기사로 이동

글꼴 패밀리 속성 :

HTML에서 CSS 글꼴 패밀리는 글꼴 이름을 설정하기위한 것입니다. 태그와 함께 단일 글꼴 이름을 넣을 수 있습니다. 또는 브라우저가 글꼴을 선택해야하는 우선 순위를 정의하는 글꼴 모음 목록으로 여러 값을 할당 할 수 있습니다.
목록은 대체 시스템의 형태로 왼쪽에서 오른쪽으로 우선 순위가 지정됩니다. 사용 가능한 경우 첫 번째 값이 선택되거나 목록 끝에 도달 할 때까지 제어가 다음 값으로 이동합니다. 기본 글꼴 패밀리는 브라우저 기본 설정에 의해 정의됩니다.
CSS 글꼴 패밀리에는 일반 패밀리와 글꼴 패밀리의 두 가지 유형이 있습니다.
● 일반 계열 – 몇 가지 일반적인 특성에 따라 글꼴은 'serif', 'sans serif', 'monospace'등으로 그룹화됩니다. 예를 들어 Sans serif는 serif 스타일이없는 글꼴을 의미합니다.
● 패밀리 이름 – 특정 패밀리 계층에 속하는 글꼴. Times, Arial, Courier는 모두 글꼴 패밀리이고 Times New Roman은 Times 패밀리의 예제 글꼴입니다.
다양한 글꼴 패밀리 사용 옵션은 아래 예제 4에 나열되어 있습니다.

몇 가지 공통점

● 다른 여러 CSS 속성과 마찬가지로 일부 글꼴 설정은 브라우저마다 다릅니다. 드문 글꼴 설정을 사용하기 전에 브라우저 지원을 확인하십시오.
● 글꼴 스타일, 글꼴 두께 등의 개별 태그를 사용하여 글꼴 설정을 개별적으로 설정할 수 있습니다. 또는 압축 코드를 선호하는 경우 동일한 행에있는 모든 값과 함께 단축 글꼴 속성을 사용할 수 있습니다.
● 브라우저 크기에 따라 글꼴 크기를 변경하려는 사용자 시나리오에는 반응 형 글꼴 설정이라는 유용한 글꼴 크기 설정이 있습니다. 뷰포트 너비를 의미하는 vw 단위로 설정할 수 있습니다. 이렇게하면 텍스트 크기가 브라우저 창의 크기를 따릅니다.

CSS의 글꼴에서 찾고 있던 정보를 찾으 셨기를 바랍니다. 아래 댓글 섹션에서 경험을 공유하십시오. 행복한 디자인!

웹 개발에 대해 자세히 알아 보려면 에듀 레카. 웹 개발 인증 교육은 HTML5, CSS3, Twitter Bootstrap 3, jQuery 및 Google API를 사용하여 인상적인 웹 사이트를 만들고 Amazon Simple Storage Service (S3)에 배포하는 방법을 배우는 데 도움이됩니다.