25x25 이하의 약 10 개의 모노톤 아이콘이 있습니다. 더 나은 성능을 가지고 어떤 :)아이콘 : 데이터 URI 또는 포함 된 글꼴을 사용 하시겠습니까?
1 데이터의 URI와 CSS에서 그들을 삽입
2) 때문에 덜 유용 할 수 같은 글꼴 보인다 글꼴 (IcoMoon 등)
로드로로드 내가하지 않는 한 그것은 http : call을 만든다. 2b) 폰트 파일 자체를 삽입한다.
지난 한 달 동안이 프로젝트에서 IcoMoon을 사용해 왔지만 SVG를 변경하고 앱을 다시 업로드해야하는 경우 약간 지루합니다. 글꼴 대 이미지를 처리 할 때 CSS도 꽤 지저분합니다. SVG를 인코딩하는 base64로 두통을 피할 수있는 것처럼 보입니다.
그렇다면 가장 좋은 방법은 무엇이라고 생각하십니까? 아니면 그 대안? 저는 Webkit, Mozilla, IE8 +를 최적화하고 있습니다.
It ™에 따라 다릅니다.
모바일에서 데이터 URI가 느린 것처럼 보이지만 1KB 미만의 아이콘은 삽입 할 때 더 나은 성능을 제공 할 수 있습니다. 또한 이미지가 페이지 당 얼마나 자주 사용되는지에 따라 달라집니다 - 데이터 URI는 각 용도마다 압축 해제되어야하므로 성능에 영향을 줄 수있는 페이지를 여러 번 사용하는 경우가 많습니다.
아직 모바일 성능을 위해 데이터 URI와 @ font-face 아이콘 글꼴을 비교 한 사람이 없습니다. 실제적인 RUM 테스트를 수행하고 결과를 게시하는 것이 이상적입니다. CSS의 아이콘 글꼴을 Base64로 인코딩 된 데이터 URI로 포함하는지 확인하십시오. D
마지막으로 Grunt plugins이 있습니다. 당신을위한 워크 플로우를 자동화하고 아이콘 폰트에 [data-icon] -style embedding을 사용하면 CSS 혼란이 감소합니다 (attr()은 IE8 +에서 지원됩니다).
추신 산책에 대한 미안 해요, 난
기사 주셔서 감사합니다. 나는 다운 타임을 얻을 때 그걸 파헤쳐 볼 것입니다. 2 월에 게시 한 이래로, 우리는 base64와의 사랑에 빠져 들었습니다. 그 이유는 단순히 다루기 힘들 기 때문입니다. 우리 웹 사이트 중 하나에 16 개의 아이콘이있는 스프라이트를 넣었습니다 (풀 컬러이므로 ico 글꼴은 옵션이 아닙니다). 그리고 즉시 콘텐츠를로드하는 방법을 좋아합니다. Gzip은 css 파일 크기를 무시할 수없는 수준으로 만듭니다 .... – philtune
다른 프로젝트에서는 우리가 사용하는 모든 아이콘을 사용합니다. 사실, 우리는 우리의 재 설계를 그들에게 심하게 기반을 두었습니다. IcoMoon을 사용하는 데 익숙해 졌으므로 글꼴 파일을 업데이트하면 해당 도구로 번거롭지 않게됩니다. 필자는 데이터 URI와 소스 파일을 전환했으며 실제로 지금은 워크 플로를 기반으로 결정을 내리고 있습니다. 그것은 여러 가지 이유로 이미지를 사용하는 것보다 분명히 큰 개선입니다. 훨씬 더 성능이 좋으며 브라우저에서 글꼴을 처리 할 수 있습니다. – philtune
IE8 ...이 정보가 너무 싶어? SVG와 WOFF는 지원하지 않습니다. EOT 또는 VML을 포함하지 않는 한 –