Font - kuimoani/defold GitHub Wiki

Font files

ํฐํŠธ๋Š” GUI ์”ฌ(GUI scene)์—์„œ ๋ผ๋ฒจ ์ปดํฌ๋„ŒํŠธ(label component)์™€ ํ…์ŠคํŠธ ๋…ธ๋“œ(text node)๋ฅผ ๋ Œ๋”๋ง ํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด ๋งค๋‰ด์–ผ์€ Defold๊ฐ€ ํฐํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•๊ณผ ๊ฒŒ์ž„ํ™”๋ฉด์— ์“ฐ์ผ ํฐํŠธ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

ํฐํŠธ ํŒŒ์ผ์€ TrueType, OpenType, BMFont ํฌ๋ฉง์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ Defold๊ฐ€ ๋ Œ๋”๋ง ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ทธ๋ž˜ํ”ฝํ˜•์‹์˜ ํฌ๋ฉง์œผ๋กœ ์ž๋™์œผ๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๋น„ํŠธ๋งต(bitmap)๊ณผ ๋””์Šคํ„ด์Šค ํ•„๋“œ(distance field) ๋‘ ๊ฐ€์ง€์˜ ๋ Œ๋”๋ง ๊ธฐ์ˆ ์ด ์žˆ์œผ๋ฉฐ ๊ฐ๊ฐ ์žฅ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

Creating a font

Defold์—์„œ ์‚ฌ์šฉํ•  ํฐํŠธ๋ฅผ ๋งŒ๋“ค๋ ค๋ฉด, File > New > Font File ๋ฉ”๋‰ด๋ฅผ ์„ ํƒํ•ด์„œ ์ƒˆ ํฐํŠธํŒŒ์ผ์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (ํ˜น์€ Project Explorer์—์„œ ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ ๋ˆŒ๋Ÿฌ์„œ ํŒŒ์ผ ์ƒ์„ฑ)

Create font

๋˜ํ•œ Defold ํ”„๋กœ์ ํŠธ๋กœ ํฐํŠธ๋ฅผ ์ž„ํฌํŠธ ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. TrueType์ด๋‚˜ OpenType (ํ˜น์€ BMFont, ์•„๋ž˜ ์ฐธ๊ณ ) ํŒŒ์ผ์„ Project Explorer์˜ ์›ํ•˜๋Š” ์œ„์น˜์— ๋“œ๋ž˜๊ทธ-์•ค-๋“œ๋กญ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

ํฐํŠธ์˜ ๊ทธ๋ฆผ์ž ๋ Œ๋”๋ง์€ ํ˜„์žฌ ์„ฑ๋Šฅ์ƒ์˜ ์ด์œ ๋•Œ๋ฌธ์— ๊ธฐ๋ณธ์ ์œผ๋กœ ๋น„ํ™œ์„ฑํ™” ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—” ๊ทธ๋ฆผ์ž๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ์ปค์Šคํ…€ ์‰์ด๋”๋ฅผ ๋งŒ๋“ค์–ด ์“ฐ๋ฉด ๋ฉ๋‹ˆ๋‹ค(์„ฑ๋Šฅ์ƒ ๋น„์šฉ์ด ์กฐ๊ธˆ ๋“ค๊ฒŒ๋จ). ์•ž์œผ๋กœ Defold๋Š” ์‚ฌ์šฉ๋œ ๊ธฐ๋Šฅ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ ๋‹นํ•œ ์‰์ด๋”๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

font

์ž„ํฌํŠธํ•œ TTF, OTF, .fnt ํŒŒ์ผ(ํŒŒ์ผ์„ ์ฐพ์œผ๋ ค๋ฉด [...] ๋ฒ„ํŠผ ํด๋ฆญ)์„ ์ด ์†์„ฑ์— ์„ค์ •ํ•˜๋ฉด ์—๋””ํ„ฐ๋Š” ์ฆ‰์‹œ ํฐํŠธ ๋ฐ์ดํ„ฐ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํฐํŠธ ์—๋””ํ„ฐ์—์„œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

