smarti,스마트아이

CSS 폰트

CSS 폰트 속성

텍스트는 웹 콘텐츠의 가장 기본적인 구성 요소이다. 그러나 CSS3에서 추가된 웹 폰트 기능은 텍스트가 얼마나 디자인적인 측면에서 잠재력을 가지는지 보여주는 사례라고 할 수 있다. 이번에는 기존 CSS2에서 전통적으로 제공했던 폰트(Font) 관련 속성과 함께 CSS3에서 추가된 속성들을 살펴보자.

font 속성

font는 폰트 관련 속성을 일괄적으로 지정하기 위한 대표 속성이다. font 속성 값은 기존 CSS2에서 지원했던 값 이외에 다양한 속성 값이 추가 되었다.

font-style, font-size, font-family, font-weight 등의 속성 값을 공란으로 구분하여 작성한다.

이 중 속성 값이 기본 값인 하위 속성 값은 생략할 수 있지만 font-size 속성과 font-family 속성 값은 반드시 작성해야 한다. 그리고 /line-height에 해당하는 값도 함께 지정할 수 있다.

 

caption, icon, menu, message-box, small-caption, status-bar 값은 CSS3에 추가된 속성 값으로, 사용자의 OS에 설정된 값의 동일한 형태로 폰트를 표시한다. 예를 들면 font 속성의 값이 icon으로 지정된 요소는 사용자의 OS에서 icon을 표시하는 폰트와 동일하게 표시된다. 키워드 값은 사용자 OS와 일관성을 가지는 웹 사이트를 작성할 때 유용하다.

/* 예시 */
div { font : bold italic large Palatino, sans-serif ; }
div { font : normal small-caps 120%/120% fantasy ; }
div { font : condensed oblique 12px "Helvetica Neue", sans-serif ; }

font-family 속성

font-family는 텍스트의 폰트를 지정하는 속성으로, 속성 값은 복수로 지정할 수 있으며, 지정된 순서대로 표시할 수 있는 폰트를 찾게 된다. 웹 브라우저가 표시할 수 있는 폰트를 찾으면 이후에 지정된 속성 값들은 무시된다.

family-name은 OS에서 사용하는 폰트 이름으로, 폰트 파일 이름과는 다르다. 예를 들면 Windows의 기본 폰트 이름은 "맑은 고딕"이며, 파일 이름은 "malgun.ttf"입니다. generic-family는 범용 폰트 그룹으로 "serif"(세리프), "sans-serif"(산세리프), "cursive"(필기체), "fantasy"(판타지), "monospace"(고정폭)가 있습니다. CSS는 사용자 OS에 설치된 폰트를 위의 다섯 가지 범용 폰트 패밀리로 구분하여 관리한다. 다시 말해 "sans-serif"는 특정 폰트를 지정하는 것이 아니라 "Helvetica", "Geneva", "Verdana", "Arial", "Univers"와 같은 폰트를 그룹화하여 지정하는 것이다.

/* 예시 */
div { 
 font-family : "맑은 고딕", "돋움", sans-serif; 
}

font-weight 속성

font-weight는 폰트가 표시되는 굵기를 지정하는 속성으로, 100~900 사이의 굵기 단계를 표시하는 수치값이나 normal, bold 등의 키워드로 선언할 수 있다. 이때 굵기 단계의 수치가 높을수록 더 굵게 표시된다. 그러나 표시되는 단계의 굵기는 CSS의 기능이 아니라 폰트 파일이 가지고 있는 값으로, 폰트에 따라서는 모든 단계가 표시되지 않을 수 있다. 보통 100~400은 가는 굵기로, 500~600은 중간 굵기로, 700~900은 두꺼운 굵기로 표시된다. 키워드의 경우 수치 값과 대응되어 "normal"은 수치 값 "400"과 같이 중간 굵기로, "bold"는 수치 값 "700" 과 같이 두꺼운 굵기로 표시된다.

/* 예시 */
div { font-weight : 400 ; }
div { font-weight : bold ; }

font-stretch 속성

font- stretch는 폰트의 장평을 지정하기 위한 속성으로, 정상 크기인 normal을 기준으로 장평을 축소하는 ultra-condensed, extra-condensed, condensed, semi-condensed 값과 장평을 확대하는 semiexpanded, expanded, extra-expanded,ultra-expanded 값을 사용할 수 있다.

