사용자 인터페이스 요소에서 아이콘을 사용하는 것이 도움이됩니다. 요소 라벨링 외에도 아이콘은 사용자에게 사용자 요소의 의도를 강화하는 데 도움이 될 수 있습니다. 그러나 나는 웹을 탐색하는 동안 약간의 아이콘 오정렬을 발견해야합니다. 아이콘의 정렬이 정확하더라도 요소가 변경 될 때 아이콘이 종종 잘 응답하지 않습니다.
나는 몇 가지 실제 예제를 기록했으며 어떻게 개선했는지에 대한 내 생각을 나누고 싶습니다. 이 기술이 다른 사람들이 타이포그래피 변경을 더 잘 수용하고 디자인의 원래 목표를 유지하면서 사용자 인터페이스 요소를 구축하는 데 도움이되기를 바랍니다.
대중 미디어 웹 사이트 에서이 메시징 예제를 찾았습니다. 아이콘의 위치는 그렇게 나쁘지 않습니다. 그러나 글꼴 크기 및 라인 높이와 같은 요소의 스타일 속성을 변경하면 풀기 시작합니다.
우리는 아이콘의 상단 가장자리가 파란색 점선에 있기를 원하지만 종종 아이콘의 상단 가장자리를 빨간색 점선에서 찾습니다.
텍스트 옆에 아이콘을 삽입 한 적이 있습니까? 텍스트 상단에 정렬되지 않습니까? 위치와 같은 것으로 아이콘을 제자리로 움직일 수 있습니다. 상단 : 0.2EM. 이것은 충분히 잘 작동하지만 미래에 타이포그래피 스타일이 변경되면 아이콘이 잘못 정렬 된 것처럼 보일 수 있습니다.
우리는 아이콘을 더 안정적으로 배치 할 수 있습니다. 요소의 기준선 거리 (한 줄의 기준선에서 다음 라인의 기준선까지의 거리)를 사용하여이를 해결해 봅시다.
기준 거리는 글꼴 크기 * 라인 높이 입니다.
CSS 사용자 정의 속성에 저장하겠습니다.
-Baselinedistance : calc (var (-fontsize) * var (-lineHeight));
그런 다음 (기준 거리 - 글꼴 크기) / 2 의 결과를 사용하여 아이콘을 아래로 이동할 수 있습니다.
-ICONOFFSET : calc ((var (-baselinedistance)-var (-fontsize)) / 2);
글꼴 크기의 1REM (16px)과 1.5 라인 높이가 있으면 아이콘이 4 픽셀로 이동됩니다.
내가 찾은 두 번째 예는 정렬되지 않은 목록입니다. a :: pseudo element를 통해 아이콘에 웹 글꼴 (Font Awesome)을 사용합니다. 순서대로 목록과 비정규 목록을 모두 스타일링하는 데 많은 훌륭한 기사가 있었으므로 비교적 새로운 :: 마커 의사 요소 등에 대한 자세한 내용을 보지 못할 것입니다. 웹 글꼴은 일반적으로 사용 된 아이콘에 따라 아이콘 정렬과 잘 작동 할 수 있습니다.
우리는 또한 우리의 솔루션에서 의사 요소를 사용할 것이기 때문에 절대 포지셔닝을 활용합니다. 이 예제의 아이콘 크기는 인접한 사본보다 약간 큽니다 (약 2x). 이 때문에 아이콘의 상단 위치를 계산하는 방법을 변경합니다. 아이콘의 중심은 첫 번째 줄의 중심과 수직으로 정렬해야합니다.
기준 거리 계산부터 시작하십시오.
-Baselinedistance : calc (var (-fontsize) * var (-lineHeight));
(기준 거리 - 아이콘 크기) / 2 의 결과를 사용하여 아이콘을 아래로 이동하십시오.
-ICONOFFSET : calc ((var (-baselinedistance)-var (-iconsize)) / 2);
따라서 1REM (16px)의 글꼴 크기, 1.6의 선 높이 및 아이콘 크기의 2 배 (32px)의 아이콘은 상위 값 -3.2 픽셀을 얻게됩니다.
2REM (32px)의 글꼴 크기가 더 크면 1.2 라인 높이 및 64px 아이콘이 있으므로 아이콘은 -12.8 픽셀의 최고 값을 얻게됩니다.
사용자 인터페이스 아이콘의 경우 많은 옵션과 기술이 있습니다. SVG, 웹 글꼴, 정적 이미지, :: 마커 및 목록 스타일 유형이 있습니다. 배경색과 클립 경로를 사용하여 흥미로운 아이콘 결과를 달성 할 수도 있습니다. 간단한 계산을 수행하면 아이콘을보다 우아한 방식으로 정렬하고 스케일링하는 데 도움이 될 수있어 약간 더 방탄이됩니다.
참조 : 아이콘을 텍스트에 맞추는 것에 대한 이전 토론.
위 내용은 타이포그래피 정렬 및 스케일로 UI 요소의 아이콘 개선의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!