material

ํฐํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋˜๋Š” ๋ฉ”ํ„ฐ๋ฆฌ์–ผ. ๋””์Šคํ„ด์Šค ํ•„๋“œ ํฐํŠธ(distance field font)๋‚˜ ๋น„ํŠธ๋งต ํฐํŠธ(BMFont)๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋Š” ๊ฒฝ์šฐ ์ด ๊ฐ’์„ ๋ณ€๊ฒฝํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. (์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ์ฐธ๊ณ )

size

ํ”ฝ์…€๋‹จ์œ„์˜ ๋ฌธ์ž(glyph) ํฌ๊ธฐ

antialias

๋น„ํŠธ๋งต์œผ๋กœ ๊ตฌ์šธ(bake)๋•Œ ์•ˆํ‹ฐ์•Œ๋ฆฌ์•„์‹ฑ์„ ์ ์šฉํ•  ๋‹จ์œ„. 0์ด๋ฉด ํ”ฝ์…€ ํผํŽ™ํŠธ(pixel perfect)๋กœ ํฐํŠธ๋ฅผ ๋ Œ๋”๋ง ํ•ฉ๋‹ˆ๋‹ค.

alpha

0.0~1.0 ๊นŒ์ง€์˜ ์•ŒํŒŒ ์ฑ„๋„ ๊ฐ’. 0.0์€ ํˆฌ๋ช…(transparent)ํ•˜๊ณ  1.0์€ ๋ถˆํˆฌ๋ช…(opaque)ํ•จ

outline_alpha

0.0~1.0 ๊นŒ์ง€์˜ ์™ธ๊ณฝ์„ ์˜ ์•ŒํŒŒ ์ฑ„๋„ ๊ฐ’

outline_width

ํ”ฝ์…€๋‹จ์œ„์˜ ์™ธ๊ณฝ์„  ๋‘๊ป˜. 0์œผ๋กœ ์„ค์ •ํ•˜๋ฉด ์™ธ๊ณฝ์„  ์—†์Œ.

shadow_alpha

0.0~1.0 ๊นŒ์ง€์˜ ๊ทธ๋ฆผ์ž ์•ŒํŒŒ ์ฑ„๋„ ๊ฐ’

shadow_blur

ํ”ฝ์…€๋‹จ์œ„์˜ ๊ทธ๋ฆผ์ž์˜ ๋ธ”๋Ÿฌ ๋ฐ˜๊ฒฝ(blur radius)

shadow_x

๊ทธ๋ฆผ์ž์˜ ๊ฐ€๋กœ ์˜คํ”„์…‹(horizontal offset)

shadow_y

๊ทธ๋ฆผ์ž์˜ ์„ธ๋กœ ์˜คํ”„์…‹(vertical offset)

extra_characters

๊ธฐ๋ณธ์ ์œผ๋กœ ํฐํŠธ๋Š” ASCII์˜ ์ธ์‡„ ๊ฐ€๋Šฅํ•œ ๋ฌธ์ž(char code 32~126)๋“ค์„ ํฌํ•จํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์™ธ์˜ ๋ฌธ์ž๋ฅผ ๋” ์ถ”๊ฐ€ํ•˜๋ ค๋ฉด ์ด ์†์„ฑ์— ์ถ”๊ฐ€ํ•  ๋ฌธ์ž๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

output_format

