JS - 자바스크립트(javascript) 만으로 font (폰트) CSS 속성 조작하기

2022. 5. 3. 15:07

▶ font 프로퍼티 (속성)

💻 CSS 프로퍼티(속성) / JavaScript 프로퍼티(속성)

CSS 프로퍼티 (속성)	JavaScript 프로퍼티 (속성)
font	font
font-family	fontFamily
font-kerning	fontKerning
font-size	fontSize
font-style	fontStyle
font-variant	fontVariant
font-weight	fontWeight

▶ CSS 조작하기

예제)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Tapestry&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Water+Brush&display=swap');@import url('https://fonts.googleapis.com/css2?family=Water+Brush&display=swap');
  </style> 
  
  <script>
      window.addEventListener('DOMContentLoaded', (event) => {
            let element_1 = document.getElementById('test-title');
            let element_2 = document.getElementById('test-title-2');
        
            element_1.style.font= "italic small-caps bold 30px Tapestry";
            element_2.style.font= "italic small-caps bold 30px Water Brush";
      });  
  </script>
</head>
  
<body>
  <h1 id="test-title">show me the money</h1>
  <h1 id="test-title-2">show me the money</h1>
</body>
</html>

위 소스에서 구글 웹폰트를 사용했고,

결과 화면 이미지를 보면 폰트가 적용된 것을 확인할 수 있다.

자바스크립트 부분을 확인하여 어떻게 자바스크립트로 폰트를 적용하는지

확인하면 된다. 이제 아래부턴 적용 방법만 정리하겠다.

💻 font

/*
    (폰트스타일 | 대문자&소문자 | 굵기 | 폰트크기 | 폰트패밀리)
    
    폰트스타일 (normal, italic, oblique)
    대문자&소문자 (normal, small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps)
    굵기 (normal, bold, bolder, lighter, 100 ~ 900)
    폰트크기 (숫자px)
    폰트패밀리 (웹폰트의 폰트 패밀리를 적어주면된다.)
*/

// 사용법
element_1.style.font= "italic small-caps bold 30px Tapestry";

💻 font-family

// 사용법
element_1.style.fontFamily= "Tapestry";

💻 font-kerning

폰트 커닝이란?

문자 간격을 정의하는데 중요한 건 내가 사용하고자 하는 폰트패밀리의 글꼴이 커닝 정보가 포함이 되어있어야한다.

없으면 적용해도 효과가 없다.

// 사용법 (auto | normal | none)
element_1.style.fontKerning= "normal";

💻 font-size

/*
    사용법
    
    xx-small
    x-small
    small
    medium
    large
    x-large
    xx-large
    smaller
    larger
    숫자px
    숫자em
*/

element_1.style.fontSize= "15px";

💻 font-style

// 사용법 (normal | italic | oblique)
element_1.style.fontStyle = "italic";

💻 font-variant

소문자 글꼴에서는 모든 소문자가 대문자로 변경된다.

// 사용법 (normal | small-caps)
element_1.style.fontVariant = "small-caps";

💻 font-weight

// 사용법 (normal | bold | bolder | lighter | 100 ~ 900)
element_1.style.fontWeight = "700";

저작자표시 비영리 변경금지

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

JS - 자바스크립트(javascript) 만으로 border-style(border, 보더스타일) CSS 속성 조작하기 (0)	2022.05.02
JS - 자바스크립트(javascript) 만으로 background (이미지, 위치, 반복, 모드 등등) CSS 속성 조작하기 (0)	2022.04.29
JS - 자바스크립트(javascript) 독립적인 객체(오브젝트, Object) 복사, 복제 하기 (0)	2022.04.27
JS - 자바스크립트(javascript) 동등 연산자 ==, === 이상하다, 혼란스럽다 - (3) (0)	2022.04.27
JS - 자바스크립트(javascript) 동등 연산자 ==, === 이상하다, 혼란스럽다 - (2) (0)	2022.04.26

열공의 기록