Programming > CSS

WEB페이지의 폰트지정하기 (프로젝트내)

#커스텀custom#dynamic web project

웹프로젝트에 폰트설정하기

커스텀 폰트를 프로젝트에 설정해 사용할 경우

※ 전체에 적용가능한 css 파일에 다운로드한 파일을 추가한후, 패스를 설정해 사용한다.

default.css

@font-face {
    font-family: "RIDIBatang";
    src: url("../font/RIDIBatang.otf");
}

* {
    font-family: "RIDIBatang", Sans-serif; }
    font-size: 1.02em;
    letter-spacing: 0.3px;
    line-height: 1.3em;
    .....
}
 

 

font-family 형식

selector 에 font-family: 뒤에 폰트를 컴마로 구분해 여러개 나열한다.

span {
        font-family:verdana,helvetica,arial,sans-serif;
}

폰트를 지정하는 방법

  • 우선순위가 높은 폰트를 앞에 위치시킨다. 
  • 앞쪽에 영어폰트를 먼저설정해서 영어폰트의 경우 우선적으로 적용하게한다.
  • Windows, Android, Mac, iPhone 등에 적용되도록 여러개의 폰트를 나열한다.
  • Android의 경우, Roboto, 'Droid Sans' 를 지정하면 단말환경에 따라 하나가 사용된다.
  • 한글명으로 된 폰트의 경우는 쿼티션( ' or " )로 묶어서 설정한다.
  • 맨 마지막에는 일반적용이 되는 폰트(총칭패밀리)를 추가한다. (아무것도 없을 경우 사용: 아래 참조)

 

총칭패밀리

  1. sans-serif      : 고딕체 폰트
  2. serif             : 명조체 폰트
  3. monospace   : 고정폭 폰트
  4. cursive         : 필기체 폰트
  5. fantasy         : 장식형 폰트

 

웹전체에 적용

웹 전체에 적용할 경우 body 태그에 적용하면 된다.

 

[css-layout] 요소를 중앙에 배치하기  ❮
❯ [CSS] 요소(element)종류 HTML Tag Default display 속성