์ด ์†์„ฑ์€ ์ƒ์„ฑ๋œ ํฐํŠธ์˜ ํƒ€์ž…์„ ์ œ์–ดํ•ฉ๋‹ˆ๋‹ค.

  • TYPE_BITMAP: ํฐํŠธ๊ฐ€ OTF๋‚˜ TTF ํŒŒ์ผ์ธ ๊ฒฝ์šฐ์—, ์ž„ํฌํŠธํ•œ ํฐํŠธ๋ฅผ ๋น„ํŠธ๋งต ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ…์ŠคํŠธ ๋…ธ๋“œ(text node)๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ํฐํŠธ ์‹œํŠธ ํ…์Šค์ณ(font sheet texture)๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ปฌ๋Ÿฌ ์ฑ„๋„์€ ํฐํŠธ์˜ face shape, outline, shadow ๊ฐ™์€ ํฐํŠธ์˜ ์—ฌ๋Ÿฌ ์ธก๋ฉด์„ ์ธ์ฝ”๋”ฉ ํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋˜์–ด ๊ธ€๊ผด์˜ ์›์‹œ ๋ชจ์–‘์„ red ์ฑ„๋„๋กœ, outline์€ green ์ฑ„๋„๋กœ, shadow๋Š” blue ์ฑ„๋„๋กœ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ๋ณด์—ฌ ์ค๋‹ˆ๋‹ค. ๋น„ํŠธ๋งต ํƒ€์ž… ํฐํŠธ์˜ ํ”ฝ์…€์˜ ๋ฐ€๋„(density)๋Š” ๊ณ ์ •๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ ์ •ํ•ด์ง„ ์‚ฌ์ด์ฆˆ ํ˜น์€ ์ž‘์€ ์‚ฌ์ด์ฆˆ๋กœ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒฝ์šฐ์—” ๊น”๋”ํ•˜๊ฒŒ ๋ณด์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋น„ํŠธ๋งต ํฐํŠธ๋Š” ์•„์ฃผ ๋น ๋ฅด๊ฒŒ ๋ Œ๋”๋ง ๋˜์ง€๋งŒ ์‚ฌ์ด์ฆˆ์˜ ์ œํ•œ์ด ์žˆ์œผ๋ฏ€๋กœ ์Šค์ผ€์ผ์—… ํ•˜๋Š” ๊ฒฝ์šฐ์—” ๋ญ‰๊ฐœ์ง ํ˜„์ƒ์ด ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

  • TYPE_DISTANCE_FIELD: ์ž„ํฌํŠธํ•œ ํฐํŠธ๋ฅผ ํ”ฝ์…€ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์Šคํฌ๋ฆฐ ํ”ฝ์…€(screen pixel)์ด ์•„๋‹ˆ๋ผ ํฐํŠธ ๊ฐ€์žฅ์ž๋ฆฌ์˜ ๊ฑฐ๋ฆฌ(distances to the font edge)๋กœ์„œ ๋‚˜ํƒ€๋‚ด๋Š” ํฐํŠธ ์‹œํŠธ ํ…์Šค์ณ(font sheet texture)๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

all_chars

์ด ์†์„ฑ์„ true๋กœ ์„ค์ •ํ•˜๋ฉด ์›๋ณธ ํฐํŠธ ํŒŒ์ผ์˜ ๋ชจ๋“  ๋ฌธ์ž๊ฐ€ ์ถœ๋ ฅ์— ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

cache_width

๋ฌธ์ž ์บ์‰ฌ ๋น„ํŠธ๋งต(glyph cache bitmap)์˜ ๋„“์ด๋ฅผ ์ œํ•œํ•˜๋ ค๋ฉด ์ด ๊ฐ’์„ ์„ค์ •ํ•˜์‹ญ์‹œ์˜ค. ์—”์ง„์ด ํ…์ŠคํŠธ๋ฅผ ๋ Œ๋”๋งํ•  ๋•Œ, ๋จผ์ € ์บ์‰ฌ ๋น„ํŠธ๋งต์—์„œ ๋ฌธ์ž(glyph)๋ฅผ ์ฐพ๊ฒŒ ๋˜๋Š”๋ฐ, ์บ์‰ฌ์— ํ•ด๋‹น ๋ฌธ์ž๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ๋ Œ๋”๋งํ•˜๊ธฐ ์ „์— ์บ์‰ฌ์— ๋ฌธ์ž๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์บ์‰ฌ ๋น„ํŠธ๋งต์ด ๋„ˆ๋ฌด ์ž‘์•„์„œ ์—”์ง„์ด ๋ Œ๋”๋ง ํ•  ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ ์—๋Ÿฌ(ERROR: RENDER: Out of available cache cells! Consider increasing cache_width or cache_height for the font.)๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฐ’์„ 0์œผ๋กœ ์„ค์ •ํ•˜๋ฉด ์บ์‰ฌ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ž๋™์ ์œผ๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.

