Improving Font Performance with Subsetting and Local Storage

키 포인트

글꼴 서브 세트 : 웹 글꼴에서 사용하지 않은 문자를 제거하고 파일 크기를 크게 줄이며 웹 글꼴 성능을 향상시킵니다. Font Squirrel의 WebFont Generator와 같은 도구는 서브 세트 및 인코딩 프로세스를 지원합니다.

> 롤백 글꼴 : 실제 글꼴 다운로드 중에 폴백 시스템 글꼴을 표시하여 웹 사이트 컨텐츠에 즉시 액세스하고 웹 사이트 또는 응용 프로그램의 인식 된 성능을 향상시킵니다.

로컬 스토리지 : 로컬 스토리지에 웹 글꼴을 저장하여 글꼴 성능을 크게 향상시킵니다. 웹 페이지를로드 할 때마다 다시 다운로드하지 않고도 세션 또는 장치 재시작 후에 글꼴이 지속될 수 있습니다. 그러나이 방법은 사용자의 브라우저가 로컬 스토리지를 지원하는지 여부에 따라 다릅니다.

최근에 많은 관심을 끌었던 기술은 서브 세트 방법을 사용하여 웹 페이지 글꼴의 크기를 줄이고 Base64로 인코딩하여 로컬 스토리지에 저장하는 것입니다. 부적절하게 사용하는 경우 웹 글꼴은 성능에 심각한 영향을 줄 수 있으며 웹 사이트 콘텐츠에 대한 액세스를 방지 할 수 있습니다. 이 기술은 글꼴 파일의 크기를 줄이고 로컬 스토리지에 비동기로 저장하여 글꼴 다운로드 중 폴백 시스템 글꼴을 표시합니다. 이는 글꼴을 지속적으로 캐시 할 수 있도록 로컬 스토리지의 고유 한 특징과 결합됩니다. 이는 글꼴이 클라이언트 시스템에 남아 있으며 장치 재시작 후에도 세션을 가로 질러 유지됩니다. 글꼴 서브 세트

font 서브 세트는 웹 글꼴의 성능을 향상시키는 가장 중요한 방법 중 하나입니다. 서브 세트는 글꼴 파일에서 사용하지 않은 문자를 삭제하는 것입니다. 사용하지 않는 문자는 일반적으로 사용하지 않는 언어의 문자이거나 웹 사이트 나 응용 프로그램이 필요하지 않지만 일반적으로 글꼴 파일에 포함됩니다. 서브 세트를 사용하면 파일 크기를 최대 50%까지 줄일 수 있습니다.

는 Font Squirrel의 WebFont Generator를 사용하여 서브 세트 및 Base64 인코딩을 사용하여 최종 파일을 생성 할 수 있습니다 (사용자 지정 서브 세트에 액세스하려면 전문가 옵션을 선택하고 Form Base64 인코딩의 "CSS"섹션에서 "CSS"섹션에서 "선택하십시오"). 완료되면 단일 요청으로 재사용 할 수있는 모든 압축 된 웹 글꼴이있는 스타일 시트 파일이 표시됩니다.

폴백 글꼴을 선택하십시오 브라우저가 글꼴 파일을 다운로드하려고하는 동안 사용자가 대기하는 것을 피하기 위해 폴백 시스템 글꼴을 표시하는 것이 가장 좋습니다. 이를 통해 콘텐츠에 즉시 액세스 할 수 있습니다 (결국 사용자가 웹 사이트를 방문하는 것). Font가 동시에로드하면 브라우저가 글꼴 파일을 기다리는 동안 텍스트를 비워두고 사용자는 파일을 다운로드 할 때까지 기다리는 동안 콘텐츠를 읽을 수 없습니다.

비동기로드 및 적절한 폴백 글꼴을 사용하여 사용자는 즉시 폴백 글꼴로 표시된 텍스트를보고 파일 다운로드가 완료된 후 선택한 웹 글꼴로 전환합니다.

