> 웹 프론트엔드 > JS 튜토리얼 > 노드 글꼴 압축 플러그인 글꼴 스파이더 사용법 소개

노드 글꼴 압축 플러그인 글꼴 스파이더 사용법 소개

不言
풀어 주다: 2018-09-27 16:17:22
원래의
2892명이 탐색했습니다.

이 글은 노드 글꼴 압축 플러그인 글꼴 스파이더의 사용법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

요구 사항:

  1. 파티 A의 요구 사항에 따라 UI에서 지정된 글꼴을 사용하십시오.

  2. 모바일 단말기는 기본적으로 시스템 기본 글꼴이 아닌 글꼴 패키지를 가져와야 합니다. by yourself

  3. 글꼴 패키지가 너무 크고 글꼴 크기가 너무 큽니다. 패키지는 일반적으로 몇 MB이므로 페이지 로딩 속도가 심각하게 느려집니다.

분석:

  1. 텍스트 내용은 다음과 같습니다. 내용이 고정되어 업데이트할 필요가 없습니다

  2. 텍스트 내용의 대부분은 일반적으로 사용되는 텍스트이고 대부분의 텍스트는 사용되지 않습니다

플러그인:

font-spider
node 安装插件方法:npm install font-spider -g
로그인 후 복사

작업:

  1. 설치 플러그인

  2. 프로젝트 텍스트 추출:
    임시 html을 만들고 프로젝트에 필요한 모든 텍스트를 html

  3. 에 넣습니다. htmlnl에 스타일 코드를 작성합니다. 예:

    @font-face {
        font-family: 'myfont';
        src: url('./common/assets/font/myfont.ttf');
    }
    * {
        font-family: 'myfont';
    }
로그인 후 복사
  1. In the 명령 프롬프트 창에서 html이 있는 디렉터리로 디렉터리를 확장하고 다음 명령을 입력합니다.

참고:

  1. 페이지 텍스트 콘텐츠를 자주 업데이트해야 하는 경우

  2. 입력 양식 콘텐츠에 사용자 정의 글꼴을 적용해야 하는 경우 이 문서에 설명된 방법을 포기하고 동적으로 글꼴 생성을 고려하세요. 서버 측 렌더링을 통해 패키지를 제공하거나 페이지에 완전한 글꼴 패키지를 솔직하게 소개하세요

위 내용은 노드 글꼴 압축 플러그인 글꼴 스파이더 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