요약하자면

몇몇 권장사항은 한글 폰트에서는 사실상 불가능한 부분이라 가능한 부분들을 적용하면 된다.

#font
#172

가변 글꼴은 진보된 OpenType 사양입니다. CSS를 사용할때 가짜 굵기 또는 기울임꼴과 같은 브라우저 왜곡 에 대해 걱정하지 않고 단일 글꼴 파일에 포함된 모든 스타일에 액세스할 수 있습니다.

이전에는 여러 스타일을 사용한다는 것은 모든 너비, 두께 또는 기울임꼴에 대해 하나씩 여러 파일을 로드하는 것을 의미했습니다. 이로 인해 디자인 표현력(사용된 글꼴 수)과 웹사이트 성능(다운로드할 데이터의 양) 사이에 긴장감이 생겼습니다. 가변 글꼴을 사용하면 전체 방정식이 변경됩니다.

Footnotes

  1. 다크모드에서 weight가 시각적으로 차이가 날수 있기때문에 그럴경우 변수로 분리해서 대응하는 방법 ↩

#fontcodepen.io
#173
async function loader() {
  const family = 'Material Symbols Outlined'
  const source =
    'url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v75/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)'
  const fontFace = new FontFace(family, source)

  await fontFace.load()
}

CSS Font Loading API 는 비교적 새로운 웹 플랫폼 추가 기능입니다. API가 도입되기 전에 웹 개발자는 일반적으로 CSS에 의존하여 웹 글꼴을 로드해야 했으며 이로 인해 로드와 성능 문제가 발생할 수 있었습니다. 개발자는 로드 방법을 더 잘 제어할 수 있을 뿐만 아니라 오류를 처리하고 웹 사이트에서 사용되는 시기와 방법을 제어할 수 있습니다. 전반적으로 CSS Font Loading API는 웹 개발자에게 글꼴이 정확하고 효율적으로 로드 되도록 하는 강력한 도구를 제공하는 동시에 글꼴 로드 및 사용에 대한 더 많은 제어 기능을 제공합니다.

#font
#243