์›นํฐํŠธ ์ ์šฉํ•˜๊ธฐ

2018. 2. 22.ใ†๋ฆฌ๋ทฐ/ํฐํŠธใ†๐Ÿ’ฌ๋Œ“๊ธ€

728x90
๋ฐ˜์‘ํ˜•


์›นํฐํŠธ ์ ์šฉํ•˜๊ธฐ



์‚ฌ์‹ค ์›นํฐํŠธ ์ ์šฉํ•˜๊ธฐ์— ๊ด€๋ จ๋œ ํฌ์ŠคํŒ…์€ ๊ฒ€์ƒ‰๋งŒ ํ•ด๋„ ์ฐจ๊ณ  ๋„˜์ณ์„œ ์ €๊นŒ์ง€ ์“ธ ํ•„์š”๊ฐ€ ์—†์„ ์ •๋„์ง€๋งŒ

ํฐํŠธ ์ˆ˜์ •ํ•˜๊ธฐ ํฌ์ŠคํŒ…์„ ํ–ˆ์œผ๋‹ˆ ์ด์–ด์„œ ๊ฐ„๋‹จํžˆ๋งŒ ์ ์–ด๋ณผ๊นŒ ํ•ฉ๋‹ˆ๋‹ค



ํฐํŠธ๋ฅผ ์ˆ˜์ •ํ–ˆ์œผ๋ฉด ttfํฐํŠธํŒŒ์ผ์ด ๋งŒ๋“ค์–ด์กŒ๊ฒ ์ฃ 

์›นํฐํŠธ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ttf ํŒŒ์ผ์„ eotํŒŒ์ผ๊ณผ woffํŒŒ์ผ๋กœ ๋ณ€ํ™˜ ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.



* eotํŒŒ์ผ์€ ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์—์„œ ๋งŒ๋“  ๊ทœ๊ฒฉ์œผ๋กœ ๋Œ€๋ถ€๋ถ„ IE8 ์ด์ „๋ฒ„์ „์„ ์œ„ํ•ด ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ๋ณด๋ฉด ๋ฉ๋‹ˆ๋‹ค

* woffํŒŒ์ผ์€ ๋ชจ์งˆ๋ผ๋ฅผ ๋Œ€ํ‘œ๋กœ ๋‹ค์–‘ํ•œ ๊ทธ๋ฃน์ด ํ•จ๊ฒŒ ๋งŒ๋“  ํฌ๋งท์ธ๋ฐ ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›๋ฉ๋‹ˆ๋‹ค.


'๊ตฌํ˜• ๋ธŒ๋ผ์šฐ์ € ์•Œ๊ฒŒ๋ญ์•ผ' ํ•œ๋‹ค๋ฉด woffํŒŒ์ผ๋งŒ์œผ๋กœ๋„ ์ถฉ๋ถ„ํ•ฉ๋‹ˆ๋‹ค^^;





eot ํŒŒ์ผ๋ณ€ํ™˜


www.eotfast.com์—์„œ ์ œ์ž‘ํ•œ ํŒŒ์ผ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋˜๋Š”๋ฐ

ํ™ˆํŽ˜์ด์ง€๊ฐ€ ํŒ”๋ ธ๋Š”์ง€ ์ด์ƒํ•œ ์ŠคํŒธ์‚ฌ์ดํŠธ๊ฐ€ ๋˜์—ˆ๋„ค์š”;


EOTFAST-1.EXE


ํŒŒ์ผ๋งŒ ๋”ฐ๋กœ ์—…๋กœ๋“œ ํ–ˆ์Šต๋‹ˆ๋‹ค




ํƒ์ƒ‰๊ธฐ๋ฅผ ์—ด๊ณ  ํฐํŠธํŒŒ์ผ์„ ์œ„์— ๋‹ค์šด๋ฐ›์€ exeํŒŒ์ผ ์œ„๋กœ ๋“œ๋ž˜๊ทธ&๋“œ๋กญ ํ•ด์ฃผ๋ฉด ๋ณ€ํ™˜๋œ eotํŒŒ์ผ์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.


์œ„ ttfํŒŒ์ผ์€ 1.4M๊ฐ€ ๋„˜๋„ค์š”@_@

๋‹คํ–‰ํžˆ๋„ ๋ณ€ํ™˜ํ•˜๋ฉด 400KB๋Œ€๋กœ ์ค„์–ด๋“ญ๋‹ˆ๋‹ค




woff ํŒŒ์ผ๋ณ€ํ™˜


developer.mozilla.org/en-US/docs/Web/Guide/WOFF

๋ชจ์งˆ๋ผ ๊ฐ€์ด๋“œ ์‚ฌ์ดํŠธ๋งŒ ์žˆ๊ณ  ๋‹ค์šดํŽ˜์ด์ง€๋กœ ์—ฐ๊ฒฐ์ด ์•ˆ๋˜๋Š”๊ตฐ์š”


sfnt2woff.exe


์—ญ์‹œ ํŒŒ์ผ๋งŒ ๋”ฐ๋กœ ์—…๋กœ๋“œ ํ–ˆ์Šต๋‹ˆ๋‹ค


๋ณ€ํ™˜๋ฐฉ๋ฒ•์€ ์œ„์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค

ํฐํŠธํŒŒ์ผ์„ ์œ„ exeํŒŒ์ผ ์œ„๋กœ ๋“œ๋ž˜๊ทธ&๋“œ๋กญํ•ด์ฃผ๋ฉด ํŒŒ์ผ์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค


์œ„ 2๊ฐœ์˜ ํŒŒ์ผ์„ ์—…๋กœ๋“œ ํ•ด์ค€๋’ค ์Šคํ‚จ์„ค์ •์—์„œ css, html์— ์ ์šฉํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค






์šฐ์„  ์•„๋ž˜์ฒ˜๋Ÿผ cssํŒŒ์ผ์„ ํ•˜๋‚˜ ๋งŒ๋“ญ๋‹ˆ๋‹ค


/*

 * ์—ฌ๊ธฐ๋Š” ์„ค๋ช…๋ถ€๋ถ„

 * ํฐํŠธ์ด๋ฆ„ (Korean)

 */

@font-face {

  font-family: 'ํฐํŠธ์ด๋ฆ„(์›ํ•˜๋Š”๊ฑธ๋กœ)';

  font-style: normal;

  font-weight: 400;

  src: url(// "์—…๋กœ๋“œ๋œ url์ฃผ์†Œ" .eot);

  src: url(// "์—…๋กœ๋“œ๋œ url์ฃผ์†Œ" .eot?#iefix) format('embedded-opentype'),

       url(// "์—…๋กœ๋“œ๋œ url์ฃผ์†Œ" .woff) format('woff'),

}


์—…๋กœ๋“œ๋œ ํŒŒ์ผ์˜ url ์ฃผ์†Œ๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ์Šคํ‚จ์„ค์ •์— ๋“ค์–ด๊ฐ€์„œ ํ•ด๋‹น ํŒŒ์ผ์„ ์šฐํด๋ฆญํ•˜๋ฉด ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

์—ฌ๋Ÿฌ ๊ฐœ์˜ ์›นํฐํŠธ๋ฅผ ํ•˜๋‚˜์˜ css๋กœ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค

์œ„์— ์ž‘์„ฑํ•œ cssํŒŒ์ผ๋„ ์—…๋กœ๋“œ ํ›„ URL์ฃผ์†Œ๋ฅผ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค







<link rel="stylesheet" href="// (์—…๋กœ๋“œํ•œ cssํŒŒ์ผ url์ฃผ์†Œ) .css">

์Šคํ‚จ์„ค์ •์˜ html์˜ <head> ~ </head> ์‚ฌ์ด์— ์œ„ ์ฝ”๋“œ๋ฅผ ๋„ฃ์–ด์ค๋‹ˆ๋‹ค



body {font-family:'ํฐํŠธ์ด๋ฆ„(์œ„์— ์›ํ•˜๋Š”๊ฑธ๋กœ ์ •ํ•œ ์ด๋ฆ„)';}

์Šคํ‚จ์„ค์ •์˜ css์—์„œ ์›นํฐํŠธ ์ ์šฉ์„ ์›ํ•˜๋Š” ๋ถ€๋ถ„์— ์„ค์ •๊ฐ’์„ ๋„ฃ์–ด์ค๋‹ˆ๋‹ค


์œ„๋Š” body ๊ฐ’์— ๋„ฃ์–ด์ฃผ์—ˆ๊ณ  ์–ด๋Š ๋ถ€๋ถ„์— ํฐํŠธ๊ฐ’์„ ๋„ฃ์–ด์•ผ ํ• ์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์„ ๋•Œ์—๋Š”

์˜ˆ์ „์— ์ž‘์„ฑํ•œ ํŒ์„ ์ฐธ๊ณ ํ•˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค



์›นํฐํŠธ๋ฅผ ์ ์šฉํ•˜๋Š” ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ• ์ค‘์— ๊ฐ„๋‹จํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ–ˆ๋Š”๋ฐ

๋ญ”๊ฐ€ ์ž˜ ์„ค๋ช…์ด ์•ˆ ๋œ ๋Š๋‚Œ์ด^^;


๋” ์ „๋ฌธ์ ์ธ๊ฑด ๊ตฌ๊ธ€ ๊ฒ€์ƒ‰ ๊ณ ๊ณ (๋ฌด์ฑ…์ž„;)



ํŠน๋ณ„ํžˆ ์ˆ˜์ •ํ•œ ํŒŒ์ผ์ด ์•„๋‹ˆ๋ผ๋ฉด ๊ตฌ๊ธ€์—์„œ ๋‚˜๋ˆ”ํฐํŠธ๋ฅผ CDN์œผ๋กœ ์ œ๊ณตํ•˜๊ณ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฝ”๋“œ๋งŒ ๊ฐ€์ ธ๋‹ค ์“ฐ๋ฉด ๊ท€์ฐฎ์€ ๋ณ€ํ™˜, ์—…๋กœ๋“œ ์—†์–ด๋„ ๊ฐ„๋‹จํžˆ ์›นํฐํŠธ๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค


๊ตฌ๊ธ€ ์›นํฐํŠธ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ



์ถ”๊ฐ€๋กœ ์ œ ํฌ์ŠคํŒ… ์†Œ์ œ๋ชฉ์— ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š”

์ด ๋งํฌํฐํŠธ(โ†’) ์ด๋กญ๊ฒŒ ๋ฐ”ํƒ•์ฒด๋„ ๋ฌด๋ฃŒ ์›นํฐํŠธ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ์œผ๋‹ˆ ์ฐธ๊ณ ํ•˜์„ธ์š”^^


728x90
๋ฐ˜์‘ํ˜•