> 웹 프론트엔드 > CSS 튜토리얼 > 단일 @font-face 쿼리에서 여러 글꼴 가중치를 정의할 수 있나요?

단일 @font-face 쿼리에서 여러 글꼴 가중치를 정의할 수 있나요?

Susan Sarandon
풀어 주다: 2024-11-24 05:06:14
원래의
621명이 탐색했습니다.

Can You Define Multiple Font Weights in a Single @font-face Query?

단일 @font-face 쿼리로 여러 글꼴 두께를 정의할 수 있나요?

Klavika 글꼴은 다양한 두께와 모양으로 제공됩니다. 가중치를 지정하는 단일 @font-face 쿼리를 사용하여 이러한 항목을 CSS로 가져올 수 있습니까?

해결책:

@font-face의 다양한 기능을 소개합니다. 다양한 스타일과 두께를 단일 글꼴 모음 이름과 연결할 수 있습니다.

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");  /* Normal weight, normal style */
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype"); /* Normal weight, italic style */
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");  /* Bold weight, normal style */
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype"); /* Bold weight, italic style */
}
로그인 후 복사

이제 글꼴 무게:bold 또는를 지정할 수 있습니다. 다양한 요소에 대한 글꼴 스타일:기울임꼴:

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

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}
로그인 후 복사

이 기능에 대한 자세한 내용은 공식 문서를 참조하세요.

예:

[펜 예시](https://codepen.io/anon/pen/EjxVqv)

위 내용은 단일 @font-face 쿼리에서 여러 글꼴 가중치를 정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