cache_height

๋ฌธ์ž ์บ์‰ฌ ๋น„ํŠธ๋งต(glyph cache bitmap)์˜ ๋†’์ด๋ฅผ ์ œํ•œํ•˜๋ ค๋ฉด ์ด ๊ฐ’์„ ์„ค์ •ํ•˜์‹ญ์‹œ์˜ค. ์ด ๊ฐ’์„ 0์œผ๋กœ ์„ค์ •ํ•˜๋ฉด ์บ์‰ฌ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ž๋™์ ์œผ๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.

ASCII์˜ ์ถœ๋ ฅ ๊ฐ€๋Šฅํ•œ ๋ฌธ์ž๋“ค: space ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~

Bitmap BMFonts

์ƒ์„ฑ๋œ ๋น„ํŠธ๋งต ์ด์™ธ์—๋„ Defold๋Š” ๋ฏธ๋ฆฌ ๊ตฌ์›Œ์ง„(prebaked) ๋น„ํŠธ๋งต์ธ "BMFont" ํฌ๋ฉง์˜ ํฐํŠธ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์ด ํฐํŠธ๋Š” ๋ชจ๋“  ๋ฌธ์ž ๋ชจ์–‘์ด ์žˆ๋Š” PNG ํฐํŠธ ์‹œํŠธ(PNG font sheet)๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ .fnt ํŒŒ์ผ์—๋Š” ์‚ฌ์ด์ฆˆ์™€ ์ปค๋‹(kerning) ์ •๋ณด ๋ฟ๋งŒ์•„๋‹ˆ๋ผ ๊ฐ ๋ฌธ์ž ๋ชจ์–‘์„ ์‹œํŠธ์—์„œ ์ฐพ๊ธฐ ์œ„ํ•œ ์ •๋ณด๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํฐํŠธ ํƒ€์ž…์€ TrueType ์ด๋‚˜ OpenType ํฐํŠธ ํŒŒ์ผ์—์„œ ์ƒ์„ฑ๋œ ๋น„ํŠธ๋งต ํฐํŠธ์— ๋น„ํ•ด ์„ฑ๋Šฅ์ด ์ข‹์ง€๋Š” ์•Š์ง€๋งŒ, ์ž„์˜์˜ ๊ทธ๋ž˜ํ”ฝ์ด๋‚˜ ์ปฌ๋Ÿฌ ํšจ๊ณผ, ๊ทธ๋ฆผ์ž๋ฅผ ๋„ฃ์–ด ์›ํ•˜๋Š” ๋Œ€๋กœ ๊พธ๋ฐ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Defold ํ”„๋กœ์ ํŠธ์— .fnt์™€ .png ํŒŒ์ผ์„ ์ถ”๊ฐ€ํ•ด ๋ณด์„ธ์š”. ์ด ๋‘ ํŒŒ์ผ์€ ๊ฐ™์€ ํด๋”์— ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ƒˆ ํฐํŠธ ํŒŒ์ผ์„ ๋งŒ๋“ค๊ณ  font ์†์„ฑ๊ฐ’์œผ๋กœ .fnt ํŒŒ์ผ์„ ์ง€์ •ํ•˜๊ณ  output_format ์†์„ฑ์„ "TYPE_BITMAP"์œผ๋กœ ์„ค์ •ํ•˜์„ธ์š”. Defold๋Š” ๋น„ํŠธ๋งต์„ ์ƒ์„ฑํ•˜์ง€ ์•Š๋Š” ๋Œ€์‹  ๋‹น์‹ ์ด ์ถ”๊ฐ€ํ•œ PNG ํŒŒ์ผ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

