์ด๋ฒ ํฌ์คํ ์์๋ CSS๋ฅผ ์ด์ฉํด์ ํฐํธ๋ฅผ ์ค์ ํ๋ ๋ฐฉ๋ฒ์ ๋ํด์ ์์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
-
font-family ๋ ํฐํธ๋ฅผ ๋ณ๊ฒฝํ๋ ์์ฑ์ ๋๋ค. ( ๋์์ฒด, ๊ตด๋ฆผ์ฒด ๋ญ ์ด๋ฐ๊ฒ๋ค ์์ฃ ? )
-
font-style ๋ ํฐํธ๋ฅผ ์ฒด๋ฅผ ๋ณ๊ฒฝํ๋ ์์ฑ์ ๋๋ค. ( italic, oblique )
-
font-variant ๋ ๋์๋ฌธ์๋ฅผ ์ค์ ํ๋ ์์ฑ์ ๋๋ค.
-
font-weight ๋ ํฐํธ์ ๊ตต๊ธฐ๋ฅผ ์ค์ ํ๋ ์์ฑ์ ๋๋ค. ( bold, light )
-
font-size ๋ ํฐํธ ์ฌ์ด์ฆ๋ฅผ ์ค์ ํ๋ ์์ฑ์ ๋๋ค.
-
font ๋ ํฐํธ๊ด๋ จ ๋ชจ๋ ์์ฑ์ ํ๋ฒ์ ์ค์ ํ ์ ์๋ ํ๋ฐฉ ์์ฑ์ ๋๋ค.
ํฐํธ ํจ๋ฐ๋ฆฌ ์ค์ ํ๊ธฐ
์ค์ ๊ฐ๋ฅํ ๊ฐ์ ๋ชจ๋ ํฐํธ ํจ๋ฐ๋ฆฌ ๊ฐ์ ๋๋ค. ์๋ฅผ๋ค๋ฉด aria, serif์ ๊ฐ์ ํฐํธ ์์ฒด์ ๋๋ค.
|
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This text is rendered in either georgia, garamond, or the default |
ํฐํธ ์คํ์ผ ์ค์ ํ๊ธฐ
์ค์ ๊ฐ๋ฅํ ๊ฐ์ normal, italic ๊ทธ๋ฆฌ๊ณ oblique ์ ๋๋ค.
|
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This text will be rendered in italic style |
ํฐํธ ๋ณ์ข ์ค์ ํ๊ธฐ
๊ฐ๋ฅํ ๊ฐ์ normal ๊ณผ small-caps๊ฐ ์์ต๋๋ค.
|
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This text will be renedered as small caps |
ํฐํธ ๋๊ป ์ค์ ํ๊ธฐ
ํฐํธ์ ๋๊ป๋ฅผ ์ค์ ํ๋ ์์ฑ์ ๋๋ค.
๊ฐ๋ฅํ ๊ฐ์ normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 ์ด ์์ต๋๋ค.
|
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This font is bold. This font is bolder. This font is 900 weight. |
ํฐํธ ์ฌ์ด์ฆ ์ค์ ํ๊ธฐ
๊ฐ๋ฅํ ๊ฐ์ xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, ๊ทธ๋ฆฌ๊ณ ํฝ์ ๊ฐ ๋๋ ํผ์ผํธ ๊ฐ์ ๋๋ค.
|
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This font size is 20 pixels This font size is small This font size is large |
ํฐํธ ์ฌ์ด์ฆ adjust ์ค์ ํ๊ธฐ
์ด๋ฒ์๋ ํฐํธ์ ์ฌ์ด์ฆ adjust ์ค์ ์ ํ๋ ๊ฒ์ด๋ค์. ๊ฐ๋ฅํ ๊ฐ์ ๋ชจ๋ ์ซ์๊ฐ์ ๋๋ค.
|
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
This text is using a font-size-adjust value. |
ํฐํธ ์คํธ๋ ์น ์ค์
๊ฐ๋ฅํ ๊ฐ์ normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded ๊ฐ ์์ต๋๋ค. ์ด ์์ฑ์ ์ฌ๋ฌ๋ถ ์ปดํจํฐ์ ์๋ ํฐํธ๊ฐ
|
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.
If this doesn't appear to work, it is likely that your computer doesn't have a condensed or expanded version of the font being used. |
ํฐํธ ์์ฑ ํ๋ฒ์ ์ค์ ํ๊ธฐ
|
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค
Applying all the properties on the text at once. |
์ด์์ผ๋ก ํฐํธ ๊ด๋ จ ์์ฑ๋ค์ ๋ํด์ ์์๋ณด์์ต๋๋ค.
ํด์ฐ~~~ ์ฌ์ฌ CSS๊ฐ ์ฌ๋ฏธ์์ด ์ง์๋์? ์ง๊ฒจ์์ง์๋์?
์ด์ ์์์ธ๋ฐ ๋ง์ด์ฃ ใ ใ ใ
ํ์ดํ ์ ๋๋ค~~
Reference : http://www.tutorialspoint.com/css/css_fonts.htm
'๐ป Programming > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[CSS] 9. Image ( ์ด๋ฏธ์ง ๊ด๋ จ ์ค์ ) (0) | 2016.06.12 |
---|---|
[CSS] 8. Text ( ํ ์คํธ ์ค์ ) (0) | 2016.06.12 |
[CSS] 6. Background ( ๋ฐฐ๊ฒฝ ์ค์ ) (0) | 2016.06.12 |
[CSS] 5. Colors ( ์๊น ) (0) | 2016.06.12 |
[CSS] 4. Units ( ๋จ์ ) (0) | 2016.06.12 |