목차
- font-stretch 예제 - 글꼴 너비 조정
- font-stretch 정의
- 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: 부모요소의 속성값 상속.
