재우니의 블로그

image, xml, javascript, css, font 파일을 base64 로 치환하여 html 에 적용해 보기

 

html 을 pdf 로 변환할 경우

 

image, xml, javascript, css, font 관련된 파일을 base64 로 치환하여 사용하는 방법입니다.

온라인 환경이 되지 않은 경우 사용하기 좋은 방법입니다. 

 

참고로 https://selectpdf.com/html-to-pdf-api/ 경우 html 태그를 사용하여 pdf 로 변환해 주는 컴포넌트입니다. 이 경우 폰트가 적용되지 않아, 이를 base64 로 폰트 형태를 아래와 같이 만들어서 사용하면, pdf 로 변환할 경우 폰트가 제대로 적용되는 것을 확인하였습니다.

 

HTML 에서 base64 활용하는 방법(이미지, xml, javascript, css)

 

JPEG IMAGES: <img src="data:image/jpeg;base64,YOUR BASE64 STRING HERE"/>
PNG IMAGES:  <img src="data:image/png;base64,YOUR BASE64 STRING HERE"/>
GIF IMAGES:  <img src="data:image/gif;base64,YOUR BASE64 STRING HERE"/>
XML IMAGES: <xml><image>data:image/jpeg;base64,YOUR BASE64 STRING HERE</image></xml>
** replace image/jpeg with image/png or image/gif if you're not using jpegs
JAVASCRIPTS: <script type="text/javascript" src="data:text/javascript;base64,YOUR BASE64 STRING HERE"></script>
CSS: <link rel="stylesheet" type="text/css" href="data:text/css;base64,YOUR BASE64 STRING HERE"/>

 

 

CSS 에서 Base64 사용하는 방법

 

IMAGES: .yourclass {background: url('data:image/jpeg;base64,YOUR BASE64 STRING HERE');}
** replace image/jpeg with image/png or image/gif if you're not using jpegs
OPENTYPE FONTS: @font-face{font-family:'yourfontname'; src: url(data:font/opentype;charset=utf-8;base64,YOUR BASE64 STRING HERE);}
WOFF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-woff;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff);}
WOFF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-woff2;charset=utf-8;base64,YOUR BASE64 STRING HERE) format(woff2);}
TTF FONTS: @font-face{font-family:'yourfontname'; src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format('truetype');}

 

 

적용해 보기

 

구글에서 나눔고딕 ttf 파일을 다운로드 받아서 base64로 변환해 주는 온라인 사이트 "https://www.giftofspeed.com/base64-encoder/" 에 접속하여 해당 base64 문자열을 아래와 같이 ;base64, 다음에문자열을 넣었습니다.

@font-face {
    font-family: 'Nanum Gothic';
    src: url(data:application/font-ttf;charset=utf-8;base64,AAEAAAAPAIAAAwBwT1M~~~~~~~~) format('truetype');
}

body {
    font-family: Nanum Gothic;
}

 

NanumGothic-Regular.ttf
3.90MB

 

 

 

참고 사이트

 

파일을 base64 로 만들어 주는 온라인 사이트

 

https://www.giftofspeed.com/base64-encoder/

 

File to Base64 Encoder

With years of experience we know all the ins and outs of how to get the maximum speed out of any website.

www.giftofspeed.com

 

구글 폰트 다운로드

 

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com