CSS3의 글꼴 사용 예 요약-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3의 글꼴 사용 예 요약

伊谢尔伦

Jun 11, 2017 am 09:56 AM

모든 브라우저는 이제 IE6을 포함한 CSS3 사용자 정의 글꼴(@font-face)을 지원하지만 글꼴 파일 형식에 대한 지원은 다릅니다. 따라서 웹 사이트에서 사용되는 다양한 아이콘에 대해 글꼴을 사용해 볼 수 있습니다. 이 기사에서는 이러한 용도로 아이콘을 글꼴로 만들어야 하는 이유에 대해 자세히 설명합니다. 많은 웹사이트 프로젝트에서는 다양한 작은 투명 아이콘을 사용하는 경우가 많습니다. 그런 다음 웹사이트는 다양한 브라우저와 호환되어야 하고 다양한 크기를 가질 수 있으며 스킨 변경 및 기타 요구 사항도 고려해야 합니다. 그런 다음 이러한 작은 아이콘을 png8 알파 투명 또는 png8 인덱스 투명 등과 같은 다양한 크기, 색상 및 파일 형식으로 출력해야 합니다. 예를 들어 Twitter에서 사용하는 다양한 작은 아이콘: 이 경우 글꼴을 사용하여 아이콘을 구현하면 많은 이점이 있습니다. 글꼴 파일은 일반적으로 20-50kb로 편집 및 유지 관리가 쉽고 CSS로 크기와 색상을 제어할 수 있습니다. ; 투명 IE6과 완벽하게 호환됩니다. 아이콘을 글꼴로 바꾸는 방법은 무엇입니까? 가장 중요한 것은 디자인 초안에 있는 아이콘(벡터 경로가 있어야 하고 비트맵은 변환할 수 없음)을 글꼴로 완벽하게 복원하는 것인데 별로 번거롭지 않습니다. 우리는

1을 사용할 것입니다. CSS3는 아이콘 아이콘을 구현하기 위해 글꼴을 사용합니다

CSS3의 글꼴 사용 예 요약

소개: 이제 모든 브라우저가 IE6 지원을 포함하여 CSS3 사용자 정의 글꼴(@font-face)을 지원한다는 것을 누구나 알고 있습니다. 둘 다 있지만 글꼴 파일 형식에 대한 지원은 다릅니다. 그런 다음 웹사이트에서 사용되는 다양한 아이콘에 대해 글꼴을 사용해 볼 수 있습니다. 이 기사에서는 이에 대해 자세히 설명합니다

2 CSS3 글꼴 및 텍스트 효과의 샘플 코드 공유

CSS3의 글꼴 사용 예 요약

소개: CSS3에서는 사용자 정의 글꼴을 사용할 수 있으며 사용자 정의 글꼴을 사용하려면 @font-face 규칙을 사용해야 합니다. 물론 먼저 Payen S.Tsung@font가 있어야 합니다. -face {font-family: myDIYfont; /*사용자 정의 글꼴 이름*/ src: url('Ginga.ttf') /*글꼴 파일*/}.demo

3. 글꼴 사용자 정의 글꼴

CSS3의 글꼴 사용 예 요약

소개: 1. 유니코드 범위란 무엇입니까? 이름만 보면 뭔가 낯설다고 생각하는 친구들이 많을 텐데요. 사실 이 물건은 이름이 좀 이상하기도 하고, 여전히 중요한 기능의 순간에 아주 유용하게 사용됩니다. Unicode-range는 일반적으로 @font-face 규칙과 함께 사용되는 CSS 속성입니다.

4. CSS3을 사용하여 만든 아름다운 둥근 버튼 코드

CSS3의 글꼴 사용 예 요약

소개: CSS3를 사용하여 만든 둥근 버튼입니다. 효과는 매우 단순해 보이지만 실제로는 방사형 그라데이션과 @font-face를 통해 얻은 ICON 효과를 주로 사용하며, 다른 속성의 장식 효과도 포함하지 않습니다. 상자 그림자로 만든 것, 전환으로 만든 애니메이션 효과 등.

5. CSS3 Tutorial-Font

CSS3의 글꼴 사용 예 요약