단일 @font-face 쿼리로 여러 글꼴 두께를 가져올 수 있나요?-CSS 튜토리얼-php.cn

단일 @font-face 쿼리로 여러 글꼴 두께를 가져올 수 있나요?

Patricia Arquette

풀어 주다： 2024-11-17 15:36:01

원래의

228명이 탐색했습니다.

Can You Import Multiple Font Weights with a Single @font-face Query?

단일 @font-face 쿼리로 여러 글꼴 가중치 가져오기

CSS에서 @font-face 규칙은 사용자 정의 글꼴을 웹페이지로 가져오는 데 사용됩니다. 그러나 가중치가 여러 개인 글꼴을 가져오려면 여러 쿼리가 필요할 수 있습니다. 이 기사에서는 단일 쿼리로 여러 글꼴 두께를 가져올 수 있는 가능성을 살펴봅니다.

문제

8가지 모양과 크기로 제공되는 Klavika 글꼴을 고려해 보세요.

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

로그인 후 복사

목표는 단일 @font-face 쿼리를 사용하여 이러한 글꼴을 CSS로 가져와 쿼리 자체의 가중치를 정의하는 것입니다.

해결책

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

로그인 후 복사

이를 달성하려면 특별한 맛 @font-face를 사용할 수 있습니다.

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

로그인 후 복사

이 접근 방식은 동일한 글꼴 모음 이름을 사용하여 다양한 스타일과 두께를 다양한 글꼴과 연결합니다.

사용법

이제, 글꼴 모음을 지정하거나 기존 설정을 재정의하지 않고도 모든 요소에 대해 글꼴 두께 또는 글꼴 스타일을 지정할 수 있습니다.

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

로그인 후 복사