본문으로 건너뛰기
黯羽轻扬매일 조금씩

iconfont 아이콘 폰트

무료2015-08-18#CSS#Solution#iconfont的优缺点#制作生成iconfont库#管理维护图标字体#iconfont的兼容性#iconfont的性能优化#iconfont注意事项

iconfont 아이콘 폰트는 매우 오래된 기술로, 플랫 UI 에서 일반적입니다. 본 문서에서는 iconfont 의 장단점, iconfont 라이브러리 제작 및 생성, 관리 및 유지보수, 호환성, 성능 최적화 및 주의사항에 대해 자세히 소개합니다

no_mkd

일.iconfont 의 장단점

장점

  1. 벡터성

    화면 적응 (스케일링)

  2. 폰트성

    스타일 제어 (색상, 그림자, 심지어 부조)

  3. 파일이 작음

    일반적으로 20-50KB 로, 이미지보다 훨씬 작습니다. 예를 들어 typicons 라이브러리에는 308 개의 icon 이 있으며, 폰트 파일 크기는 59KB(woff) ~ 147KB(svg) 입니다

    아이콘 파일은 일반적으로 1.5KB/개 (Sprite 는 총 크기만 더 커지게 합니다)

  4. Sprite 가 필요 없고 수정이 용이함

    Sprite 사용의 번거로움을省去하고 수정 및 교체가 쉽습니다

단점

  1. 색상 제한

    iconfont 는 단색 또는 그라데이션만 가능하며, 복잡한 아이콘에는 이 기술을 사용할 수 없습니다 (비록 다색 iconfont 를 구현하는 방법도 있지만 호환성과 비용이 받아들일 수 없습니다)

  2. FOUT(Flash of Unstyled Text) 문제

    브라우저는 먼저 기본 폰트로 렌더링하고, 폰트 파일 다운로드 완료 후 텍스트 콘텐츠의 일부를 렌더링하므로 텍스트에피할 수 없는깜빡임이 발생합니다

  3. IE 는 페이지 렌더링을 차단함

    @font-face 선언 전에 script 태그가 있으면, IE 는 폰트 파일 다운로드가 완료될 때까지 아무것도 렌더링하지 않습니다

  4. 성능

    IE 의 문제가 많으며, IE 와 FF 에서 @fontface 는 window.onload 를 차단합니다. IE 에서는 사용 여부와 관계없이 로드되며, 폰트 로드 오류 (장시간 결과 반환 안 됨) 발생 시 IE ��� 10 분간 대기합니다 (그 동안 백스크린). 다른 브라우저는 기본 폰트로 렌더링하거나 일시적으로 콘텐츠를 표시하지 않으며, 다운로드 대기 중에는 비지 인디케이터가 계속 트리거됩니다 (상태 표시줄, 진행률 표시줄, 아이콘, 마우스 포인터)

이.제작 및 생성

  1. [선택적 단계]PS, png 에서 경로 내보내기

  2. AI, 채우기, 경로 닫기, svg 로 저장

  3. 온라인 폰트 생성기

삼.관리 및 유지보수

온라인 플랫폼에 업로드하여 목록 뷰를 자동 생성하여 관리하기 쉽게 합니다. 예를 들어http://www.iconfont.cn/showProject?pid=26177

사.폰트 형식 및 호환성

폰트 형식

  • woff：W3C 권장 형식, 최소 크기, 호환성 낮음

    Android4.4+, IE9+

  • ttf：Win 과 Mac 기본 폰트 형식

    Android4.1+, IE9+ 일부 지원

  • eot：마이크로소프트가 제안한, @fontface 를 통한 OpenType 폰트 임베딩 허용

    Android 지원 안 함, IOS 지원 안 함, IE 지원 안 함

  • svg：호환성 좋음, 크기 큼

    Android4.1+ 일부 지원, IE9+

폰트 파일 크기

20 개 icon, 폰트 파일 크기 각각:

  • woff: 7K

  • ttf: 11K

  • eot: 11K

  • svg: 14K

호환성

  • IE: IE4 부터 eot 형식 지원, IE9 부터 woff 지원

  • webkit/safari: TrueType/OpenType(.ttf), OpenType PS(.otf) 지원, iOS4.2+ 는.ttf 지원, iOS 4.2 이하는 SVG 폰트만 지원, Safari5.1+ 부터 woff 형식 지원

  • Chrome: webkit 이 지원하는 것 외에, Chrome 6 부터 woff 형식 지원

  • Firefox: .ttf 와.otf 지원, Firefox 3.6 부터 woff 형식 지원

  • Opera: .ttf, .otf, .svg 지원. Opera 11 부터 woff 지원

  • iPad, iPhone 및 Android 3.0+ 는 SVG 폰트 지원

    여기는 caniuse 결론과 차이가 있습니다

오.성능 최적화 원칙

  • @font-face 정의를 모든 script 태그 앞에 배치

  • 많은 폰트 파일이 있다면, 여러 도메인에 분산 고려

  • 사용하지 않는 @font-face 선언 포함하지 않기——IE 는 사용 여부와 관계없이 모두 로드함

  • 폰트 파일 Gzip 압축, 미래 만료 헤더 선언 설정

  • 폰트 파일 후로드 고려 (body 종료 태그 앞에 배치), 특히 IE 용 (IE 는 10 분간 폰트 다운로드, 그 동안 페이지 차단)

@fontface 성능 문제에 대한 자세한 정보는【번역】@font-face 와 성능을 참조하세요

육.주의사항

1.FF 는 이종 도메인 폰트 로드 안 함

동일 도메인에 배치하거나 서버 헤더 설정

2.safair 와 chrome 에서 폰트가 굵어짐

반 픽셀 앨리어싱이 1px 로 렌더링되므로 css 규칙 설정:-webkit-font-smoothing: antialiased;

3.PC 의 Chrome 에서 심각한 앨리어싱

가장자리 흐림 처리即可, css 규칙 설정:-webkit-text-stroke-width: 0.2px;

칠.결론

  1. iconfont 장점 > 단점, 재사용성과 유지보수성의 편리함은 매력적입니다

  2. 폰트 라이브러리 생성의 주요 작업량은 png 에서 svg 로 변환입니다

    UI 팀이 협력해주면 쉬우며, 폰트 라이브러리 구축 후 UI 에도 이점이 있어 디자인 작업이 더 편리해지고, PS 플러그인으로 iconfont 를 직접 사용할 수 있어 icon 을 잘라낼 필요가 없습니다

    (실제로 cc, cs6 는 지원하지 않으며, 플러그인 품질에 의문이 있습니다.플러그인을 사용할 수 없는 경우, UI 디자인 아이콘과 iconfont 의 대응이 작은 문제가 됩니다)

  3. 폰트 라이브러리 관리 문제는 없습니다

    http://www.iconfont.cn/users/project매우 편리합니다

  4. 호환성은 문제가 아닙니다

    4 가지 형식 모두 배치하면 호환성 충분합니다

  5. 성능은 좋지 않습니다

    하지만 이미지 Sprite 와 비교하면 충분히 좋습니다

댓글

아직 댓글이 없습니다

댓글 작성