BMFont ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ „์šฉ ํˆด์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ ์—ฌ๋Ÿฌ ์˜ต์…˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  • Bitmap Font Generator, AngelCode์— ์˜ํ•ด ์ œ๊ณต๋˜๋Š” Windows ์ „์šฉ ํˆด
  • Shoebox, Windows์™€ MacOS๋ฅผ ์œ„ํ•œ ๋ฌด๋ฃŒ Adobe Air ๊ธฐ๋ฐ˜์˜ ์•ฑ
  • Hiero, Java ๊ธฐ๋ฐ˜์˜ ์˜คํ”ˆ์†Œ์Šค
  • Glyph Designer, 71 Squared์˜ ์œ ๋ฃŒ MacOS ํˆด
  • bmGlyph, Sovapps์˜ ์œ ๋ฃŒ MacOS ํˆด

BMFont

Distance field fonts

๋””์Šคํ„ด์Šค ํ•„๋“œ(distance field) ํฐํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ๋Š”, output_format ์†์„ฑ์— "TYPE_DISTANCE_FIELD"๋ฅผ ์„ ํƒํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ํฐํŠธ๋กœ๋ถ€ํ„ฐ ๋””์Šคํ„ด์Šค ํ•„๋“œ ๋งต(distance field map)์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ์—”์ง„์ด ํฐํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜๊ฒŒ๋˜๋ฉด, ์ด ๋””์Šคํ„ด์Šค ๋ฐ์ดํ„ฐ๋ฅผ ํ•ด์„ํ•˜์—ฌ ๋‚ ์นด๋กœ์šด ํฐํŠธ์˜ ๊ฐ€์žฅ์ž๋ฆฌ(sharp font edge)๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํŠน์ˆ˜ํ•œ ์‰์ด๋”๋ฅผ ํ•„์š”๋กœ ํ•ฉ๋‹ˆ๋‹ค. ๋””์Šคํ„ด์Šค ํ•„๋“œ ํฐํŠธ๋Š” ๋น„ํŠธ๋งต ํฐํŠธ์— ๋น„ํ•ด ๋งŽ์€ ์„ฑ๋Šฅ์„ ์†Œ๋ชจํ•˜์ง€๋งŒ ๊ธ€์ž์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์กฐ์ ˆํ•˜๋Š”๋ฐ ๋งค์šฐ ์œ ์—ฐํ•ฉ๋‹ˆ๋‹ค.

Distance field font

์ด ํฐํŠธ๋ฅผ ๋งŒ๋“ค ๊ฒฝ์šฐ(ํ˜น์€ ํ™”๋ฉด์— ๋ Œ๋”๋ง ๋  ๋•Œ ํฐํŠธ๊ฐ€ ์•Œ๋งž์€ ์‰์ด๋”๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ)์—๋Š” material ์†์„ฑ๊ฐ’์„ "builtins/fonts/font-df.material"(ํ˜น์€ ๋””์Šคํ„ด์Šค ํ•„๋“œ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋Š” ๋‹ค๋ฅธ ๋ฉ”ํ„ฐ๋ฆฌ์–ผ)๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Distance field font material

Artifacts and best practices

์ผ๋ฐ˜์ ์œผ๋กœ, ๋น„ํŠธ๋งต ํฐํŠธ๋Š” ์Šค์ผ€์ผ๋ง ์—†์ด ๋ Œ๋”๋ง ๋  ๊ฒฝ์šฐ์—” ์ตœ์„ ์˜ ์„ ํƒ์ž…๋‹ˆ๋‹ค. ๋น„ํŠธ๋งต ํฐํŠธ๋Š” ๋””์Šคํ„ด์Šค ํ•„๋“œ ํฐํŠธ๋ณด๋‹ค ํ™”๋ฉด์— ๋น ๋ฅด๊ฒŒ ๋ Œ๋”๋ง ๋ฉ๋‹ˆ๋‹ค.

