유체 슈퍼 스크립트 및 구독-CSS 튜토리얼-php.cn

유체 슈퍼 스크립트 및 구독

Jennifer Aniston

풀어 주다： 2025-03-07 17:08:10

원래의

755명이 탐색했습니다.

Fluid Superscripts and Subscripts 슈퍼 스크립트 및 하위 스크립트는 학업 및 과학 내용에서 없어서는 안될 요소이며, 화학 공식 및 수학적 표현에 대한 참조에 없어서는 안될 요소입니다. 그러나 브라우저는 이러한 요소를보다 정적으로 처리하여 쉽게 문제를 일으킬 수 있습니다. 모바일 장치에서는 요소가 너무 작고 데스크탑 모니터에서는 너무 클 수 있습니다.

나는 수년간 CSS에서 슈퍼 스크립트 및 첨자의 스케일링 문제를 해결하기 위해 노력해 왔으며 이제는 유체 컴퓨팅을 사용하여 최신 솔루션을 제안합니다. 이 기사는 정적 방법에 단점이있는 이유와 접근성을 유지하면서 모든 뷰포트에 더 나은 타이포그래피를 제공하는 방법을 설명합니다. 무엇 보다도이 솔루션은 간결하고 순수한 CSS 코드 만 필요합니다.

정적 스케일링 문제 줌 문제는 전문 타이포그래피를 브라우저 기본 설정과 비교할 때 특히 눈에 띄게됩니다. 첫 번째 "2"가 전문적으로 설계되고 Glyph 세트에 포함 된이 예제 (Wikipedia에서 조정)를 참조하십시오. 두 번째 "2"는

(상단) 및

(하단) 요소를 사용합니다 :

.
역사적으로, 브라우저는 및 요소에

를 사용했으며, 이는 스케일링의 약 0.83 배입니다. 이는 초기에 CSS가 간단한 문서에서 사용될 때 합리적 이었지만 현대적인 반응 형 디자인에서는 글꼴 크기가 크게 다를 수있어 문제가 발생할 수 있습니다. 이것은 유체 타이포그래피를 사용할 때 특히 그렇습니다. 텍스트 크기는 극한 값 사이에서 부드럽게 조정될 수 있습니다.

_{유체 스케일링 : 더 나은 솔루션
나는 고정 및 비례 단위를 결합하여 다른 크기에 걸쳐 더 자연스럽게 스케일링하는 솔루션을 개발했습니다. 이 접근법은 컨텍스트 별 조정없이 큰 크기로 올바른 비율을 유지하면서 작은 크기의 가독성을 보장합니다. ^{다음은 작동 방식입니다}} 자연 스케일링 : 감소하는 공식은 슈퍼 스크립트와 첨자가 모든 크기에 비례하여 유지되도록합니다.

기준선 정렬 : 및 상대 위치를 사용함으로써 요소가 행 높이에 영향을 미치는 것을 방지하고 특정 요구를 충족시키기 위해 오프셋을 더 잘 제어 할 수 있습니다. 이 값이 어디에서 왔는지 알고 싶을 수도 있습니다. 아래에서 설명하겠습니다. font-size: smaller ^{수학적 분해
작동 방식을 하나씩 분석하겠습니다 :
글꼴 크기 (px) 계산
소형 크기에서 고정 된 4px 구성 요소가 더 큰 영향을 미칩니다. 큰 크기로 0.5EM 비율이 지배적입니다. 결과는 모든 크기에서 더 자연스러운 스케일링입니다.
부모 글꼴 크기를 계산합니다 (EM)} 및 요소 내부에서는 부모의 글꼴 크기를 계산할 수 있습니다. 유체 글꼴 크기는

로 정의됩니다. 0.5EM을 보상하려면 먼저 0.5EM * X = 1EM을 해결하고 x = 2를 가져와야합니다. 여기서 1EM은

및

자체의 글꼴 크기를 나타냅니다. 곱셈 작업 전에 현재 EM 값에서 4px의 고정 구성 요소를 빼냅니다.

수직 오프셋

수직 오프셋의 경우 기본 CSS 포지셔닝 값으로 시작하여 유체 스케일링에 맞게 조정합니다.

이 공식은 표준 브라우저 포지셔닝과 일치하도록 신중하게 교정되었습니다.

0.5EM (SuperScript) 및 0.25EM (첨자)은 기본 수직 오프셋 값 (예 : Tailwind CSS 및 Bootstrap과 같은 프레임 워크에 사용)입니다.

우리는 0.83을 곱하기 위해 브라우저의

sup, sub {
  font-size: calc(0.5em + 4px);
  vertical-align: baseline;
  position: relative; 
  top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(-0.83em + 3.32px) */
}

sub {
  top: calc(0.25 * 0.83 * 2 * (1em - 4px)); 
  /* 简化后：top: calc(0.42em - 1.66px) */
}

로그인 후 복사

스케일링 계수를 고려하여 기본적으로 슈퍼 스크립트 및 구독에 사용됩니다.

이 방법은 유체 스케일링 향상으로 인해 슈퍼 스크립트 및 첨자가 익숙한 수직 위치에 남아 있는지 확인합니다. 결과는 사용자가 기존 브라우저 렌더링에서 기대하는 것과 일치하지만 다른 글꼴 크기로 더 자연스럽게 확장됩니다.