이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS로 사용자 환경설정에 맞게 서체 조정

사용자의 화면에 맞춰 글꼴을 조정하는 방법 콘텐츠를 읽는 데 가장 편안함을 느낄 수 있습니다.

Adam Argyle

사용자를 디자인 프로세스로 유도하는 것은 사용자에게 흥미진진한 시간이었습니다. 도움을 주었습니다. 사용자가 실험 환경을 시작하고 원활하게 시작할 수 있습니다. 선호하는 디자인이 디자인 결과에 다채롭게 통합되었습니다.

이 블로그 게시물에서는 가변 글꼴이 포함된 CSS 미디어 쿼리를 사용하여 한층 더 업그레이드되었습니다. 글꼴 학년과 두께를 맞춤설정할 수 있습니다. font-variation-settings를 사용하여 다양한 환경설정에 따른 미세 조정 허용 컨텍스트(예: 어두운 모드 또는 고대비 선호) 또한 사용자 환경에 맞게 가변 글꼴을 조정할 수 있습니다.

어두운 모드에서는 그라데이션이 약간 떨어집니다.
고대비를 사용하면 글꼴이 더 굵게 표시됩니다.
대비가 낮으면 글꼴이 더 얇아집니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph>

https://codepen.io/argyleink/pen/mdQrqvj

CSS와 가변 글꼴의 각 부분을 이 의미 있는 순간입니다.

설정

CSS 및 글꼴 버전 설정 값에 초점을 맞추면서도 작업을 미리 보는 데 사용할 수 있는 마크업은 다음과 같습니다.

<h1>Variable font weight based on contrast preference</h1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
  itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
  labore aliquid ex, dicta corporis.
</p>

CSS를 추가하지 않아도 글꼴 크기는 사용자 환경설정에 맞게 자동으로 조정됩니다. 다음은 font-size를 픽셀 단위로 설정하면 rem에서 글꼴 크기를 설정해야 하는 이유와 사용자 환경설정을 스쿼시합니다.

마지막으로, 다음과 같이 CSS를 사용하여 데모를 중앙에 배치하고 지원합니다.

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }

  h1 {
    text-wrap: balance;
  }
}

가
어두운 테마와 밝은 테마 모두로 표시된 데모의 스크린샷 미리보기입니다.

이 데모 설정을 통해 이 깔끔한 서체 UX를 테스트하고 구현할 수 있습니다. 기능을 사용할 수 있습니다.

Roboto Flex 변수 글꼴 로드

적응형 전략은 맞춤설정, 특히 GRAD 및 wght가 필요합니다. 타겟 적응형 사용자 색상 구성 및 대비에 관한 환경설정입니다. 두 가지 모두 사용자가 원하는 기본 설정에 맞게 축을 조정합니다.

CSS의 @font-face API를 사용하여 가변 글꼴을 로드합니다.

@font-face {
  font-family: "Roboto Flex";
  src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}

그런 다음 일부 콘텐츠에 글꼴을 적용합니다. 다음 CSS는 이 광고 단위를 전체:

@layer demo.support {
  body {
    font-family: Roboto Flex;
  }
}

가
Roboto Flex에서 두 글꼴의 글꼴로 표시된 지금까지의 데모 스크린샷
어두운 테마와 밝은 테마를
선택할 수 있습니다

성공을 위한 CSS 맞춤 속성 및 미디어 쿼리

글꼴이 로드되면 사용자 환경설정을 쿼리하고 변수를 조정할 수 있습니다. 글꼴 설정을 조정할 수 있습니다.

환경설정이 없을 때의 설정 (기본값)

다음 초기 스타일이 기본 스타일이 되거나 사용자의 스타일을 설정할 수 있습니다.

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }
}

고대비일 때의 설정

시스템의 고대비를 선호한다고 밝힌 사용자 --base-weight 값을 400에서 700로 늘립니다.

@layer demo {
  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }
}

이제 읽는 동안 대비가 더욱 강화되었습니다.

저대비를 선호하는 경우의 설정

시스템의 저대비를 선호한다고 밝힌 사용자 --base-weight 값을 400에서 200로 줄입니다.

@layer demo {
  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }
}

이제 읽는 동안 대비가 덜 생깁니다.

어두운 모드일 때의 설정

@layer demo {
  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

어두운 곳에서 빛을 보았을 때 빛이 들어갈 때와 어두울 때가 어떻게 다를까 고려되어야 합니다.

이제 한곳에서 모두 확인 가능

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }

  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }

  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }

  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

또는 재미를 위해 CSS 중첩으로 모두 만들 수 있습니다.

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;

    @media (prefers-contrast: more)     { --base-weight: 700 }
    @media (prefers-contrast: less)     { --base-weight: 200 }
    @media (prefers-color-scheme: dark) { --base-grade: -25 }
  }
}

그 결과 사용자의 글꼴에 맞게 글꼴을 조정하여 선호합니다. 전체 소스 코드는 아래의 Codepen에서 제공됩니다.