머티리얼 기호란 무엇인가요?
머티리얼 기호는 Google의 최신 아이콘으로, 2,500개 이상의 글리프를 하나의 다양한 디자인 변형을 포함하는 단일 글꼴 파일을 제공합니다. 기호 사용 가능 국가: 세 가지 스타일과 네 개의 조정 가능한 가변 글꼴 축 (채우기, 두께, 등급 및 광학 크기). 머티리얼 기호의 전체 세트는 다음을 참고하세요. Material 기호 라이브러리.
FILL축
채우기를 사용하면 기본 아이콘 스타일을 수정할 수 있습니다. 하나의 아이콘이 채워지지 않은 상태와 채워진 상태를 모두 렌더링합니다.
상태 전환을 전달하려면 애니메이션 또는 상호작용에 채우기 축을 사용합니다. 값은 0(기본값) 또는 1(완전히 채워진 경우)입니다. 가중치와 함께 채우기는 아이콘의 모양에도 영향을 미칩니다.
wght축
두께는 기호의 획 두께를 정의하며 가중치 범위는 얇게 (100) 및 굵게 (700)로 설정합니다. 가중치는 모델의 전체 크기에도 기호로 구분해야 합니다.
GRAD축
가중치와 등급은 기호의 두께에 영향을 미칩니다. 등급 조정은 다음과 같습니다. 가중치 조정보다 더 세분화되어 표시 영역 크기에 나타냅니다.
성적은 일부 텍스트 글꼴에서도 사용할 수 있습니다. 다음 범위 내에서 학년을 일치시킬 수 있습니다. 조화로운 시각 효과를 위한 텍스트 및 기호 예를 들어 텍스트 글꼴이 등급이 -25인 경우 기호는 적절한 값(예: -25)과 일치시킬 수 있습니다.
성적은 다음과 같은 다양한 요구사항에 따라 사용할 수 있습니다.
낮은 강조 (예: -25등급): 어두운 곳에서 밝은색 기호의 빛 반사를 줄이기 위해 낮은 등급을 사용하세요.
높은 강조 (예: 200등급): 기호를 강조표시하려면 양수를 높입니다. 있습니다.
opsz축
광학 크기는 20dp~48dp입니다.
이미지가 다른 크기에서 동일하게 표시되도록 하려면 획 두께 (두께) 바뀌지 않습니다. 광학 크기를 사용하면 기호 크기를 늘리거나 줄일 때 획 두께를 조정할 수 있습니다.
머티리얼 기호 가져오기
머티리얼 기호는 여러 형식으로 사용할 수 있으며 앱 개발자와 사용자 모두를 위해 모형이나 프로토타입에 사용하는 것이 좋습니다
라이선스
머티리얼 기호는 Apache 라이선스 버전 2.0.
개별 아이콘 탐색 및 다운로드
전체 머티리얼 기호 세트는 Material 기호 라이브러리 SVG 또는 PNG 형식으로 작성할 수 있습니다 웹, Android, iOS에 적합하며 있습니다.
Git 저장소
이 git 저장소 에는 SVG 형식의 머티리얼 기호 전체 세트가 포함되어 있습니다.
$ git clone https://github.com/google/material-design-icons
머티리얼 기호 사용
웹에서 사용
Material Symbols 글꼴은 Material 기호를 통합하는 가장 쉬운 방법입니다. 웹 프로젝트로 가져올 수 있습니다
아이콘은 웹 개발자가 쉽게 작업할 수 있도록 단일 글꼴로 패키징되어 있습니다. 단 몇 줄의 코드로 이러한 아이콘을 통합할 수 있습니다.
Google Fonts를 사용한 정적 글꼴
웹페이지에서 사용할 아이콘 글꼴을 설정하는 가장 쉬운 방법은 Google 글꼴 다음 HTML 한 줄을 포함합니다.
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
위의 스니펫에는 각 축, 다음 코드로 교체합니다. 가중치 400에서 광학 크기 48세, 채점 0점 및 채우기 (0.)
사용 글꼴 CSS API 다른 축 값을 설정할 수 있습니다. 다음 예를 살펴보세요.
<ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">Google Fonts를 사용한 가변 글꼴
CSS를 통해 아이콘을 애니메이션 처리하거나 아이콘 기능을 더 세밀하게 제어하려면
사용할 수 있습니다. number..number 형식의 범위를 사용하면
전체 가변 글꼴을 로드할 수 있습니다. 결제
가변 글꼴 지원을 사용할 수 있나요?
사용자가 가변 글꼴을 로드할 수 있는지 파악하기 위해
가능성이 높습니다. 예를 들면 다음과 같습니다.
아니면 애니메이션을 적용할 수도 있습니다.
<ph type="x-smartling-placeholder">글꼴 자체 호스팅
아이콘 글꼴
를 설정하여 애셋을 업데이트할 시기를 결정합니다. 대상
예를 들어 URL이 https://example.com/material-symbols.woff이면
다음 CSS 규칙을 따릅니다.
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
글꼴을 적절하게 렌더링하려면 아이콘 렌더링을 위한 CSS 규칙을 선언합니다. 이러한 규칙은 일반적으로 Google Fonts API 스타일시트의 일부로 제공되지만 자체 호스팅 시 프로젝트에 수동으로 포함해야 합니다.
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
HTML에서 아이콘 사용
위에 제공된 예에서는 타이포그래피 기능인
합자
이 API를 사용하면 텍스트 이름을 사용하여 아이콘 글리프를 간단하게 렌더링할 수 있습니다. 이
웹 브라우저는 자동으로 텍스트 합자를 아이콘 벡터로 바꾸고
는 상응하는 숫자 문자 참조보다 더 읽기 쉬운 코드를 제공합니다. 대상
예를 들어 HTML에서는 아이콘을 나타내는 arrow_forward이 있습니다.
( 대신) 다른 아이콘의 경우 아이콘 이름의 스네이크 표기법을 사용합니다.
(즉, 공백을 밑줄로 대체)
이 기능은 데스크톱과 모바일의 대부분의 최신 브라우저에서 지원됩니다. 기기에서 사용할 수 있습니다. 자세한 내용은 합자 지원을 사용할 수 있나요? 사용자가 합자를 처리할 수 있는지 확인합니다. 아마도 할 수 있습니다
합자를 지원하지 않는 브라우저를 지원해야 하는 경우에는 숫자 문자 참조 (코드 포인트라고도 함)를 사용하는 아이콘 아래:
<ph type="x-smartling-placeholder">아이콘 이름과 코드 포인트를 모두 Material 기호 라이브러리 아이콘을 선택하고 아이콘 글꼴 패널을 엽니다. 각 아이콘 글꼴에는 Google Fonts의 코드 포인트 색인 git 저장소 전체 이름 및 문자 코드 세트를 보여줍니다.
Material Design에서 아이콘 스타일 지정
이러한 아이콘은 머티리얼 디자인 가이드라인 권장되는 아이콘 크기와 색상을 사용할 때 가장 보기 좋게 표시됩니다. 스타일 아래의 권장 사이즈, 색상 및 활동 상태를 쉽게 적용할 수 있습니다.
<ph type="x-smartling-placeholder">Android에서 사용
머티리얼 기호 라이브러리에서 모든 아이콘은 벡터 드로어블 형식을 사용합니다. 받는사람 자세한 내용은 Android Vector Asset Studio 문서
iOS에서 사용
아이콘은 Apple 기호 형식으로도 사용할 수 있습니다. 자세히 알아보려면 공식 Apple 기호 확인 개요 및 사용 안내를 참고하세요.
Flutter에서 사용
Flutter의 머티리얼 기호 지원이 계획되어 있습니다. 최신 소식을 계속해서 확인해 주시기 바랍니다.