/* 예시 */
div { font-stretch : expanded ; }

font-style 속성

font-style은 폰트의 표시 형태를 지정하는 속성으로, 폰트의 기본 형태로 표시하는 normal 값과 이탤릭체 또는 기울임꼴로 표시하는 italic과 oblique가 있다. font-style 속성 값이 "italic"으로 지정될 경우 sans-serif는 serif로 font-family가 변경되기도 한다.

oblique 속성 값이 italic과 다른 점은 원래의 font-family의 변경 없이 글꼴을 기울여 표시한다는 점이다. font-style의 표시 형태는 폰트 파일의 기능으로 대부분의 폰트 파일이 "oblique", "italic"를 모두 지원하지 않고 한 가지만 지원하기 때문에 일반적인 경우, "oblique", "italic"의 형태는 동일하게 표시된다.

/* 예시 */
div { font-style : italic ; }

font-size 속성

font-size는 폰트의 크기를 지정하는 속성으로, xx-small, x-small, small, medium, large, x-large, xxlarge과 같은 절대 크기와 smaller, larger와 같은 상대 크기 등을 사용할 수 있다. 이때 절대 크기의 기준은 medium으로 정해진 크기가 아니라 사용자 환경의 기본 값 크기를 의미한다. medium의 크기를 ‘1’이라고 할 때 각 키워드 값의 비율은 다음과 같다.

구분	xx-small	x-small	small	medium	large	x-large	xx-large
비율	3/5	3/4	8/9	1	6/5	3/2	2/1
Heading	h6		h5	h4	h3	h2	h1

/* 예시 */
body { font-size : 18px ; }
div { font-size : 2em ; }
div p { font-size : small ; }

font-size-adjust 속성

font-size-adjust 속성은 소문자의 높이를 기준으로 글자 크기를 조절할 때 사용한다. font-size 속성에서 지정된 글자의 높이와 소문자 x의 높이의 비율을 기준으로 계산된 결과가 클수록 글자가 작은 크기로 지정되었을 때 가독성이 높아진다.

◆ number : font-family는 Verdana이며, font-size가 100px, font-size-adjust가 0.7일 경우 소문자 x의 크기[(fontsize-adjust/기본 font-size-adjust)*font-size=소문자의 글자 크기-(0.7/0.58)*100px=120px]는 120px이 된다.

/* 예시 */
div { font-size-adjust : 0.7 ; }

font-variant 속성

font-variant는 영문 폰트의 소문자 표시 형태를 변경하는 속성이다. CSS2.1에서 font-variant 속성은 기능만을 제공하는 속성이었지만, CSS3에서는 다양한 하위 속성이 추가되었다. 아직 지원하는 웹 브라우저는 없지만 현재 작성 중인 하위 속성을 살펴보자.

◆ font-variant 하위 속성들

 - font–variant–position : 폰트의 표시 위치를 지정하는 속성으로, 화학식의 윗첨자, 아랫첨자 등과 같은 형태를

   지정할 수 있다.
 - font–variant–ligatures : 발음 기호 형태와 [æ] 같은 묶음 표시 형태를 표시하는 속성
 - font–variant–caps : 대소 문자 형태를 변경하는 속성으로, CSS2.1의 font-variant와 유사한 속성
 - font–variant–numeric : 분수나 회계용 숫자 등의 표시 형태를 변경하는 속성
 - font–variant–alternates : 폰트의 장식 요소나 특수 문자의 표시 형태를 변경하는 속성
 - font–variant–east–asia : 한자나 일본어의 폰트를 약자 형식으로 변경할 수 있는 속성

/* 예시 */
div { font-variant : small-caps ; }
div { font-variant-position : super ; }
div { font-variant-caps : small-caps ; }
div { font-variant-numeric : diagonal-fractions ; }
div { font-variant-alternates : annotation ; }
div { font-variant-east-asia : traditional ; }
div { font-variant-ligatures : discretionary-ligatures ; }

font-feature-settings 속성

font-feature-settings는 오픈 타입 글꼴의 세부 설정을 조정하는 속성으로, 해당 오픈 타입 글꼴을 포함하는 글꼴의 문자 모양과 대체 문자, 글자 위치와 레이아웃 등을 조정할 수 있다.

 - normal : 오픈 타입 글꼴의 설정을 변경하지 않는다.
 - string : 오픈 타입 피쳐 태그의 이름이다. 피쳐 태그 이름의 목록은 다음 URL을 참조하기 바람

