웹 글꼴을 사용하여보다 선명하고 세련된 UI 아이콘 가이드
비트 맵 이미지 형식 (예 : PNG 및 GIF)을 사용하여 웹 사이트에 아이콘을 표시하는 방법에 익숙한 경우 해당 단점을 잘 알고있을 것입니다. 먼저 아이콘의 치수 및 색상 정보의 수에 따라 아이콘 파일 크기가 매우 커질 수 있습니다..
웹 사이트에 넣을 아이콘이 너무 많으면 브라우저에서 많은 HTTP 요청을 수행해야하기 때문에 웹 사이트 성능이 저하 될 수 있습니다. 이 문제는 CSS 스프라이트로 해결할 수 있지만 파일 크기는 여전히 크다..
비트 맵 아이콘에는 유연성과 확장성에도 단점이 있습니다. 아이콘을 특정 레벨로 확대하거나 확대하거나 망막 디스플레이와 같이 매우 높은 화면 해상도로 볼 필요가 있다고 가정 해 봅시다. 아이콘이 분명히 올거야. 흐릿 해 보이게하다..
음, 위의 사항 중 일부를 고려한다면 아마도 아이콘 글꼴을 사용해야 할 것입니다.
아이콘 글꼴 사용
안 아이콘 글꼴 나중에 웹 사이트에 삽입 할 수있는 웹 글꼴로 묶인 일련의 아이콘입니다. @ font-face. Chris가 CSS 트릭에서 지적한 것처럼, 아이콘을 전달하기 위해 이미지에 글꼴을 사용하면 많은 이점이 있습니다.
- Font는 본질적으로 해상도 독립적 인 벡터 기반 객체이므로 매우 높은 화면 해상도 (망막 수준)를 비롯하여 다양한 화면 해상도에서 선명하게 유지됩니다..
- 또한 확장 성이 뛰어나므로 품질과 정밀도를 유지하면서 여러 단계로 확대 할 수 있습니다..
- 기본적으로 아이콘은 글꼴이므로, 색상, 투명도, 텍스트 그림자를 제어하고 스타일 시트를 통해 크기를 조절할 수도 있습니다.
- CSS3로 아이콘을 움직일 수도 있습니다..
- 아이콘은
@ font-face인터넷 익스플로러 4 (인터넷 익스플로러 4)에서 이미 지원 된 규칙. - 적은 HTTP 요청 및 낮은 파일 크기.
여기에 우리가 찾을 수있는 최고의 무료 아이콘 글꼴이 있습니다 :
- 글꼴 굉장
- IcoMoon
- 소셜 미디어 아이콘
- Zurb Foundation 아이콘
저작자의 시간과 노력을 기리기 위해 라이센스를 웹 사이트에 삽입하기 전에 라이센스를 확인하고 준수했는지 확인하십시오..
@ font-face 규칙
앞서 언급했듯이 아이콘은 다음을 사용하여 임베드됩니다. @ font-face 새로운 것을 정의하는 스타일 시트를 통한 규칙 글꼴 모음. 다음 예제에서는 Web Symbols를 사용합니다.
@ font-face 글꼴 패밀리 : 'WebSymbolsRegular'; src : url ( 'fonts / websymbols-regular-webfont.eot'); url ( 'fonts / websymbols-regular-webfont.woff') 형식 ( 'woff'), url ( '글꼴 / websymbols-regular-webfont.eot? #iefix' ( 'fonts / websymbols-regular-webfont.ttf') 형식 ( 'truetype'), url ( 'fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') 형식 ( 'svg');
그런 다음 HTML 문서에서 아이콘을 나타내는 문자 만 추가하면됩니다. 글꼴 모음 문서에서 광범위하게, 아이콘을 렌더링해야하는 특정 클래스에 추가 클래스를 추가하여 좀 더 구체적으로 할 수 있습니다.
- h
- 나는
- j
- 에이
- 나는
스타일 시트로 돌아가서 새로운 스타일을 정의합니다. 글꼴 모음 우리가 방금 추가 한 수업 :
.icon-font 글꼴 패밀리 : WebSymbolsRegular; 글꼴 크기 : 12pt;
- 데모 @ 글꼴 - 얼굴
의사 요소 사용하기
아이콘이 사이드 요소로 처리되면 아이콘을 통해 전달할 수도 있습니다. 의사 요소. HTML 마크 업을 다음과 같이 가정합니다.
- 댓글
- 모든 응답
- 앞으로
- 부착
- 영상
우리는 스타일 시트에서 이렇게 할 수 있습니다.
ul.icon-font.pseudo li : before font-family : WebSymbolsRegular; margin-right : 5px; ul.icon-font.pseudo li : nth-child (1) : before content : "h"; ul.icon-font.pseudo li : nth-child (2) : before content : "i"; ul.icon-font.pseudo li : nth-child (3) : before content : "j"; ul.icon-font.pseudo li : nth-child (4) : before content : "A"; ul.icon-font.pseudo li : nth-child (5) : before content : "I";
- 데모 가짜 요소
개인 사용 유니 코드
아이콘이 문자 (A, B, C, D 등)에 삽입되지 않았지만 문자 간의 충돌을 최소화하기 위해 유니 코드 개인용 (Unicode Private Use)에 포함 된 상황이 있습니다. FontAwesome에서와 같이, 작성자는 운좋게도 다음과 같은 스타일 시트에 모든 문자 코드를 추가했습니다.
.아이콘 유리 : before content : "\ f0c6";
그러나 아이콘을 HTML에 직접 삽입해야하는 경우 다음 코드와 같습니다. \ f0c6 HTML로 인코딩 된 유효한 문자가 아니기 때문에 뾰족한 아이콘을 렌더링하지 않습니다..
HTML에 숫자 참조 마크 업이 필요합니다. 특수 문자를 렌더링합니다. CSS3 버튼에 대한 이전 튜토리얼에서 약간 다루었습니다. 이 문자 앞에는 앰퍼샌드 기호 (&), 해시 기호 (#) 그리고 엑스 다음에 문자를 나타내는 16 진수가옵니다..
예를 들어, f0c6 16 진수이므로 HTML의 숫자 참조는 & # xf0c6;, FontAwesome에서 코드에 종이 클립 아이콘, 그렇게.
- 데모 유니 코드
글꼴 하위 집합
컬렉션의 아이콘이 모두 필요하지는 않습니다. 이 경우 우리는 사용되지 않는 문자를 삭제할 수 있습니다. 글꼴 파일 크기가 더 작아진다.. 다행히 FontSquirrel의 편리한 도구로이 일을 쉽게 할 수 있습니다. @ font-face generator.
해당 페이지로 이동하여 글꼴을 추가 한 후 전문가. 좀 더 많은 옵션이 보일 것입니다. 고르다 사용자 지정 부분 집합.
이 예에서는 Sociolico 글꼴을 사용하여 웹 사이트에 소셜 미디어 아이콘을 표시하지만 필요한 아이콘은 Dribble, Facebook 및 Twitter이며 각각 문자로 표시됩니다. d, f 과 티. 따라서 다음과 같이 해당 문자를 단일 문자 입력 필드에 넣으십시오.
그리고 우리는 끝났습니다. 이제 우리는 글꼴을 다운로드 할 수 있고 제 경우에는 글꼴 크기가 3Kb에서 5Kb로 밝혀졌습니다. 또한 유일한 문자는 아이콘으로 렌더링됩니다 d, f 및 t 만, 다른 문자는 일반 문자로만 렌더링됩니다..
최종 생각
이 연습에서 우리가 할 수없는 한 가지는 아이콘과 같이 매우 상세한 효과를 추가하는 것입니다.
그러나 전반적인 디자인에 세부 수준이 필요하지 않은 경우 웹 사이트에서 아이콘을 제공하는 더 좋은 방법 일 수 있습니다. 유연성, 확장 성, 매우 작은 파일 크기의 망막 준비, 다른 무엇을 요구할 수 있습니까??
마지막으로,이 주제에 대해 더 깊이 들어가기를 원한다면 아래의 데모와 소스 코드를 다운로드하십시오..
- 자신 만의 아이콘을 만드는 법 Webfont - WebDesignerDepot.com
- 글꼴 및 데이터 속성 표시 - 24Ways
- 개인 사용 유니 코드 - 위키 피 디아
- 데모
- 소스 다운로드
