적응 가능한 글꼴

역사적으로 글꼴의 무거움과 스타일은 별개의 글꼴 파일로 분리되어 지금까지 디자이너는 각 스타일에 대해 별도의 파일을 업로드해야 했습니다. 적응형 글꼴을 통해 단일 글꼴의 모든 변형이 하나의 파일로 통합되어 사이트 성능이 향상되고 디자이너가 향상된 권위와 적응성을 통해 글꼴 스타일을 개인화할 수 있습니다.

이 교육 세션에서 귀하는 다음을 이해하게 됩니다:

1. 적응형 글꼴의 개념 
2. 적응형 글꼴 및 글꼴 수정 활용
3. 글꼴 변형을 사용하여 애니메이션 전환 생성
4. 글꼴 수정을 통한 상호 작용 개발 
5. 자주 묻는 질문과 해결책

적응형 글꼴의 개념 

적응형 글꼴은 단지 하나의 스타일이나 인스턴스가 아닌 전체 글꼴 모음(예: Open Sans, Roboto Flex 등)을 포함하는 글꼴입니다. 이전에는 디자이너가 다양한 글꼴 두께(예: Light 100, Bold 700 등)에 액세스하기 위해 여러 글꼴 파일이 필요했는데, 이는 디자인에서 제한된 세분성만 허용하고 사이트 성능을 저하시킬 수 있는 방법이었습니다. 적응형 글꼴은 글꼴 모음 범위 내의 모든 가중치를 포함하므로 디자이너는 더욱 복잡하고 정밀하게 글꼴 스타일을 맞춤 설정할 수 있습니다. 

빠른 팁: 다음과 같은 플랫폼을 통해 적응형 글꼴을 찾을 수 있습니다. Google 글꼴, V-폰트, 그리고 폰테스크. 

또한 적응형 글꼴은 이전에 디자이너가 접근할 수 없었던 여러 축(예: 글꼴 속성)에 대한 제어 기능을 제공합니다. 글꼴의 인식되고 예측 가능한 속성(무거움, 폭, 시각적 크기, 기울기 및 기울임꼴)을 감독하는 5가지 일반적인 축이 있지만 적응형 글꼴에는 유형 디자이너가 선택한 글꼴의 다른 디자인 요소를 지시하는 개인화된 축도 포함될 수 있습니다. 예를 들어 글꼴의 부드러움, 획 두께의 얇은 정도, 어센더의 높이 등이 있습니다. 

적응형 글꼴 및 글꼴 변형 활용

시작하기 전에: 이전에 맞춤형 적응형 글꼴을 업로드했는지 확인하세요. 사이트 설정 > 글꼴 탭. 다음과 같은 플랫폼을 통해 적응형 글꼴을 찾는 것이 가능합니다. Google 글꼴, V-폰트, 그리고 폰테스크. 사용자 정의 글꼴 업로드에 대해 자세히 알아보세요. 

중대한: Webflow는 TTF, OTF, WOFF 및 WOFF2 형식의 적응형 글꼴을 유지합니다. EOT 및 SVG 형식은 지원되지 않습니다. 

적응형 글꼴을 사용하고 글꼴 변형을 구성하려면 다음을 수행하세요. 

1. 디자이너 캔버스에서 스타일을 지정하려는 타이포그래피 구성 요소(예: 제목, 텍스트 링크 등)를 선택하세요.
2. 다음으로 이동하세요. 스타일 패널 > 타이포그래피 > 폰트 드롭다운에서 적응 가능한 글꼴을 지정합니다. 맞춤 글꼴 
3. 옆에 있는 텍스트 상자를 클릭하세요. 변형 글꼴 변형 메뉴를 공개하려면
4. 슬라이더를 이동하거나 각 변형 옆에 값을 수동으로 입력하여 선호하는 글꼴 변형(예: 무거움, 너비 등)을 조정하세요.

"를 인식함으로써 적응형 글꼴을 신속하게 식별할 수 있습니다.점'라는 문구가 글꼴 선택기 옆에 표시됩니다. 지원하는 변형 수에 대한 추가 세부정보는 글꼴 선택기에서 '점.”

명심하세요: 글꼴 무거움을 설정하면 스타일 패널 > 타이포그래피 섹션을 클릭한 후 두께 축에 글꼴 변형을 추가하면 글꼴 변형이 이전에 지정된 글꼴 두께를 대체합니다. 

