나아가는 길에 발자국을 찍어보자

[ 애니메이션 페이지 만들기 _1 ] 폰트 설정과 적용하기(with @font-face) 본문

Projects/Font-page(미대생 졸전 도와주기)

[ 애니메이션 페이지 만들기 _1 ] 폰트 설정과 적용하기(with @font-face)

NAWIN 2020. 11. 6. 12:10
반응형

 

우선 내가 만들 페이지에 원하는 폰트를 사용해야 했기 때문에 `@font-face`를 통해 웹 브라우저가 폰트를

다운 받게 해야했다.

 

 

Syntax

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

  • <a-remote-font-name>
    font 속성에서 사용할 폰트명을 지정한다.

  • <source>
    다운받을 웹폰트가 있는 파일 위치를 나타내는 url 값을 지정하거나 local 컴퓨터에 설치된 폰트명을
    `local("폰트명")` 형식으로 지정한다.

  • <weight>
    폰트 굵기의 값 (해당 프로젝트에선 사용 x)

  • <style>
    폰트 스타일 값.

[내 코드]

@font-face {
        font-family: "NEWtro_T";
        src: url("./font/newtrotfonttestGX.ttf");
    }

@font-face로 폰트를 다운받은다음 font-family로 우선순위를 지정해 폰트를 사용한다.

보통 font-family목록에는 최소 한개의 generic family를 추가하여, 폰트가 다운이 안되거나 없는 일이

발생할 때를 대비한다고 한다.

 

 

나는 <body>에 존재하는 폰트들을 모두 뉴트롯체를 사용하고 싶기때문에 body css에 지정해주었다.

하지만 <input>이나 <textarea>같은 태그에는 따로 지정해주어야 하더라...

 body {
       font-family: "NEWtro_T", Times;
       display: block;
       align-items: center;
       justify-content: center;
       text-align: center;
       min-height: 100vh;
       font-variation-settings: 'YEAR' 1930  ;  
       font-variation-settings: 'TEMP' 0 ;
    }

 

 

Variable-font 속성

 

베리어블폰트는 앞서 말했다 싶이 사용자가 하나의 폰트로 설정값을 변경하여 여러 스타일을 쓸수있는 폰트이다.

그래서 설정값을 바꾸면 폰트 모양이 바뀌어진다.

그 속성값을 설정하는 css 가 font-variation-settings 이다.

font-variation-settings: '폰트에서 정한 변수명' value ;

 

이런 식으로 사용하는데, 위에 써진거 처럼 내 폰트는 변수가 2개라 각각 설정해 두고 값을 바꾸면

폰트 모양이 바뀐다. 콤마로 구분지어 한줄에 설정할 수도 있다.

[변수명과 value 범위]

<YEAR> : 1930 - 2020

<TEMP> : 0 - 1000

1) font-variation-settings: 'YEAR' 1930, 'TEMP' 0

2) font-variation-settings: 'YEAR' 2020, 'TEMP' 0

3) font-variation-settings: 'YEAR' 1930, 'TEMP' 1000

4) font-variation-settings: 'YEAR' 2020, 'TEMP' 1000

 

 

 

이 4가지의 폰트를 만들고 사용자가 설정한 값이 변하면 그사이의 값으로 폰트가 저절로 변형이 되어 보여진다고 한다. 한마디로 폰트 디자이너는 4가지의 폰트를 만들어 하나로 배포하는 것 이다.

정말 고생한다고 생각이 들었다ㅜㅜ.

반응형
저작자표시

'Projects > Font-page(미대생 졸전 도와주기)' 카테고리의 다른 글

[애니메이션 페이지 만들기_3]CSS에도 변수를 쓸 수 있다!  (0) 2020.11.11
[ 애니메이션 페이지 만들기_2 ] < animation > 정리  (0) 2020.11.06
[ 1차 미팅 ]1차 기획안 완성  (0) 2020.11.05
[시작하기전] 베리어블 폰트(Variable Font)란  (0) 2020.11.02
미대생 친구 졸전 도와주기  (0) 2020.11.02
'Projects/Font-page(미대생 졸전 도와주기)' Related Articles more
Comments