docs.microsoft.com/ko-kr/typography/opentype/spec/featurelist

Registered features - Typography

/* 예시 */
body { font-feature-settings : normal ; }
div { font-feature-settings : "dlig" 1 ; }
div p { font-feature-settings : "swsh" 2 ; }

font-kerning 속성

font-kerning은 커닝 기능을 사용할 것인지의 여부를 지정하는 속성이다. 커닝은 글자 내부의 공백을 조절하여 글자 간의 간격을 일정하게 유지하는 기능이다. 이때 font-kerning 속성의 auto는 사용자 에이전트에 따라 커닝을 결정하도록 하는 값으로, 모든 요소의 기본 값이다. 여기에 커닝을 사용할 경우 normal 값을, 사용하지 않을 경우 none 값을 사용할 수 있다.

/* 예시 */
div { font-kerning : normal ; }

font-language-override 속성

font-language-override는 lang 속성으로 정의된 언어를 다른 언어로 대체하는 속성이다. normal은 lang 속성으로 정의된 언어를 다른 언어로 대체하지 않는 값이고, string 값은 세 글자로 된 언어를 지정하여 해당 언어로 대체하는 값이다.

참조 : docs.microsoft.com/ko-kr/typography/opentype/spec/languagetags

/* 예시 */
div { font-language-override : normal ; }
div p { font-language-override : "TRK"; }

@font-face (웹폰트)

@font-face는 일반적인 속성과 달리 CSS에서 사용할 font-family의 이름과 자원을 정의할 수 있는 규칙으로, 사용자의 환경에 설치된 폰트 또는 제작자가 서버에서 제공한 폰트를 다운로드하여 사용할 수 있도록 해준다. @font-face 규칙은 과거 인터넷 익스플로러가 지원했던 기능으로, 지금은 CSS3의 표준으로 자리 잡았다. 그러나 최신 웹 브라우저별로 지원하는 폰트 형식이 다름으로 인해 여러 개의 폰트를 선언해야 하는 단점이 있다.

인터넷 익스플로러 6~8의 경우 eot 형식의 글꼴만 지원한다. 그리고 인터넷 익스플로러 9의 경우에는 eot 형식과 함께 woff 형식을 지원한다. 그 밖에 파이어폭스, 크롬, 사파리 그리고 오페라의 경우 woff 형식을 지원한다.

@font-face {
/* 형식 */
 font-family : [ 사용할 폰트이름 ] ;
 src : [폰트 자원의 위치-local(폰트이름), url(자원경로)] ;
}

@font-face 규칙의 폰트 이름은 정의된 폰트 자원을 대표할 이름을 의미하며, local 폰트는 사용자 OS에 설치된 폰트 이름을 검색한다. 만일 local 폰트가 있는 경우에는 url에 지정된 폰트를 다운로드하지 않는다.

폰트 유형	폰트 Format	폰트 확장자
"woff"	WOFF(Web Open Font Format)	.woff
"truetype"	TrueType	.ttf
"opentype"	OpenType	.ttf, .otf
"embedded-opentype"	Embedded OpenType	.eot
"svg"	SVG Font	.svg, .svgz

/* 예시 */
@font-face {
 font-family : 'Nanum' ;
 src : url('webfont/NanumGothic.eot') ;
 src : url('webfont/NanumGothic.eot?#iefix') format('embedded-opentype'),
 url('webfont/NanumGothic.woff') format('woff'),
 url('webfont/NanumGothic.ttf') format('truetype') ;
}
div { font-family : 'Nanum' ; }

 

 

[세상살이] - 크롬 확장 프로그램으로 마우스 우클릭 해제

크롬 확장 프로그램으로 마우스 우클릭 해제

[세상살이] - 윌리암 아돌프 부게로 (William Adolph Bouguereau)

윌리암 아돌프 부게로 (William Adolph Bouguereau)

[디자인공부] - 포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)

포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)

[세상살이] - 바다를 지배했던 역사 속 군함들

바다를 지배했던 역사 속 군함들

[세상살이] - 포스타입, 창작과 수익

포스타입, 창작과 수익