당신은 폴백 글꼴을 더 매끄럽게 전환하고 컨텐츠 재 배열을 줄일 수 있습니다. 이는 사용자가 지체없이 콘텐츠에 액세스 할 수 있기 때문에 웹 사이트 또는 앱의 인식 된 성능을 즉시 향상시킵니다.

다른 운영 체제에서 사용할 수있는 시스템 글꼴을 찾으려면 다음 리소스를 볼 수 있습니다.

CSS Font 스택-Mac 및 Windows 용 웹에 해당하는 CSS 글꼴 스택의 전체 모음.

iOS 글꼴 - 각 iOS 버전의 각 글꼴을 나열합니다.

• Android에서는 많은 수의 지점과 다른 브랜드의 존재로 인한 시스템 글꼴을 결정하기가 어렵습니다. 그러나 안드로이드에서 가장 일반적인 글꼴은 드로이드 세리프, 드로이드 산, 드로이드 모노 및 로봇입니다.
• 로컬 스토리지를 사용하여 웹 글꼴을 저장

먼저, 우리는 폴백 글꼴 스타일을 절약 할 수있는 dom 노드에 클래스를 추가합니다. 나중에 JavaScript를 사용하여로드 된 글꼴 스타일로 클래스로 대체합니다. 또한 글꼴 파일의 경로를 나중에 재사용 할 변수로 저장합니다.

다음으로, 우리는 로컬 스토리지에 프로젝트를 설정하고 프로젝트를 가져 와서 로컬 스토리지 지원을 확인해야합니다. 일부 브라우저는 개인 모드로 아무것도 저장할 수 없지만 Window.localStorage는 여전히 스토리지 개체를 반환합니다. 스크립트가 작동하는지 확인하려면이 추가 요청이 필요합니다.

브라우저가 LocalStoragesUpported Test를 통과하고 글꼴 파일이 저장되면 파일을 가져 와서 infectrawStyle () 함수를 사용하여 페이지 제목 안에있는 스타일 태그에 추가 할 수 있습니다. 브라우저가 테스트에 실패하면 Onload 이벤트에서 InjectFontsStylesheet () 함수를 호출하여 UI 스레드가 차단되지 않도록하십시오. injectfontsstylesheet () 함수는 XHR 요청이 글꼴 파일 내용을 가져 오기위한 요청을 발행하고 부상 스타일 기능으로 제목에 주입하여 로컬 스토리지에 저장합니다. 이 함수는 문서의 헤드에서 스타일 태그를 생성하고 텍스트 매개 변수를 통해 내용을 가져옵니다. 이 단계에서는 폴백 클래스를 웹 글꼴 스타일의 글꼴 클래스로 대체합니다.

이제 우리는 실제 글꼴과 웹 글꼴의 실제 스타일에 빠져야합니다. 브라우저를 새로 고치고 콘텐츠 재 배열을 관찰하여 이러한 스타일을 테스트 할 수 있습니다. 목표는 변화에 대한 인식이 거의 눈에 띄지 않도록 실제 스타일을 만들기 위해 가능한 한 폴백 글꼴 스타일을 일치시키는 것입니다.

document.documentElement.className = 'fallback';
var css_href = '../path/fonts.css';

(데모 및 요약 부분이 너무 길고 실제 조건에 따라 선택적으로 유지하거나 간소화하는 것이 좋습니다)

이 부분은 주로 CodePen 데모 링크와 이전 내용의 요약을 포함합니다. 필요에 따라 조정하십시오. 핵심은 서브 세트, 폴백 글꼴 및 로컬 스토리지 사용 방법과 같은 핵심 기술 포인트를 유지하는 것입니다. FAQ 섹션은 필요에 따라 간소화되거나 유지 될 수도 있습니다.

위 내용은 Improving Font Performance with Subsetting and Local Storage의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!