로컬에 설치된 글꼴에 대해 @font-face를 사용하여 불필요한 글꼴 다운로드를 방지하려면 어떻게 해야 합니까?

@font-face src: local - 설치된 글꼴에 대한 불필요한 글꼴 다운로드 방지

@font-face를 사용하면 다음에서 사용자 정의 글꼴을 정의할 수 있습니다. 당신의 CSS. 그러나 사용자가 이미 로컬에 글꼴을 설치한 경우 불필요한 글꼴 다운로드가 발생할 수 있습니다. 이는 특히 @font-face 선언의 각 인스턴스에 대해 글꼴을 다운로드하는 브라우저의 경우 성능 문제가 될 수 있습니다.

이 문제를 완화하려면 @font-face 규칙에 "local" 키워드를 사용할 수 있습니다. 로컬 글꼴을 다운로드하기 전에 브라우저에 확인하도록 지시합니다. 다음 코드 조각은 "local" 키워드를 사용하는 방법을 보여줍니다.

<code class="css">@font-face {
  font-family: 'DejaVu Serif';
  src: local('DejaVu Serif'),
       url('DejaVuSerif-webfont.woff') format('woff'),
       url('DejaVuSerif-webfont.ttf') format('truetype'),
       url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
  font-weight: normal;
  font-style: normal;
}</code>

URL 기반 소스 앞에 "local" 키워드를 배치하면 브라우저는 먼저 로컬에 설치된 DejaVu Serif 글꼴을 사용하려고 시도합니다. . 로컬 글꼴을 사용할 수 없는 경우 브라우저는 제공된 URL 소스에서 글꼴을 다운로드합니다.

이 접근 방식을 사용하면 브라우저는 필요할 때만 글꼴을 다운로드할 수 있으므로 다음을 수행하는 사용자를 위해 웹사이트의 전반적인 성능이 향상됩니다. 이미 글꼴이 설치되어 있습니다.

위 내용은 로컬에 설치된 글꼴에 대해 @font-face를 사용하여 불필요한 글꼴 다운로드를 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!