[css font] font-family 부터 온갖 속성을 한방에

Font 속성 총정리

font의 속성을 한방에 쏙쏙쏙

 

▼▼기타 속성 정리▼▼

[css 가운데 정렬] text-indent부터 여러가지 text 소스를 알아보자.

text관련 css텍스트관련 css 총정리여러 속성들을 한번에 모아봤습니다.text-align:left(왼),center(중앙),right(오른쪽)기본이되는 정렬 css 입니...

blog.naver.com

CSS로 정의할 수 있는 폰트의 내용은 무엇이 있을까 ? 

 폰트는 제일 기본적으로, 사람들이 많이 보는 내용으로 어떤 모양을 사용했느냐에 따라 집중도가 달라 질 수 있습니다. 우선 기본적인 FONT CSS 로는 '서체(font-family / face)' ,  '크기(font-size)', '형태(font-style)', '두께(font-weight)', '정렬(text-align)', '꾸밈(text-decoration)', '그림자(text-shadow)', '색상(color)', '폰트사이간격(letter-spacing)', 단어사이간격(word-spacing)', '줄간격(line-height)' 이 있습니다.

※ 서체 FONT-FAMILY & FACE

우선 두가지 다 서체를 결정하는 태그라는 점은 공통점이지만, 사용방식에서 차이가 있습니다. face는 font에 직접 사용하고, font-family는 style 안에 사용해야합니다.

<font>해당 컴퓨터에서 기본으로 설정하는 글씨체로 보여집니다.</font>    <font face="궁서체">FACE는 font에 직접사용이되요. 이건 궁서체겠죠?</font>    <font style="font-family:'궁서체';">STYLE 안에 써줘야 됩니다. 이것도 궁서체죠</font>

※ 크기 font-size

크기는 숫자형태의 값이 들어가게되는데, 이 또한 고정값과 유동값으로 나눠집니다.

- 고정단위 :  px,mm,cm,pt,small.medium,lage,H1,H2...

- 유동단위 : %,em (1.0em=100%, 1.5em=150%),smaller,larger

<font size="2">폰트 사이즈 2로 고정됩니다.</font>    <div style="font-size:12px">폰트 사이즈 12로 고정됩니다.</div>    <font size="120%">화면 크기에 따라 120% 사이즈로 유동적으로 움직입니다</font>    <div style="font-size:1.2em">화면 크기에 따라 120% 사이즈로 유동적으로 움직입니다</div>

※ 형태 font-style

형태는 일반 기울임꼴 이런식으로 나눠집니다. '기본(normal)', '기울임(italic)', '기울임(oblique)' 정도로 나눠집니다.

 

<div style="font-style:normal">기본 글꼴</div>    <div style="font-style:italic">기울임(상대적으로 웹에서 많이 사용되는 기울임)<div>    <div style="font-style:oblique">기울임(italic이랑 효과가같음)</div>

※ 두께 font-weight

두께는 숫자 혹은 두껍게 얇게 식으로 모두 지정이 가능합니다 normal, bold, bolder, lighter / 100, 200, 300, 400, 500, 600, 700, 800, 900

 

<div style="font-weight:normal">기본 굵기</div>    <div style="font-weight:bold">글자를 두껍게</div>    <div style="font-weight:100">글자를 100만큼 두껍게</div>    <div style="font-weight:600">글자를 600만큼 두껍게</div>

※ 폰트사이간격 letter-spacing

글자글자 사이에 간격을 지정합니다. - 도 가능합니다.

 

<div style="letter-spacing:10px">10px씩 글자 사이에 간격이 생깁니다.</div>    <div style="letter-spacing:-10px">-10px씩 글자 사이에 간격이 좁아집니다.</div>

※ 단어사이간격 word-spacing

단어 단어 사이에 간격을 지정합니다. - 도 가능합니다.

 

<div style="word-spacing:10px">10px씩 단어 사이 사이에 간격이 생깁니다.</div>    <div style="word-spacing:-10px">-10px씩 단어 사이 사이에 간격이 좁아니다.</div>

※ 줄간격 line-height

고정 유동 단위로 모두 지정이 가능하며. - 로 도 사용이 가능합니다.

 

.box {width:250px; border:10px solid #FFF; height:250px; float:left; margin-left:70px; color:#fff; text-align:center;}    .box .text_height_100 {line-height:100px;}    .box .text_height_50 {line-height:50px;}    <div class="box">       <div class="text_height_100">줄간격 100px<br>다음줄과 위에줄의 간격도 100px </div>    </div>    <div class="box">       <div class="text_height_50">줄간격 50px<br>다음줄과 위에줄의 간격도 50px </div>    </div>

 

※ 그림자 text-shadow / 꾸밈 text-decoration /  정렬 text-align (위에 링크에 설명되어있음)

[출처] [css font] font-family 부터 온갖 속성을 한방에 !|작성자 쏭냥