배경
프로젝트는 Alibaba Pratt & Whitney 2.0 글꼴을 사용하며 모델은 각각 35-thin 및 45-light입니다. 이 두 글꼴 패키지의 크기는 약 8mb입니다.
로컬로 로드할 때 속도에는 영향이 없을 수 있습니다. 프로덕션 및 테스트로 보낼 때 환경, 속도 매우 느릴 것입니다. 특히 테스트 환경에서는 글꼴 패키지가 1분 동안 로드되고 웹 페이지의 글꼴이 1분 후에 변경됩니다. 이는 터무니없는 일입니다.
최적화
플러그인: 글꼴 스파이더, 이 구성표는 vue React jquery 등을 포함한 모든 프로젝트에서 사용됩니다.
우리 자신의 글꼴 패키지 .ttf 파일에 모든 텍스트가 포함되어 있으므로 먼저 글꼴-스파이더 원칙에 대해 이야기하십시오.
글꼴-스파이더의 기능은 필요한 텍스트를 원하는 글꼴로 변환하는 데 도움을 주는 것입니다. 예를 들어 전체 프로젝트에서
"鸡汤辉" 세 문자에 Alibaba Pratt & Whitney 글꼴을 사용하려는 경우, 글꼴 스파이더는 이 세 문자를 Alibaba Pratt & Whitney 글꼴로 변환하고 새 .ttf 파일을 생성합니다 . 변환하려는 문자가 적을수록 결과 .ttf 글꼴 파일이 작아집니다.
단계
1. 글꼴-스파이더 종속성 설치
npm install font-spider -g
2. 원하는 이름으로 새 폴더를 만듭니다. 이 폴더에는 가져오려는 글꼴 파일인 Ttf 파일이 포함되어야 하며, 그런 다음 폴더에 Font.css와 같은 새 CSS 파일을 만듭니다.
@font-face {
font-family: 'AlibabaPuHuiTi-2-35-Thin';
src: url('./AlibabaPuHuiTi-2-35-Thin.ttf');
font-weight: normal;
font-style: normal;
}
.thin {
font-family: 'AlibabaPuHuiTi-2-35-Thin';
}
@font-face {
font-family: 'AlibabaPuHuiTi-2-45-Light';
src: url('./AlibabaPuHuiTi-2-45-Light.ttf');
font-weight: normal;
font-style: normal;
}
.light {
font-family: 'AlibabaPuHuiTi-2-45-Light';
}
여기 URL은 압축되지 않은 초기화.ttf 파일을 사용합니다.
3. 새 HTML 파일 추가(강조)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font.css">
</head>
<body>
<div>
<!-- 这里对应的是thin的压缩包 -->
<div class="thin">
鸡汤辉
</div>
<!-- 这里对应的是light的压缩包 -->
<div class="light">
鸡汤辉
</div>
</div>
</body>
</html>
새로 추가된 CSS 파일을 html 파일에 도입한 다음 두 개의 div를 작성하여 각각 css 파일에서 두 개의 새로운 클래스를 사용합니다.
이 두 div에 입력하는 텍스트, 문자, 숫자 및 문자는 도움을 주기 위해 글꼴 스파이더가 필요함을 나타냅니다. 원하는 글꼴로 변환합니다. 프로젝트에서 이 두 div 외부의 텍스트를 사용하는 경우 범위 내에 없는 텍스트는 원하는 글꼴을 사용하지 않습니다.
예: 이 두 div에 "鸡汤辉"라는 세 문자를 썼습니다. 그러면 최종 생성된 .ttf 파일은 Jitanghui만 인식할 수 있으며 Jitanghui를
Alibaba Pratt & Whitney 글꼴의 다른 중국어 문자로 설정할 수 있습니다. 숫자, 기호 및 문자는 다음과 같습니다. 시스템과 함께 제공되는 모든 글꼴
4. 마지막 단계에서는 사용할 파일 패키지로 CD를 이동합니다.
font-spider index.html
여기 index.html은 새로 추가된 html 파일입니다. 선택한 이름을 사용할 수 있습니다.
마지막으로, 이 폴더는 새로운 .ttf 파일과 .font-spider 폴더를 생성합니다. 이 .font-spider 폴더는 압축되지 않은 .ttf 파일을 저장합니다. 이때 파일
위치가 처리되었습니다. 압축하십시오. 이전 ttf 파일은 원본 파일을 직접 대체하며 CSS 파일은 참조 파일의 위치를 변경할 필요가 없으며 직접 사용하면 됩니다.
끝
말해주세요 여기 html 파일 div에는 일반적으로 사용되는 한자, 영문자, 대문자, 소문자, 한자 및 영어 기호 3500개를 썼는데, 이는 기본적으로 일반적인 항목을 다룰 수 있습니다. 특수 기호나 흔하지 않은 단어가 있는 경우 별도로 추가할 수 있습니다. , 최종적으로 8MB에서 900kb로 압축되었습니다.