CSS의 아이콘폰트 사용에 대한 자세한 설명

이 튜토리얼에서는 CSS에서 아이콘 글꼴을 사용하는 방법을 자세히 설명합니다

아이콘 글꼴 첫 소개

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

처음에는 나오지 않았던 후대 단어인 iconfont도 있는데, 좀 더 듣기 좋게 들리기를 바라는 웹페이지 제작자나 학자들이 제시하는 프리젠테이션 레이어입니다.

그래서 Alibaba의 iconfont 아이콘 튜토리얼을 보면 다음과 같습니다.

1단계: Font-face를 사용하여 글꼴 선언

@font-face {font-family : 'iconfont';
src: url('iconfont.eot') /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), / * IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), / * 크롬, 파이어폭스, 오페라, 사파리, 안드로이드, iOS 4.2+*/
url('iconfont.svg#uxiconfont') format('svg') /* iOS 4.1- */
}

2단계: iconfont를 사용하여 스타일 정의

.iconfont{
font-family: "iconfont" !important
font-size:16px;font-style:normal; ;
-webkit-font-smoothing: 앤티앨리어싱;
-webkit-text-Stroke-width: 0.2px;
-moz-osx-font-smoothing: greyscale;}

3단계: 해당 아이콘을 선택하고 글꼴 인코딩을 얻어 페이지에 적용합니다.

#x33

효과는 다음과 같습니다

그러나 Iconfont에는 몇 가지 단점이 있습니다.

브라우저에서는 앤티앨리어싱 최적화를 위해 이를 텍스트로 처리하며 때로는 효과가 상상만큼 선명하지 않습니다. 특히, 서로 다른 시스템에서 텍스트에 대한 서로 다른 앤티앨리어싱 알고리즘으로 인해 표시 효과가 달라질 수 있습니다.
아이콘 글꼴 글꼴로서 아이콘 표시의 크기와 위치는 글꼴 크기, 줄 높이, 단어 간격 등과 같은 CSS 속성에 영향을 받을 수 있습니다. 아이콘이 위치한 컨테이너의 CSS 스타일이 아이콘의 위치에 영향을 주어 조정이 불편할 수 있습니다.
이용에 불편함이 있습니다. 첫째, 수백 개의 아이콘이 포함된 아이콘 글꼴을 로드하지만 그 중 몇 개만 사용하면 로드 시간이 낭비됩니다. 아이콘 폰트를 직접 만들어서 여러 아이콘 폰트에 사용되는 아이콘을 하나의 폰트로 통합하는 것도 매우 불편합니다. 물론 Alibaba UX 벡터 아이콘 라이브러리를 사용하면 이 문제를 해결할 수 있습니다.
최대 브라우저 지원을 달성하기 위해 최소 4가지 유형의 글꼴 파일이 제공될 수 있습니다. TTF, WOFF, EOT 및 SVG 형식을 사용하여 정의된 글꼴이 포함됩니다. 직접 만들면 머리가 아프실 수도 있습니다

위 내용은 CSS에서 아이콘폰트를 사용하는 방법에 대한 자세한 설명입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요. )!