[font] CSS - font-stretch 속성 - 폰트 너비 조정 (= font-stretch속성 = 폰트스트레치속성) ※ 글꼴 응축/확장

1. font-stretch 예제 - 글꼴 너비 조정
2. font-stretch 정의
3. font-stretch 구문

font-stretch 예제 - 글꼴 너비 조정

 

<style>

div { font-family: Verdana, Geneva, Tahoma, Arial, "Helvetica Neue", "Lucida Grande", sans-serif;}    

.a { font-stretch: condensed;}

.b { font-stretch: expanded;}

</style>

<div class="a">홈짱닷컴 Homzzang.com</div>

<div class="b">홈짱닷컴 Homzzang.com</div>

 

결과보기

font-stretch 정의

 

글꼴 자체 너비를 더 좁게(축소) 또는 더 넓게(확장) 함.

 

---

1.

• 모든 폰트가 지원하는 건 아님.
• 브라우저에 따라 너비 변경폭이 다를 수 있음.

 

2.

• 기본값: normal
• 상속여부: O
• 애니가능: O
• CSS버전: CSS3
• JS구문: object.style.fontStretch="expanded";

 

3.

IE9 이상 주요 최신 브라우저 모두 지원.

 

4. MDN font-stretch 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch

 

font-stretch 구문

 

selector {font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|percentage|initial|inherit;}

 

---

[속성값]

 

• ultra-condensed: 텍스트를 최대한 좁게 만듦.
• extra-condensed: 텍스트를 condensed보다 좁게 만들지만, ultra-condensed만큼은 좁지 않게 만듦.
• condensed: 텍스트를 semi-condensed보다 좁게 만들지만, extra-condensed만큼은 좁지 않게 만듦.
• semi-condensed: 텍스트를 normal보다 좁게 만들지만, condensed만큼은 좁지 않게 만듦.
• normal: 기본 값. 글꼴을 늘리거나 좁히지 않음.
• semi-expanded: 텍스트를 normal보다 넓게 만들지만, expanded만큼은 넓지 않게 만듦.
• expanded: 텍스트를 semi-expanded보다 넓게 만들지만, extra-expanded만큼은 넓지 않게 만듦.
• extra-expanded: 텍스트를 expanded보다 넓게 만들지만, ultra-expanded만큼은 넓지 않게 만듦.
• ultra-expanded: 텍스트를 가능한 한 넓게 만듦.
• percentage: 백분율로 표시 (예) 150%
• initial: 이 속성의 기본값 사용.
• inherit: 부모요소의 속성값 상속.