웹 폰트 아이콘 : 이미지의 대안

직면하자 : 이미지 편집 소프트웨어를 사용하여 수많은 작은 아이콘을 만드는 것은 지루합니다. CSS에서 수많은 작은 파일을 관리하거나 이미지 스프라이트를 빌드 및 슬라이싱하면 불필요한 복잡성이 추가됩니다. 고맙게도 HTML5는 더 나은 솔루션을 제공합니다 : WebFonts. 글꼴 세트에는 표준 문자와 함께 그래픽 아이콘이 포함될 수 있습니다. Wingdings는 친숙한 예이지만 Iconic과 같은 무료 옵션은 더 큰 유틸리티를 제공하고 샘플 HTML 및 CSS를 제공합니다. Webfont Icon Demo 페이지를 참조하십시오 ... 글꼴을 선택하거나 생성 한 후 최적의 크로스 브라우저 호환성을 위해 다양한 형식으로 변환하십시오. Fontsquirrel.com의 @font-face 생성기는이 프로세스를 단순화하여 필요한 모든 글꼴 및 CSS가있는 ZIP 파일을 제공합니다. 다음과 같이 글꼴을 CSS로 가져옵니다

는 html에 아이콘 문자를 직접 삽입 할 수 있지만 (예 : Iconic의 RSS 아이콘의 경우 'r') 화면 리더 액세스 가능성을 방해 할 수 있습니다. CSS 의사 요소는보다 포괄적 인 접근법입니다 당신의 html :

<code class="language-css">@font-face {
    font-family: "IconicStroke";
    src: url("iconic_stroke.eot");
    src: url("iconic_stroke.woff") format("woff"), 
    url("iconic_stroke.ttf") format("truetype"), 
    url("iconic_stroke.otf") format("opentype"), 
    url("iconic_stroke.svg#iconic") format("svg");
}</code>

귀하의 CSS :

WebFont 아이콘의 장점 :

확장 성과 커스터마이징 :

CSS 효과를 크게 조정하고, 다시 변환하고, 적용 할 수 있습니다. 광범위한 호환성 :

IE6과 같은 오래된 브라우저를 포함하여 우수한 크로스 브라우저 지원. 효율성 :

<code class="language-html"><a href="https://www.php.cn/link/50d7f99947b472cc889d58845b9d23e2">RSS Feed</a></code>

단일 글꼴 파일은 종종 효율성의 여러 이미지 파일을 능가합니다.

WebFont Icons의 단점 :

<code class="language-css">.rss:before {
    font-family: "IconicStroke";
    content: "r";
}</code>

단일 색 제한 : 아이콘은 본질적으로 단일 색상입니다 (CSS3은 이것을 완화 할 수 있지만). 글꼴 생성 복잡성 : 폰트 생성 PNG 또는 SVG를 생성하는 것만 큼 간단하지 않습니다. 파일 크기 고려 사항 : 소수의 아이콘의 경우 이미지 파일이 더 적을 수 있습니다.

전반적으로 WebFont 아이콘은 상당한 장점을 제공하며 개발 시간을 실질적으로 줄일 수 있습니다. 프로젝트에 통합 했습니까? Webfont Icon Demo 페이지를 참조하십시오 ...

자주 묻는 질문 :
• 제공된 FAQ 섹션은 이미 잘 구조화되고 포괄적입니다. 명확성과 정확성을 유지하기 위해 변경이 필요하지 않습니다

위 내용은 웹 폰트 아이콘 : 이미지의 대안의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!