๋””์Šคํ„ด์Šค ํ•„๋“œ ํฐํŠธ(Distance field font)๋Š” ํฐํŠธ์‚ฌ์ด์ฆˆ๋ฅผ ํ‚ค์šธ(upscaling) ๊ฒฝ์šฐ์— ์•„์ฃผ ์ข‹์Šต๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด ๋น„ํŠธ๋งต ํฐํŠธ๋Š” ๋‹จ์ง€ ํ”ฝ์…€๋กœ ๋œ ์ด๋ฏธ์ง€ ์ด๊ธฐ ๋•Œ๋ฌธ์— ํฐํŠธ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ฆ๊ฐ€ํ•  ๊ฒฝ์šฐ ํ”ฝ์…€์˜ ํฌ๊ธฐ๋„ ์ปค์ง€๊ฒŒ ๋˜์–ด ๊ฒฐ๊ณผ์ ์œผ๋กœ ์šธํ‰๋ถˆํ‰ํ•œ ๋ชจ์–‘(blocky artifacts)์ด ๋ฉ๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” 48ํ”ฝ์…€ ํฌ๊ธฐ์˜ ํฐํŠธ๋ฅผ ์•ฝ 8๋ฐฐ ์ •๋„ ์Šค์ผ€์ผ-์—… ํ•œ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค.

Font type comparison

์Šค์ผ€์ผ-๋‹ค์šดํ•˜๋ฉด, ์ƒํ™ฉ์€ ๋ฐ˜๋Œ€๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ํ”ฝ์…€ ํ…์Šค์ณ๋Š” ์ž‘์•„์ง€๋ฉด ๋ Œ๋”๋ง ํ•˜๋“œ์›จ์–ด์— ์˜ํ•ด์„œ ์•ˆํ‹ฐ์•Œ๋ฆฌ์•„์‹ฑ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ์œ„์™€ ๊ฐ™์€ 48ํ”ฝ์…€ ํฌ๊ธฐ์˜ ํฐํŠธ๋ฅผ ์ ˆ๋ฐ˜ ํฌ๊ธฐ๋กœ ์ค„์ธ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค.

Font type comparison, scale down

๋””์Šคํ„ด์Šค ํ•„๋“œ ํฐํŠธ๋Š” ํŠน์ • ์ƒํ™ฉ์—์„œ ๋˜ ๋‹ค๋ฅธ ์œ ํ˜•์˜ ์ด์ƒํ˜„์ƒ(artifacts)์„ ๋งŒ๋“ค์–ด ๋ƒ…๋‹ˆ๋‹ค. ๋งŒ์•ฝ ํฐํŠธ ๋ชจ์–‘์— ์•„์ฃผ ์–‡์€ ์„ ์ด ์žˆ์„ ๊ฒฝ์šฐ ์ด ํฐํŠธ๋ฅผ ์ž‘์€ ์‚ฌ์ด์ฆˆ(size ์†์„ฑ)๋กœ ๋ Œ๋”๋ง ํ•˜๋ฉด, ๋””์Šคํ„ด์Šค ํ•„๋“œ ํ…์Šค์ณ๊ฐ€ ๋ฌธ์ž ๋ชจ์–‘์— ์ค‘์š”ํ•œ ์ ์„ ํ‘œํ˜„ํ•˜๋Š”๋ฐ ๋ฐ์ดํ„ฐ๊ฐ€ ์ถฉ๋ถ„ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์•„๋งˆ ์•„๋ž˜์™€ ๊ฐ™์ด ๋ Œ๋”๋ง ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Thin line artifacts

์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด, ๋” ํฐ ์‚ฌ์ด์ฆˆ๋กœ ํฐํŠธ๋ฅผ ๋งŒ๋“œ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

โš ๏ธ **GitHub.com Fallback** โš ๏ธ