불필요한 다운로드를 피하기 위해 @font-face 규칙에서 로컬 글꼴의 우선순위를 지정하는 방법은 무엇입니까?

@font-face 사용: 로컬 글꼴 우선순위

@font-face는 사용자 정의 글꼴을 웹 페이지에 통합하기 위한 강력한 도구입니다. 그러나 사용자 시스템에 이미 글꼴이 설치되어 있어도 브라우저가 글꼴을 다운로드하면 답답할 수 있습니다.

문제 이해

@font-face 규칙을 정의할 때 다음을 지정합니다. 여러 소스 파일. 브라우저는 일반적으로 이러한 파일을 모두 다운로드하고 글꼴을 설치합니다. 기본적으로 로컬에 설치된 글꼴은 고려되지 않습니다.

해결책: 로컬 파일 우선 순위 지정

불필요한 다운로드를 방지하려면 @font-face 규칙에서 로컬 파일의 우선 순위를 지정할 수 있습니다. 구문은 다음과 같습니다.

<code class="css">@font-face {
  font-family: 'MyFont';
  src:
    local('MyFont'),
    url('MyFont.ttf');
}</code>

이 예에서 브라우저는 먼저 'MyFont'라는 글꼴이 로컬에 설치되어 있는지 확인합니다. 그렇다면 로컬 버전이 사용됩니다. 그렇지 않으면 브라우저가 지정된 URL에서 글꼴을 다운로드하여 설치합니다.

고급 로컬 글꼴 감지

위에 설명된 방법은 로컬 파일의 우선 순위를 지정하는 간단한 방법입니다. 그러나 어떤 경우에는 글꼴이 설치되어 있어도 브라우저가 글꼴을 계속 다운로드할 수 있습니다. 이 문제를 해결하려면 보다 정교한 접근 방식을 사용할 수 있습니다.

<code class="css">@font-face {
  font-family: 'Green Sans Web';
  src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GreenWeb.ttf');
}</code>

이 규칙은 글꼴에 대해 'Green Web'과 'GreenWeb-Regular'라는 두 가지 로컬 이름을 정의합니다. 글꼴을 확인할 때 브라우저는 먼저 이러한 로컬 이름 중 하나를 확인합니다. 일치하는 항목이 있으면 로컬 글꼴이 사용됩니다. 그렇지 않은 경우 브라우저는 글꼴을 다운로드하게 됩니다.

이러한 기술을 따르면 @font-face 규칙에서 로컬 글꼴의 우선순위를 지정하여 불필요한 다운로드를 줄이고 사용자 경험을 향상시킬 수 있습니다.

위 내용은 불필요한 다운로드를 피하기 위해 @font-face 규칙에서 로컬 글꼴의 우선순위를 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!