폰트 otf ttf eot woff λ³€ν™˜ 방법

λ‹€μš΄λ‘œλ“œ 받은 OTF 폰트 νŒŒμΌμ„ TTF, EOT λ“±μœΌλ‘œ λ³€ν™˜ν•˜κ³  싢을 λ•Œκ°€ μžˆμŠ΅λ‹ˆλ‹€. 폰트 νŒŒμΌμ„ λ³€ν™˜ν•˜λŠ” λ°©λ²•μ—λŠ” μ—¬λŸ¬κ°€μ§€κ°€ μžˆμ§€λ§Œ, 이번 μ‹œκ°„μ—λŠ” 무료 μ‚¬μ΄νŠΈλ₯Ό μ΄μš©ν•΄ λ³€ν™˜ν•΄λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

 

 


    폰트 λ³€ν™˜ 방법

    폰트 λ³€ν™˜μ„ μœ„ν•΄ AnyconvλΌλŠ” μ‚¬μ΄νŠΈλ₯Ό μ΄μš©ν•©λ‹ˆλ‹€. 무료둜 μ΄μš©ν•  수 μžˆκΈ°λ„ ν•˜κ³  μ‚¬μš© 방법도 ꡉμž₯히 κ°„λ‹¨ν•©λ‹ˆλ‹€.

     

    1. λ³€ν™˜ ν•  폰트 νŒŒμΌμ„ μ„ νƒν•˜κ±°λ‚˜ μ—…λ‘œλ“œ μ˜μ–΅μœΌλ‘œ λ“œλž˜κ·Έν•΄μ„œ λŒμ–΄λ‹€ λ†“μŠ΅λ‹ˆλ‹€.

     

    2. μ—…λ‘œλ“œ 된 폰트 νŒŒμΌμ„ WOFF, EOT, TTF λ“± μ›ν•˜λŠ” ν˜•μ‹μ„ μ„ νƒν•˜μ—¬ λ³€ν™˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    • TTF : μ• ν”Œ, λ§ˆμ΄ν¬λ‘œμ†Œν”„νŠΈκ°€ κ°œλ°œν•œ λ°±ν„° κΈ€κΌ΄ ν‘œμ€€
    • OTF : 어도비, λ§ˆμ΄ν¬λ‘œμ†Œν”„νŠΈκ°€ ν˜‘λ ₯ν•΄μ„œ λ§Œλ“  TTF의 κ°œμ„ νŒ κΈ€κΌ΄
    • WOFF / WOFF2 : μ›ΉνŽ˜μ΄μ§€μ—μ„œ μ‚¬μš©ν•˜κΈ° μœ„ν•΄ μ—¬λŸ¬ νšŒμ‚¬λ“€μ˜ ν˜‘μ—…μœΌλ‘œ μ œμ•ˆν•œ κΈ€κΌ΄
    • EOT : λ§ˆμ΄ν¬λ‘œμ†Œν”„νŠΈκ°€ μ›Ήμ—μ„œ μ‚¬μš©ν•˜κΈ° μœ„ν•΄ μ œμ•ˆν•œ κΈ€κΌ΄ 포맷

     

    μ›Ήμ—μ„œ μ‚¬μš©ν•˜κΈ° μœ„ν•œ λŒ€ν‘œμ μΈ κΈ€κΌ΄ νŒŒμΌμ€ TTF, WOFFκ°€ λ²”μš©μ μœΌλ‘œ μžλ¦¬μž‘μ•˜μŠ΅λ‹ˆλ‹€. CSS에 μ›Ή 글꼴을 κ°€μ Έμ˜¬ λ•ŒλŠ” λ‹€μŒκ³Ό 같이 μž‘μ„±ν•©λ‹ˆλ‹€.

    @font-face{
    font-family:"RIDIBatang";
    src:url(./images/RIDIBatang.eot);
    src:url(./images/RIDIBatang.woff);
    src:url('./images/RIDIBatang?#iefix') format('embedded-opentype'),}}

    μ˜ˆμ‹œλ‘œ 리디바탕체λ₯Ό μ‚¬μš©ν–ˆμŠ΅λ‹ˆλ‹€. eot, woff κΈ€κΌ΄ νŒŒμΌμ„ μ—…λ‘œλ“œ ν•œ μƒνƒœλ‘œ μœ„ μ½”λ“œλ₯Ό CSS에 λ„£κ³  body에 RIDIBatang을 μ μš©ν•˜λ©΄ 리디바탕체λ₯Ό μ›Ή κΈ€κΌ΄λ‘œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

     

    μ§€κΈˆκΉŒμ§€ 폰트 otf, ttf, eot, woff λ³€ν™˜ 방법에 λŒ€ν•΄μ„œ μ•Œμ•„λ΄€μŠ΅λ‹ˆλ‹€.

    λ°˜μ‘ν˜•