중대한: 글꼴 변형을 조정하고 다른 글꼴로 전환하면 원래 글꼴에 대해 이전에 수정한 모든 글꼴이 지워집니다.

유용한 힌트: 다양한 미디어 쿼리("중단점") 또는 상위 요소에 대해 고유한 글꼴 변형을 정의하여 모든 하위 텍스트 요소에 글꼴 변형을 구현할 수 있습니다. 다른 타이포그래피 특성(예: 글꼴 모음, 글꼴 크기, 색상 등)과 마찬가지로 글꼴 변형은 상속 가능한 속성입니다.

글꼴 변형 메뉴를 시작하고 제거하려는 변형(예: 두께, 너비 등) 위로 마우스를 가져간 다음 '를 눌러 글꼴 변형을 제거할 수 있습니다.쓰레기” 아이콘입니다.

글꼴 변형을 사용하여 애니메이션 전환을 설정하는 방법

또한 다양한 요소 상황(예: 플로팅 오버, 포커스 등)에 맞게 글꼴 변형을 디자인하고 기본 상황("없음")과 대체 상황 사이에서 생생한 전환을 구성할 수 있습니다.

알림: 애니메이션 전환을 디자인하는 동안 접근성에 대해 주의를 기울이고 갑작스럽거나 예상치 못한 또는 과도한 움직임을 피하십시오. 세심한 움직임과 애니메이션 활용에 대해 자세히 알아보세요.

특정 상황에 맞는 글꼴 변형을 개발하려면:

1. 서식을 지정하려는 요소를 가리킵니다.
2. 열기 스타일 패널 > 선택자 필드
3. 이미 적용된 클래스나 태그가 없는 경우 요소에 장르를 부여하거나 해당 HTML 태그를 선택하세요.
4. 다음을 클릭하세요. 아래쪽을 가리키는 화살표 을 펼치다 상태 드롭다운을 클릭하고 디자인하려는 상황(예: 호버, 누름, 집중 등)을 선택하세요.
5. 로 이동 스타일 패널 > 타이포그래피 가변 글꼴을 선택합니다(선택한 요소에 대해 이전에 글꼴이 설정되지 않았거나 선택한 상황에서 전체 글꼴 모음을 변경하려는 경우).
6. 옆에 있는 텍스트 상자를 누르세요. 변형 글꼴 변형 메뉴 공개
7. 컨트롤러를 슬라이드하거나 각 수정자 옆에 값을 수동으로 입력하여 원하는 글꼴 변경 사항(예: 높이, 너비 등)을 선택하세요.

알림: 다음 항목에 액세스할 수 없습니다. 상황 선택한 요소에 클래스나 HTML 태그가 할당되지 않은 경우 드롭다운입니다.

다음으로 기본 상태와 대체 상태 사이의 전환을 위한 애니메이션 전환을 고안할 수 있습니다. 애니메이션 전환을 공식화하려면 다음을 수행하십시오.

1. 대체 상태에 대한 글꼴 변형을 만들려면 앞서 언급한 단계를 따르세요.
2. 확장 스타일 패널 > 선택자 필드
3. 탭하세요. 아래쪽을 가리키는 화살표 공개하다 상황 드롭다운에서 '없음'을 선택하세요.
4. 향하다 스타일 패널 > 효과 그리고 “...을 더한” 아이콘 옆에 전환
5. 원하는 전환 효과(예: 글꼴 색상, 글꼴 변형 등)를 통합하세요.
6. 지정 지속 전환 효과
7. '를 탭하세요.이징 편집기 열기” 아이콘을 사용하여 개인화 완화, 만약 원한다면

글꼴 변형과 상호 작용을 생성하는 방법

상호 작용은 또한 가변 글꼴을 지원하므로 글꼴 변형을 사용하여 고유한 애니메이션을 공식화할 수 있습니다.

알림: 애니메이션을 구성하는 동안 접근성에 대해 신중하게 생각하고 갑작스럽거나 갑작스럽거나 과도한 움직임을 우회하세요. 의도적인 움직임과 애니메이션을 사용하는 방법에 대해 자세히 알아보세요.

글꼴 변형과의 상호 작용을 제작하려면 다음을 수행하십시오.

