HTML/CSS_Font?!

jjyu_myΒ·2024λ…„ 2μ›” 14일
κ°œλ°œκ³΅λΆ€κΈ°μˆ λΈ”λ‘œκ·Έ

HTML & CSS

λͺ©λ‘ 보기
11/19
post-thumbnail

πŸ“Œ font λ₯Ό preload ν•˜λŠ” 방법

μ›Ή 폰트λ₯Ό preloadν•˜λŠ” 것은 νŽ˜μ΄μ§€μ˜ μ„±λŠ₯을 ν–₯μƒμ‹œν‚€κ³  ν°νŠΈκ°€ 더 λΉ λ₯΄κ²Œ λ‘œλ“œλ˜λ„λ‘ ν•˜λŠ” 데 도움이 λœλ‹€ 

<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>μ›Ή 폰트 Preload 예제</title>
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" as="style">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap">
</head>
<body>
  <p style="font-family: 'Noto Sans KR', sans-serif;">이 λ¬Έμž₯은 Noto Sans KR μ›Ή 폰트둜 μŠ€νƒ€μΌλ§λ©λ‹ˆλ‹€.</p>
</body>
</html>

μ½”λ“œμ—μ„œ link μš”μ†Œμ˜ rel 속성에 preload 값을 μ£Όκ³ , as 속성을 "style"둜 μ„€μ •ν•˜μ—¬ ν•΄λ‹Ή λ¦¬μ†ŒμŠ€κ°€ μŠ€νƒ€μΌμ‹œνŠΈμž„μ„ μ•Œλ €μ€€λ‹€.
μ΄λ ‡κ²Œ ν•˜λ©΄ νŽ˜μ΄μ§€κ°€ λ‘œλ“œλ˜λŠ” λ™μ•ˆ μ›Ή ν°νŠΈκ°€ 미리 λ‘œλ“œλœλ‹€.

λ˜ν•œ, link μš”μ†Œμ— href 속성에 μ›Ή 폰트 CSS 파일의 링크λ₯Ό λ„£μ–΄μ„œ μ›Ή 폰트λ₯Ό λ‘œλ“œν•  수 μžˆλ‹€.

πŸ’‘μ›Ή 폰트λ₯Ό preloadν•˜λŠ” 것은 μ„±λŠ₯μƒμ˜ 이점을 κ°€μ Έμ˜¬ 수 μžˆμ§€λ§Œ, 폰트 파일이 크닀면 μ‚¬μš©μž κ²½ν—˜μ— 뢀정적인 영ν–₯을 쀄 수 μžˆμœΌλ―€λ‘œ μ μ ˆν•œ μ‚¬μ΄νŠΈ μ„±λŠ₯κ³Ό μ‚¬μš©μž κ²½ν—˜μ„ κ³ λ €ν•˜μ—¬ κ²°μ •ν•΄ν•œλ‹€.

πŸ“Œ 폰트λ₯Ό 둜컬 ν°νŠΈκ°€ μžˆμ„λ•Œ λ‘œλ”©ν•˜λŠ” 방법과 μ›Ήν°νŠΈλ§Œ λ‘œλ”©ν•΄μ•Ό λ˜λŠ” μƒν™©μ—μ„œ μ΅œμ ν™” 기법

