Fontello를 사용하여 필요한 아이콘 글꼴 만로드

아이콘 글꼴은 표준 이미지에 비해 몇 가지 장점을 제공합니다. 고해상도 화면에서 선명하고 CSS (크기, 색상, 그림자)로 쉽게 스타일링되며 이미지 스프라이트보다 관리하기가 더 간단합니다. 그러나 새로운 프로젝트의 경우 SVG 이미지가 우수한 대안 일 수 있으며, 멀티 컬러 기능과 더 선명한 영상을 제공합니다. 레거시 브라우저 지원 또는 워크 플로 제약 조건이 아이콘 글꼴을 필요로하는 경우 사용을 최적화하는 것이 중요합니다. Font Aways (버전 4.7, ~ 75KB)와 같은 인기있는 아이콘 글꼴 라이브러리의 도전은 대부분의 프로젝트가 사용 가능한 아이콘의 일부만 사용한다는 것입니다. 전체 라이브러리를로드하면 불필요하게 페이지 중량이 증가합니다. Fontello는 필요한 아이콘을 선택할 수있게하여이를 해결합니다. 사용자 정의 글꼴 생성

아이콘 선택 :

접두사 변경). 개별 아이콘 코드를 조정할 수도 있습니다.
1. 다운로드 : 일단 만족하면 생성 된 글꼴 파일을 다운로드하십시오 글꼴을 통합합니다
추출 :
2. 다운로드 된 zip 파일을 추출하십시오. "CSS", "Fonts"폴더 및 "Config.json"파일 (글꼴 구성 포함)이 있습니다. import (선택 사항) : 기존 프로젝트의 경우 "config.json"파일을 Fontello 페이지로 끌거나 설정을 통해 가져 오거나 가져옵니다. & gt; 가져 오기. <..> 파일 배치 : 모든 파일 (폴더 구조 유지)을 프로젝트 디렉토리에 복사하십시오. CSS 포함 : icon-facebook 프로젝트에 생성 된 CSS 파일을 포함시킵니다. 사용 : icon-fb icon-를 아이콘 이름으로 대체하는 형식으로 html 마크 업에서 아이콘을 사용하십시오. 사용자 정의 이미지 사용 Fontello는 방대한 라이브러리를 제공하지만 사용자 정의 SVG 이미지를 가져올 수 있습니다. SVG가 올바르게 준비되었는지 확인하십시오 : 채우기, 색상, 복잡한 규칙 (
채우기) 및 지방 라인 속성을 제거하십시오. 윤곽선을 단일 윤곽선으로 결합하십시오 성능 이득
3. fontello는 파일 크기를 크게 줄입니다. 예를 들어, 글꼴 Awesome 4.7 파일 (75KB)은 4KB Fontello 파일 (8 개의 아이콘 사용)으로 축소되었습니다. 절약은 사용 된 아이콘 수에 따라 다릅니다. 이것은 HTTP 요청을 최소화하고 로딩 속도를 향상시킵니다. 또한 Fontello는 여러 글꼴에서 일관된 아이콘 접두사를 허용하여 관리를 단순화합니다. 고급 구성 Cors 헤더 : 별도의 도메인에서 글꼴 파일을 호스팅하는 경우 파일에 CORS 헤더를 구성하십시오 :

에서 올바른 마임 유형을 설정하십시오.

1. 결론 Fontello는 경량의 사용자 정의 아이콘 글꼴 생성을 단순화합니다. 작은 파일 크기 감소조차도 웹 사이트 성능을 크게 향상시키기 위해 축적됩니다. 아이콘 글꼴 워크 플로우를 최적화하는 데 사용하는 것을 고려하십시오