1. 시작하다 상호 작용 패널
2. “를 클릭하세요....을 더한” 아이콘을 추가하여 요소 트리거 (예: 마우스 오버, 스크롤하여 보기 등) 또는 페이지 트리거 (예: 페이지 로드, 페이지 스크롤 등)
3. 펼치다 행동 시작 작업 세그먼트의 드롭다운(즉, 마우스 호버 요소 트리거를 선택한 경우 행동 드롭다운에서 호버링 시 분절)
4. 아래에서 애니메이션을 선택하세요. 맞춤 애니메이션
5. 맞춤형 애니메이션을 제작하고 선택하세요. 글꼴 변형 아래의절차 섹션 > 바라보다 위로 형식 변형 부분
6. 다음으로 이동하세요. 서체 변형 옆에 있는 상자를 선택하고 변형 서체 변형 설정을 표시하려면
7. 컨트롤을 이동하거나 각 변형 옆에 값을 입력하여 선호하는 서체 조정(예: 무거움, 넓이 등)을 조정하세요.

FAQ 및 문제 해결 힌트 

내 디자인에 적합한 서체를 어디에서 찾을 수 있나요? 

다음과 같은 플랫폼을 통해 적응형 서체를 발견할 수 있습니다. Google 글꼴, V-폰트, 그리고 폰테스크.

적응형 서체와 호환되는 글꼴 파일 형식은 무엇입니까? 

Webflow는 TTF, OTF, WOFF 및 WOFF2 형식의 적응 가능한 서체를 수용합니다. EOT 및 SVG 형식은 지원되지 않습니다. 

사용자 정의 글꼴에 허용되는 최대 크기는 얼마입니까? 

파일당 최대 4MB의 글꼴을 업로드할 수 있습니다.

이 기능이 도입되기 전에는 유연한 글꼴을 업로드했는데 변형을 추가할 수 없습니다. 서체 변형을 어떻게 포함할 수 있나요? 

로 진행 사이트 설정 > 글꼴 탭을 클릭하고 적응형 글꼴을 지우고 적응형 글꼴 파일을 다시 업로드하세요. 그런 다음 디자이너에서 사이트에 액세스할 때 서체 변형을 추가할 수 있어야 합니다! 

Google Fonts 또는 Adobe Fonts 통합을 통해 적응형 글꼴을 선택했지만 서체 변형에 액세스할 수 없습니다. 서체 변형을 어떻게 추가할 수 있나요? 

현재 Google 글꼴 또는 Adobe Fonts 통합을 통해 서체 변형에 액세스할 수 없습니다. 글꼴 통합에서 글꼴을 다운로드하거나 조달하고 다음에서 사용자 정의 글꼴로 업로드할 수 있습니다. 사이트 설정 > 글꼴 탭을 사용하여 서체 변형을 활용하세요. 사용자 정의 글꼴에 대해 자세히 알아보세요.

새로운 서체 변형 축으로 글꼴이 업그레이드되기 전에 적응형 글꼴을 업로드했습니다. 새 축에 서체 변형을 어떻게 추가할 수 있나요?

새로운 서체 변형 축을 활용하려면 글꼴을 다시 업로드해야 합니다. 향하다 사이트 설정 > 글꼴 탭에서 적응형 글꼴을 삭제하고 적응형 글꼴 파일을 다시 업로드하세요.

일부 축 레이블이 예상대로 표시되지 않는 이유는 무엇입니까? 

Designer에 표시되는 서체 변형 축의 레이블은 업로드된 적응형 글꼴 파일에 따라 달라집니다. 적응형 글꼴의 유형 디자이너에 인간 친화적인 레이블이 포함되어 있지 않은 경우 Webflow는 기본적으로 축 태그를 사용합니다.

서체 변형은 어떻게 정렬되나요? 여러 서체 변형이 동일한 축을 공유할 수 있습니까? 

서체 변형은 CSS 사양을 준수하므로 동일한 축에서 수많은 수정이 있을 수 있습니다. 적용된 CSS에서는 계층 구조에서 가장 낮은 축이 우선 적용됩니다. 예를 들어, 후속 서체 변형을 고안한 경우: 

경사: 0

중량감: 146

폭: 300

광학 크기: 18

무거움: 1000 

서체에 적용되는 최종 "무거움"은 1000입니다. 

"기울임" 축과 "기울임꼴" 축의 차이점은 무엇입니까? 

이탤릭체와 경사 축은 밀접하게 연결되어 있지만 경사 축은 기울어진 스타일이나 직립 스타일에 대한 글꼴 파일의 경사 속성을 관리하는 반면, 이탤릭체는 필기체 스크립트의 영향을 받는 경사 스타일과 구별되는 프레임워크를 나타냅니다. 경사축에 대해 자세히 알아보기.