CSS Font

 

https://developer.mozilla.org/ko/docs/Web/CSS/font

font - CSS: Cascading Style Sheets | MDN

 

 

 

1. font-size

.text{
  font-size: 12px;
}

   - 글자의 크기를 조정하는 스타일입니다.

   - 보통 px를 쓰며, rem이나 em 을 사용하기도 하며, %로 비율로 지정해주기도 합니다.

   - 16px 가 기본 설정으로 되어있습니다.

   - large, small 등의 키워드로 지정할 수도 있습니다. 

 

2. font-style

.text{
	font-style: italic;
}

   - 글자에 추가 효과를 정해주는 스타일입니다.

   - 기본값은 normal이며, 주로 italic체 (기울임)를 적용하는데 사용합니다.

 

3. font-weight

.text{
	font-weight: 700; /* bold */
}

 

   - 글자의 가중치 ( 굵기 )를 조정하는 스타일입니다.

   - 기본값은 normal, 400 입니다.

   - 100 부터 900까지 숫자를 통해 지정할 수도 있으며 bold, bolder 등의 키워드로 지정할 수도 있습니다.

 

 

4. font-family

.text{
	font-family : "Gill Sans Extrabold", sans-serif;
}

 

   - 외부 글꼴을 적용하는데 사용하는 스타일입니다.

 

   - 여러개의 폰트를 지정하여 컴퓨터에 폰트가 존재하지 않을 경우 대체폰트를 제시할 수 있습니다.

      > 만약 폰트가 존재한다면 해당 폰트로 지정해줍니다.

 

   - 직접 폰트명을 지정해줄수도 있지만, generic font 를 사용할 수도 있습니다.

      generic font : 컴퓨터가 대체가능한 폰트묶음, font family 가장 마지막에 지정하며,

         키워드이기때문에 따옴표를 붙이지 않는다.

 

5. line-height

.text{
	line-height: 5px;
}

.text{
	line-height: 2.5;
}

.text{
	line-height: normal;
}

   - 줄 간격을 조정하는 스타일입니다.

   - px나 rem 등으로 정확하게 조정할 수도 있지만, 키워드나 숫자로 지정할 수도 있습니다.

 

 

6. font 

.text{
	/*font-style font-stretch font-variant font-size font-family */
	font: italic ultra-condensed small-caps 1.2em "Fira Sans", sans-serif; 
}

.text{
    /* font-size/line height font-family */
    font: 1.2em/2 "Fira Sans", sans-serif;
}

   - 여러개의 font 속성을 한데 묶는 단축속성 입니다.

   - font를 사용하면 font-style은 initial로 되돌아간다.

 

   - 필수로 넣어야 되는 속성
      <font-size>
      <font-family> : 맨 마지막 값으로 적어야 합니다.

   -선택적으로 넣을수 있는 속성

      <font-style> 과 <font-weight> : <font-size>보다 앞에 위치해야한다.
      <line-height> : 위의 예시처럼 font-size 바로 뒤에 /를 추가하고 적습니다.

 

   - 선택적으로 넣을 수 있지만 잘 사용하지 않는 속성

      <font-variant> : 글꼴을 변형시킬 수 있습니다. CSS 2.1에 정의된 값만 지정 가능합니다.     

      <font-stretch> : 글꼴의 압축또는 확장을 시키는 스타일 , 단일 키워드 값만 가능합니다.