CSS는 서체를 사용자 정의할 수 있는 다양한 속성도 제공합니다. 글꼴부터 글꼴 스타일 및 그림자에 이르기까지 다양합니다.
CSS 글꼴 속성에는 글꼴, 글꼴 스타일 및 글꼴 무게에 대한 정보가 포함됩니다. 물론 이러한 속성은 주로 텍스트(p, i 등)가 포함된 HTML 요소에 유용합니다. 그러나 표에도 사용할 수 있습니다.
사용할 글꼴은 글꼴 패밀리를 통해 결정할 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> p {font-family:verdana, sans-Serif;} h1 { font-family: "Courier New", Courier, monospace; } </style> </head> <body> <div> <h1>PSD-Tutorials.en</h1> <p>이것은 <strong>굵은 단어</strong>가 있는 단락입니다.</p> <h2>이것은 <strong>굵은 단어</strong>가 있는 제목입니다.</h2> </div> </body> </html>결과는 브라우저에서 다음과 같이 표시됩니다:
일반적인 글꼴은 예를 들어 Arial, Helvetica 및 Tim Roman입니다. 원하는 글꼴은 CSS 속성 글꼴 모음 에 할당됩니다. 여러 글꼴을 지정하는 경우 순서가 결정적입니다. 첫 번째로 지정한 글꼴을 사용할 수 있는 경우 해당 글꼴이 사용됩니다. 원하는 글꼴은 쉼표로 서로 구분해야 합니다. 마지막 명령은 일반적으로 소위 일반 글꼴 모음입니다. 이러한 일반 글꼴 패밀리는 브라우저에 지정된 글꼴과 최소한 유사한 글꼴을 선택할 수 있는 옵션을 제공합니다.
- serif = Serif가 포함된 글꼴
- sans-serif = Serif가 없는 글꼴
- 필기체 = 필기체 쓰기용 글꼴
- 판타지 = 특이한 스크립트용 글꼴
- 모노스페이스 = 동일한 두께의 문자가 있는 글꼴입니다.
글꼴 스타일
글꼴 스타일 속성을 사용하여 글꼴 스타일을 결정할 수 있습니다. 선택한 글꼴에서 허용하는 경우 이탤릭체 값을 사용하여 이탤릭체를 강제로 사용할 수 있습니다.
다른 글꼴은 경사를 사용하여 기울일 수 있습니다.
서체에 영향을 주는 데 사용할 수 있는 다음 CSS 속성은 글꼴 변형입니다. 이 속성은 작은 대문자를 정의하는 데 사용할 수 있습니다.
이렇게 하려면 font-variant에 small-caps 값을 할당합니다.
글꼴 크기
물론 글꼴 크기를 지정하는 것도 매우 중요합니다. CSS는 이를 위해 글꼴 크기 속성을 제공합니다. 글꼴 크기는 매우 다양한 단위로 지정할 수 있습니다.
- EM
- REM
- 픽셀
- 퍼센트
- 키워드
키워드로 사용할 수 있는 변형은 다음과 같습니다:
- xx-소형 - 매우, 매우 작음
- x-small - 매우 작음
- 작은 - 작은
- 작은 - 상위 요소보다 작음
- medium - 중간
- 대형 - 대형
- x-large - 매우 큼
- xx-대형 - 매우, 매우 큰
- 더 크게 - 상위 요소보다 크게
다음은 글꼴 크기를 설정하는 방법의 예입니다:
.one {글꼴 크기: 10px;} .two {글꼴 크기: 20px;} .three {글꼴 크기: 110%;} .four {글꼴 크기: xx-large;}이것이 브라우저에서 보이는 모습입니다:
글꼴 크기 정의는 측정 단위마다 각각 장단점이 있기 때문에 매우 복잡하다는 점에 유의하세요.
http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/ 페이지에서 어떤 측정 단위를 언제 사용하는 것이 가장 좋은지에 대한 좋은 개요를 찾을 수 있습니다. 읽어보고 싶지 않으시다면 이 페이지를 참고하세요: 화면에서 표시할 때는 em과 같은 상대적인 규격을 사용하세요. 그러나 인쇄 레이아웃에는 pt와 같은 절대 단위를 사용하세요.
글꼴 무게
소위 글꼴 무게에 대해 계속 설명합니다. 글꼴의 두께와 무게를 결정하는 데 사용됩니다. 이를 위해 글꼴 무게 속성이 사용됩니다.
.bold { font-weight:bold; }
이 구문은 레이블이 지정된 텍스트를 굵게 표시하는 데 사용됩니다.
사용 가능한 값은 굵게, 굵게, 옅게, 일반입니다. 숫자 값 100, 200, 300, 400, 500, 600, 700, 800, 900도 허용됩니다. 이 범위는 매우 엷게(100)부터 매우 굵게(900)까지입니다.
정의 요약
글꼴 정의와 관련하여 줄 높이 속성도 중요한 역할을 하며, 줄 높이를 정의하는 데 사용할 수 있습니다. 이 속성에 대해서는 나중에 다시 자세히 설명하겠습니다. 여기서는 아래 표시된 글꼴 속성과 관련하여 특정 역할을 하므로 여기서는 언급만 하면 됩니다.
지금까지 제시된 글꼴 표시 정보를 조합할 수 있습니다. 이를 위해 일반 글꼴 속성이 사용됩니다. 이는 다음과 같은 개별 사양으로 구성되거나 포함됩니다.
- font-style
- font-variant
- font-weight
- font-size
- 줄 높이
- 글꼴 패밀리글꼴을 사용하여 다양한 글꼴 서식을 결합할 수 있습니다. 앞서 언급한 속성을 지정할 수 있지만 모든 속성을 사용할 필요는 없습니다. 그러나 글꼴 크기 및 글꼴 패밀리 속성은 필수입니다.
약식 표기법 덕분에 CSS 파일을 더 짧고 명확하게 유지할 수 있습니다.
단, 아래 표시된 순서를 준수해야 합니다. 글꼴 크기와 줄 높이 두 속성을 지정한 경우 슬래시로 구분해야 합니다. 이때 하나의 값만 지정하면 글꼴 크기를 의미합니다.
예시입니다:
p { font: 이탤릭체 작은 대문자 굵게 1.3m/1.5em Georgia,Tim,Serif; }font-size-adjust는 글꼴을 거의 같은 크기로 표시하기 위해 개발되었습니다. 글꼴마다 글꼴 높이가 같더라도 x 높이가 다릅니다. 그러나 x 높이가 큰 글꼴이 더 읽기 쉽습니다. 따라서 원래 글꼴을 사용할 수 없고 x 높이가 더 작은 다른 글꼴로 대체하면 문서를 읽기 어려울 수 있습니다. 글꼴 크기 조정을 사용하면 이 차이를 보정할 수 있습니다.
예를 들어 보겠습니다:
h1 { font-family: Verdana, 'Times New Roman', 'Courier New'; font-size-adjust: 0.61; }
다음 튜토리얼에서는 웹사이트의 서체를 사용자 정의하는 다른 방법에 대해 알아보겠습니다.