1️⃣ 둜컬 ν°νŠΈκ°€ μžˆλŠ” 경우

  • 둜컬 폰트 λ¨Όμ € λ‘œλ“œν•˜κΈ°: λ¨Όμ € λ‘œμ»¬μ— μžˆλŠ” 폰트λ₯Ό λ‘œλ“œν•˜κ³ , κ·Έ λ‹€μŒμ— μ›Ή 폰트λ₯Ό λ‘œλ“œν•˜λ„λ‘ μˆœμ„œλ₯Ό μ‘°μ •ν•œλ‹€.
    μ΄λ ‡κ²Œ ν•˜λ©΄ λ¨Όμ € 둜컬 ν°νŠΈκ°€ μ‚¬μš©λ˜κ³ , κ·Έ 후에 μ›Ή ν°νŠΈκ°€ ν•„μš”ν•œ κ²½μš°μ—λ§Œ λ‘œλ“œλ˜μ–΄ μ„±λŠ₯을 ν–₯μƒμ‹œν‚¬ 수 μžˆλ‹€.

  • 폰트 포맷 μ΅œμ ν™”: 둜컬 폰트 νŒŒμΌμ„ μ΅œμ ν™”ν•˜μ—¬ λ‹€μ–‘ν•œ 폰트 포맷을 μ œκ³΅ν•œλ‹€.
    예λ₯Ό λ“€μ–΄, WOFF2, WOFF, TTF λ“± μ—¬λŸ¬ 포맷을 μ œκ³΅ν•˜μ—¬ λΈŒλΌμš°μ €κ°€ κ°€μž₯ μ μ ˆν•œ 포맷을 μ„ νƒν•˜λ„λ‘ ν•œλ‹€.

2️⃣ μ›Ή 폰트만 μ‚¬μš©ν•˜λŠ” 경우

  • μ›Ή 폰트 Preload: μ›Ή 폰트λ₯Ό preloadν•˜μ—¬ νŽ˜μ΄μ§€ λ‘œλ”© μ‹œκ°„μ„ μ΅œμ ν™”ν•œλ‹€.
    μ΄λ ‡κ²Œ ν•˜λ©΄ νŽ˜μ΄μ§€μ˜ λ Œλ”λ§ 속도가 ν–₯μƒλœλ‹€

  • 폰트 μ„œλΈŒμ…‹ μ‚¬μš©: ν•„μš”ν•œ 문자 μ§‘ν•©λ§Œ ν¬ν•¨λœ 폰트 μ„œλΈŒμ…‹μ„ μ‚¬μš©ν•˜μ—¬ λ‹€μš΄λ‘œλ“œν•  폰트 파일의 크기λ₯Ό 쀄인닀.
    μ΄λ ‡κ²Œ ν•˜λ©΄ ν•„μš”ν•œ 문자만 λ‹€μš΄λ‘œλ“œλ˜μ–΄ λ‘œλ”© μ‹œκ°„μ΄ λ‹¨μΆ•λœλ‹€.

  • Fallback 폰트 μ„€μ •: μ›Ή 폰트 λ‘œλ”©μ΄ μ§€μ—°λ˜λŠ” 경우λ₯Ό λŒ€λΉ„ν•˜μ—¬ Fallback 폰트λ₯Ό μ„€μ •ν•œλ‹€.
    μ΄λ ‡κ²Œ ν•˜λ©΄ μ›Ή 폰트 λ‘œλ”©μ΄ μ™„λ£Œλ  λ•ŒκΉŒμ§€ Fallback ν°νŠΈκ°€ 보여 μ‚¬μš©μž κ²½ν—˜μ„ ν–₯μƒμ‹œν‚¨λ‹€.

πŸ’‘ν°νŠΈμ˜ λ‘œλ”© 방식을 μ΅œμ ν™”ν•˜λŠ” 것은 μ‚¬μš©μž κ²½ν—˜κ³Ό μ„±λŠ₯에 μ€‘μš”ν•œ 영ν–₯을 λ―ΈμΉœλ‹€.
κ·Έλ ‡κ²Œλ•Œλ¬Έμ— 각 상황에 맞게 μ μ ˆν•œ μ΅œμ ν™” 기법을 μ„ νƒν•˜μ—¬ μ‚¬μš©ν•˜λŠ” 것이 μ€‘μš”ν•˜λ‹€.

profile
이전 포슀트

html & css _ μš”μ†Œμ˜ 배치

λ‹€μŒ 포슀트

animation μ΅œμ ν™” & λ°˜μ‘ν˜• μ›Ή λ””μžμΈ μ΅œμ ν™”

0개의 λŒ“κΈ€