>웹 프론트엔드 >CSS 튜토리얼 >@font-face 규칙을 사용하여 CSS에서 글꼴을 올바르게 가져오는 방법은 무엇입니까?

@font-face 규칙을 사용하여 CSS에서 글꼴을 올바르게 가져오는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-11-03 10:55:03226검색

How to Properly Import Fonts in CSS using the @font-face Rule?

CSS에서 글꼴 가져오기: 종합 솔루션

웹 개발 시 클라이언트 컴퓨터에 설치되지 않은 글꼴을 사용해야 하는 경우가 종종 있습니다. 컴퓨터. 이를 달성하기 위해 CSS는 @font-face 규칙을 제공합니다. 그러나 일부 사용자는 제공된 코드 조각에 문제가 발생할 수 있습니다.

<code class="css">@font-face {
    font-family: EntezareZohoor2;
    src: url(Entezar2.ttf) format("truetype");
}

.EntezarFont {
    font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}</code>

이 문제를 해결하기 위해 CSS를 사용하여 글꼴을 올바르게 정의하는 수정된 코드 조각은 다음과 같습니다.

<code class="css">@font-face {
    font-family: 'EntezareZohoor2';
    src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

#newfont {
    font-family: 'EntezareZohoor2';
}</code>

In 이 스니펫에서 @font-face 규칙은 다음 사양으로 올바르게 정의됩니다.

  • font-family: CSS에서 사용할 글꼴 이름, 이 경우 'EntezareZohoor2'.
  • src: 다양한 브라우저에 대한 다양한 형식을 포함하는 글꼴 파일의 소스.
  • font-weight 및 글꼴 스타일: 글꼴의 두께와 스타일을 정의하는 선택적 속성

또한 newfont 요소는 글꼴 패밀리 속성을 설정하여 'EntezareZohoor2' 글꼴을 사용하도록 정의됩니다. 이러한 지침을 따르면 사용자는 CSS에서 글꼴을 효과적으로 가져오고 클라이언트 컴퓨터에 올바르게 표시되도록 할 수 있습니다.

위 내용은 @font-face 규칙을 사용하여 CSS에서 글꼴을 올바르게 가져오는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.