CSS의 @font-face를 사용하여 여러 글꼴 변형(굵게, 기울임꼴)을 어떻게 포함할 수 있습니까?

CSS @font-face에 여러 글꼴 변형 포함

@font-face CSS 규칙을 사용하면 웹 개발자가 사용자 정의 글꼴을 글꼴에 포함할 수 있습니다. 디자인. 그러나 굵은 이탤릭체, 굵은 이탤릭체 등 동일한 글꼴의 여러 변형을 처리하는 경우 어려울 수 있습니다. 이 문서에서는 @font-face 규칙을 사용하여 이러한 변형을 통합하는 방법을 설명합니다.

@font-face 규칙에서 src 속성은 일반적으로 단일 글꼴 파일을 참조합니다. 그러나 여러 개의 @font-face 규칙을 생성하여 개발자는 각각의 파일 이름으로 동일한 글꼴의 변형을 정의할 수 있습니다.

예를 들어 볼드체, 이탤릭체 및 볼드체에 대한 별도의 파일이 있는 DejaVu Sans 글꼴 제품군을 생각해 보세요. 이탤릭체. 다음 CSS 코드는 여러 @font-face 규칙을 사용하여 이러한 변형을 삽입하는 방법을 보여줍니다.

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}

각 변형에 대해 별도의 @font-face 규칙을 생성하면 브라우저에 다양한 글꼴 스타일의 가용성에 대한 정보가 제공됩니다. 동일한 글꼴 모음 내에서. 그런 다음 CSS 선언에 지정된 글꼴 가중치 및 글꼴 스타일 값을 기반으로 적절한 글꼴 파일을 로드할 수 있습니다.

일부 브라우저에서는 형식("ttf") 인수를 인식하지 못할 수 있다는 점에 유의할 가치가 있습니다. src 속성. 호환성 문제가 있는 경우 이 매개변수를 생략하는 것이 좋습니다.

위 내용은 CSS의 @font-face를 사용하여 여러 글꼴 변형(굵게, 기울임꼴)을 어떻게 포함할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!