html5의 글꼴 아이콘은 무엇입니까

HTML5에서 글꼴 아이콘은 웹 프로젝트에서 사용되는 아이콘 글꼴입니다. 이 글꼴을 통해 사용자에게 그림처럼 표시됩니다. 글꼴 아이콘도 텍스트와 마찬가지로 CSS를 통해 크기와 색상을 임의로 조절할 수 있어 웹사이트 구축에 매우 편리합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

글꼴 아이콘이란 무엇인가요?

쉽게 말하면 글꼴 아이콘은 특별한 글꼴입니다. 이 글꼴을 통해 사용자에게 그림처럼 표시됩니다. 글꼴 아이콘의 가장 큰 장점은 변형되지 않고 빠르게 로드된다는 것입니다. 글꼴 아이콘도 텍스트와 마찬가지로 CSS를 통해 크기와 색상을 임의로 조절할 수 있어 웹사이트 구축에 매우 편리합니다.

글꼴 아이콘은 문자 형식 대신 작은 이미지를 사용하는 글꼴입니다. 문자와 마찬가지로 각 아이콘 글꼴은 필요에 따라 크기가 조정되고 CSS 스타일을 사용하여 수정할 수 있는 벡터 요소입니다.

아이콘 글꼴을 사용하는 주된 이유는 크기, 색상, 모양을 쉽게 변경할 수 있다는 것입니다. 아이콘 글꼴은 본질적으로 투명하므로 어떤 색상이나 배경 유형에도 배치할 수 있으며 획을 추가하거나 아이콘의 불투명도를 변경할 수도 있습니다.

모든 설정 작업은 CSS를 사용하여 수행할 수 있으므로 디자인의 새 아이콘 인스턴스마다 고유한 이미지를 만들 필요가 없습니다. 이는 웹 사이트 디자인과 코드를 가볍게 유지하는 데 좋습니다.

아이콘 글꼴은 벡터 이미지이므로 왜곡 없이 크기를 조정할 수 있습니다. 다른 글꼴과 마찬가지로 필요에 따라 더 크거나 작게 만들 수 있습니다. 다른 텍스트 필드에서도 아이콘 글꼴을 예술적 요소로만 사용하세요.

글꼴 아이콘 사용의 장점과 단점

1. 장점

• CSS에 해당 클래스가 존재하는 한 아이콘 크기 조정이 쉽습니다.

• 기존 클래스를 쉽게 얻을 수 있습니다. 인터넷 대형 아이콘 라이브러리

• 웹 사이트 구축에 무엇을 사용하든 아이콘 속성을 쉽게 변경할 수 있습니다.

• 웹 사이트 디자인의 모든 페이지에 아이콘을 추가하는 것은 쉽습니다(아이콘 이름만 삽입하면 됩니다).

• 선택할 수 있는 다양한 스타일의 수천 개의 아이콘

• 더 높은 수준의 사용자 정의가 필요한 경우 자신만의 아이콘 글꼴을 만들 수도 있습니다.
  

2. 단점

• 아이콘은 단색 또는 그라데이션입니다(대부분의 경우 더 많은 사용자 정의 옵션을 제공하는 일부 서비스에서 이를 변경하고 있음).

• 아이콘 글꼴을 로드할 수 없는 경우 다음이 있습니다. 사용할 수 있는 다른 대체 글꼴이 없습니다.

• 전체 아이콘 세트가 필요하지 않을 수 있습니다.

• 일부 브라우저는 아직 아이콘 글꼴을 지원하지 않거나 완전히 지원하지 않습니다. 귀하의 요구에 맞습니다.

• 
  

글꼴 아이콘을 얻는 방법에는 두 가지가 있습니다.

알리바바 벡터 아이콘 공식 웹사이트: www.iconfont.cn (권장)

• 외국 웹사이트: http://icomoon.io

• 
  

글꼴 아이콘은 어떻게 사용하나요?

해당 외국 웹사이트의 로딩 속도가 느리기 때문에 여기서는 Alibaba에서 제공하는 아이콘 라이브러리를 데모용으로 사용합니다
(1) 브라우저에서 iconfont를 검색하고 Alibaba 벡터 아이콘 라이브러리 공식 웹사이트를 찾은 다음 등록합니다. 이전에 등록한 경우 이 단계를 건너뛰세요.

(2) 아이콘 라이브러리로 마우스를 이동하면 드롭다운 목록이 있으며 공식 아이콘 라이브러리를 선택하세요.

(3) 라이브러리 목록에서 첫 번째 아이콘을 클릭하고 새 페이지를 열고 즐겨찾는 아이콘을 라이브러리에 추가하세요.

라이브러리에 추가:

(4) 장바구니와 같은 아이콘이 있습니다. 라이브러리에 추가하는 오른쪽 상단 모서리에 모든 글꼴 아이콘이 있습니다.

(5) 프로젝트에 추가하려면 클릭하세요.

그러면 웹 페이지가 자동으로 다음으로 이동합니다. 그림과 같이 해당 프로젝트:

로컬로 다운로드: (가장 중요한 단계)

다운로드하고 압축을 푼 파일은 다음과 같습니다.

(6) 프로젝트에서 글꼴 아이콘을 사용하는 방법은 실제로 매우 간단합니다. i 태그 또는 스팬 태그를 사용하려면 클래스 이름을 추가하고 해당 코드 콤플렉스를 태그에 붙여넣으세요.

이 데모_index.html을 열고 표시된 대로 다음 코드 문자열을 복사하세요.

그런 다음 iconfont.css를 css 폴더에 붙여넣습니다. 이는 내 프로젝트 폴더와 해당 코드입니다.

구글 크롬에서 볼 수 있는 글꼴 아이콘입니다(글꼴이 너무 작다고 생각되면 글꼴 크기 속성을 통해 조절할 수 있습니다).

관련 추천: "html 비디오 튜토리얼"

위 내용은 html5의 글꼴 아이콘은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!