아이콘폰트란 무엇인가요? CSS의 iconfont 인스턴스 사용법 요약

icon폰트란 무엇인가요?

아이콘폰트란 무엇인가요? CSS의 iconfont 인스턴스 사용법 요약는 오늘날 비교적 성숙한 기술이어야 합니다. IconFont를 분해하면 Icon과 Font가 무엇인지 모두가 이해할 수 있을 것 같습니다. 그렇죠, IconFont 입니다~. 글꼴 도구를 사용하여 우리가 웹에서 일반적으로 사용하는 그래픽 아이콘(아이콘)을 웹 글꼴로 변환하면 CSS @font-face의 도움으로 웹 페이지에 삽입되어 아이콘을 표시할 수 있습니다. 글꼴은 벡터 그래픽이므로 본질적으로 "해상도 독립적"이며 모든 해상도 및 PPI에서 완벽하게 크기가 조정될 수 있습니다. 확대 후에도 png 및 jpeg와 같은 기존 비트맵이나 흐림 효과가 발생하지 않습니다. 다음 글은 아이콘폰트란 무엇인가요? CSS의 iconfont 인스턴스 사용법 요약 예제의 사용법에 대해 이야기하는 것입니다.

아이콘폰트 사용법

1.아이콘폰트란? 아이콘폰트의 장점과 용도를 소개합니다

아이콘폰트의 장점은 무엇인가요?

크기를 자유롭게 변경

색상을 자유롭게 수정

그림자, 회전, 투명도와 같은 시각 효과를 추가할 수 있습니다.

IE6과 호환

위의 점은 원본 아이콘을 완전히 무너뜨립니다. 단점은 색상이 너무 단조롭고 단색이라는 것입니다.

아래 사진은 Font-Awesome의 CSS 파일 내용 중 일부입니다. 이름으로 보면 아이콘의 정의처럼 보이지만 f002와 f003의 내용은 정확히 무엇인가요? 다운로드한 글꼴 파일을 글꼴 편집 소프트웨어를 사용하여 열어보면 이해하실 수 있습니다.

2.

아이콘폰트 글꼴 아이콘과 다양한 작은 CSS 아이콘에 대한 자세한 설명

보통 우리는 이러한 그래픽을 스프라이트 다이어그램(스프라이트 다이어그램이라고도 함)으로 자릅니다.

스프라이트 다이어그램의 원리: 그림을 하나의 큰 그림으로 만든 다음 배경 이미지의 위치를 ​​설정하여 그림을 표시합니다.

스프라이트 차트의 장점: 서버 요청 수를 줄이고 서버 부담을 줄입니다.

sprites는 좋은 스프라이트 차트 작성 도구입니다.

물론 이러한 작은 그래픽을 만드는 다른 방법도 있습니다. 예를 들어 위 그림의 Tmall에서 사용하는 글꼴 아이콘 아이콘폰트란 무엇인가요? CSS의 iconfont 인스턴스 사용법 요약

글꼴 아이콘은 이름에서 알 수 있듯이 글꼴이며 글꼴과 마찬가지로 벡터입니다. 왜곡 없이 확대하거나 축소할 수 있는 벡터 아이콘이라고도 합니다.

3.

CSS에서 아이콘 글꼴 사용에 대한 자세한 설명

처음에는 이 영어를 이해하지 못하더라도, 아이콘폰트의 경우 앞으로 영어가 사용됩니다. 앞으로 읽어보면 폰트 아이콘이라고 불러야 합니다. 여기에는 이미 두 가지 개념이 포함되어 있습니다. 첫 번째는 글꼴이어야 하고 두 번째는 아이콘이어야 합니다. 우리 모두는 웹 페이지의 크기, 스타일, 변형, 늘이기, 기본 글꼴 및 기타 글꼴 속성을 제어할 수 있다는 것을 알고 있습니다. 따라서 이 아이콘 글꼴은 스타일에 텍스트로 포함되어야 합니다. 아이콘이기 때문에 반드시 소개할 경로가 있습니다. 우선 img 태그를 먼저 생각했습니다. 텍스트이자 아이콘이기 때문에 우리가 생각할 수 있는 것은 @font-facecss3 속성뿐입니다.

4.

아이콘폰트란 무엇인가요? CSS의 iconfont 인스턴스 사용법 요약 - 벡터 아이콘 글꼴 사용

아이콘 글꼴을 사용하여 아이콘을 생성하면 이미지 기반 아이콘에 비해 다음과 같은 장점이 있습니다.

1.) 자유로운 크기 변경

2.) 자유로운 색상 수정
3. ) 그림자 효과 추가
4.) IE6도 지원 가능
5.) 투명도, 회전 등과 같은 이미지 아이콘의 다른 속성 지원
6.) 텍스트 획 및 배경 클립:텍스트 등을 추가할 수 있습니다. 브라우저가 지원하는 한 속성은

5.

아이콘 글꼴(IconFont) 제작

아이콘 글꼴(IconFont)이 이제 점점 더 널리 사용되어 웹 페이지의 다양성이 크게 향상되고 망막 화면 왜곡 문제가 해결됩니다. . 이 private 메소드(@font-face)는 IE4부터 Microsoft에서 지원했다고 하는데, 나중에 W3도 CSS2에서 이 메소드를 도입했는데, 나중에 CSS2.1에서 삭제되어 정말 아쉽습니다. CSS3가 다시 소개되기 전까지는 정말 좋은 소식이었습니다.

관련 질문 및 답변

1. Alibaba 아이콘 글꼴을 사용하면 Android WeChat에는 표시되지 않지만 ios

2에는 표시됩니다. 로컬 프로젝트에서 Alibaba의 아이콘 글꼴 라이브러리를 확장하고 아이콘 글꼴을 추가하세요

3. 아이콘폰트 아이콘 제작 문제

[관련 권장사항]

1. PHP 중국어 웹사이트 무료 튜토리얼: "CSS 온라인 매뉴얼"

2. PHP 중국어 웹사이트 무료 동영상 튜토리얼: "php.cn Dugu Jiujian (2) -css 동영상 튜토리얼》

위 내용은 아이콘폰트란 무엇인가요? CSS의 iconfont 인스턴스 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!