뷰포트를 기반으로 CSS Clamp ()로 글꼴 크기를 선형 스케일

반응 형 타이포그래피는 과거에 미디어 쿼리 및 CSS calc ()과 같은 많은 방법을 시도했습니다.

이 기사는 다른 접근법을 탐색 할 것입니다.이 접근법은 뷰포트 너비가 증가함에 따라 최소 크기와 최대 크기 사이에서 선형으로 텍스트를 확장하는 것입니다. clamp() 덕분에 CSS 코드의 한 줄만으로도 동작이 다른 화면 크기에서 더 예측할 수 있습니다.

CSS 함수 clamp() 는 강력합니다. 그것은 모든 목적에 맞지만 타이포그래피에 특히 유용합니다. 다음과 같이 작동합니다. 세 가지 값을 수락합니다.

 <code>clamp(minimum, preferred, maximum);</code>

선호하는 값이 최소값보다 낮을 때까지 (최소값이 반환 됨) 최대 값 (최대 값이 반환 됨)보다 우선 값이 선호되는 값이됩니다.

따라서 이상한 값을 설정하지 않고 최소값과 최대 값 사이에서 설정하지 않는다고 가정하면 항상 선호되는 값입니까? 글쎄, 당신은 예를 들어 선호되는 값을 가진 공식을 사용해야합니다.

 <code>.banner { width: clamp(200px, 50% 20px, 800px); /* 是的，您可以在clamp() 中进行数学运算！*/ }</code>

뷰포트 너비가 360px 이하일 때 요소의 최소 글꼴 크기를 1 REM으로 설정하고 뷰포트 너비가 840px 이상인 경우 최대 글꼴 크기가 3.5 REM이라고 가정 해 봅시다.

다시 말해서:

 <code>1rem  = 360px 及以下缩放= 361px - 839px 3.5rem = 840px 及以上</code>

361에서 839 픽셀 사이의 모든 뷰포트 너비에는 1REM과 3.5REM 사이에 선형 스케일링이 필요한 글꼴 크기가 필요합니다. clamp() 사용하는 것은 실제로 매우 쉽습니다 ! 예를 들어, 뷰포트 너비는 600 픽셀 (360 ~ 840 픽셀)으로 1REM과 3.5REM, 즉 2.25REM 사이의 중간 값을 얻게됩니다.

clamp() 로 달성하려는 목표를 선형 보간 이라고합니다. 두 데이터 포인트 사이에 중간 정보를 얻습니다.

다음은 다음을 수행하는 4 가지 단계입니다.

1 단계

최소 및 최대 글꼴 크기와 최소 및 최대 뷰포트 너비를 선택하십시오. 이 예에서는 글꼴 크기가 1REM 및 3.5REM이고 너비는 360px 및 840px입니다.

2 단계

폭을 REM으로 변환합니다. 대부분의 브라우저의 1REM은 기본적으로 16px이므로 (나중에 자세히 설명) 사용합니다. 따라서 최소 및 최대 뷰포트 너비는 각각 22.5 rem 및 52.5 rem입니다.

3 단계

여기서 우리는 수학 측면에 약간 편향 될 것입니다. 결합되면 뷰포트 너비와 글꼴 크기는 X 및 Y 좌표 시스템에서 두 가지 점을 형성 하며이 지점은 라인을 형성합니다.

우리는이 라인이 필요합니다. 더 구체적으로, 우리는 경사면과 y 축과의 교차점이 필요합니다. 계산 방법은 다음과 같습니다.

 <code>slope = (maxFontSize - minFontSize) / (maxWidth - minWidth) yAxisIntersection = -minWidth * slope minFontSize</code>

이로 인해 우리는 경사 값이 0.0833이고 y 축 교차 값 -0.875로 이어집니다.

4 단계

이제 우리는 clamp() 함수를 빌드합니다. 선호하는 값의 공식은 다음과 같습니다.

 <code>preferredValue = yAxisIntersection[rem] (slope * 100)[vw]</code>

따라서 기능은 다음과 같이 끝납니다.

 <code>.header { font-size: clamp(1rem, -0.875rem 8.333vw, 3.5rem); }</code>

다음 시연에서 결과를 시각화 할 수 있습니다.

계속 가서 시도해보십시오. 보시다시피, 뷰포트 너비가 840px 인 경우 글꼴 크기가 증가하고 뷰포트 너비가 360px 인 경우 글꼴 크기가 줄어 듭니다. 선형적인 방식으로 변화하는 것 사이의 모든 것.

사용자가 루트 글꼴 크기를 변경하면 어떻게됩니까?

이 접근법에서는 작은 결함을 발견했을 것입니다. 루트 글꼴 크기가 생각하는 것 (이전 예제에서 16px)이면서도 변하지 않습니다.

우리는 이것이 루트 글꼴 크기라고 가정하기 때문에 너비 360px와 840px를 16으로 나누어 rem 단위로 변환합니다. 사용자가 기본 16px 대신 18px와 같은 다른 루트 글꼴 크기로 선호를 설정하면 계산이 잘못되고 텍스트가 예상대로 크기가 크게 조정되지 않습니다.

여기에는 사용하는 한 가지 방법 만 있습니다. (1) 페이지가로드 될 때 코드에서 필요한 계산을 수행하고 (2) 루트 글꼴 크기의 변경 사항을 듣고 (3) 변경 사항이 발생하면 모든 것을 다시 계산합니다.

다음은 계산을 수행하는 데 유용한 자바 스크립트 기능입니다.

 // 픽셀에서 뷰포트 너비와 rem 함수 클램프 빌더에서 글꼴 크기를 가져옵니다 (Minwidthpx, maxWidthpx, minfontsize, maxfontsize) {
  const root = document.querySelector ( "html");
  const pixelsperrem = number (getComputedStyle (root) .fontsize.slice (0, -2));

  const minwidth = minwidthpx / pixelsperrem;
  const maxwidth = maxwidthpx / pixelsperrem;

  const slope = (maxfontsize -minfontsize) / (maxwidth -minwidth);
  const yaxisintersection = -minwidth * slope minfontsize;

  `클램프 ($ {minfontsize} rem, $ {yaxisintersection} rem $ {slope * 100} vw, $ {maxfontsize} rem)`;
}

// ClampBuilder (360, 840, 1, 3.5) -> "Clamp (1rem, -0.875rem 8.333vw, 3.5rem)"

귀하의 요구에 따라이를 수행하는 방법과 기본 CSS, CSS-in-JS 라이브러리 또는 다른 것을 사용하는지 여부에 따라 반환 된 문자열을 CSS에 주입하는 방법을 의도적으로 생략했습니다. 또한 글꼴 크기 변경에 대한 기본 이벤트가 없으므로 수동으로 확인해야합니다. setInterval 사용하여 1 초를 확인할 수 있지만 이는 성능에 영향을 줄 수 있습니다.

이것은 극단적 인 상황과 비슷합니다. 브라우저의 글꼴 크기를 바꾸는 사람은 거의 없으며 웹 사이트를 방문 할 때는 더 적은 사람이 변경합니다. 그러나 귀하의 웹 사이트가 가능한 한 반응을 보이기를 원한다면 이것이 최선의 방법입니다.

극단적 인 상황을 신경 쓰지 않는 사람들에게

업데이트 : 이 기사가 처음 출판 된 이후 여기에서 공유 된 리소스는 작동이 중단되었습니다. 다양한 뷰포트에서 글꼴 크기를 결정하는 데 도움이되는 계산기를 찾고 있다면 현대식 유체 타이포그래피를 사용하는 유체 유형 발전기 사용을 고려하십시오.

텍스트 재 조정을 피하는 방법

타이포그래피 크기에 대한 세심한 제어를 통해 텍스트가 다른 뷰포트 너비에서 재 조정을 방지하는 것과 같은 다른 멋진 작업을 수행 할 수 있습니다.

이것은 텍스트의 정상적인 동작입니다.

그러나 이제 우리의 제어를 통해 우리는 텍스트를 동일한 수의 줄을 유지할 수 있으며, 어떤 뷰포트 너비에 관계없이 항상 같은 단어로 줄을 랩핑 할 수 있습니다.

그렇다면 어떻게해야합니까? 첫째, 글꼴 크기와 뷰포트 너비의 비율은 동일하게 유지되어야합니다. 이 예에서는 1REM에서 320px에서 960px에서 3REM에서 3REM을 변경합니다.

 <code>320 / 1 = 320 960 / 3 = 320</code>

이전에 작성된 clampBuilder() 함수를 사용하면 다음이됩니다.

 const text = document.querySelector ( "P");
text.style.fontsize = ClampBuilder (320, 960, 1, 3);

동일한 너비 대 글꼴 비율을 유지합니다. 우리 가이 작업을 수행하는 이유는 텍스트가 동일한 수의 행을 유지할 수 있도록 텍스트가 각 너비에 올바른 크기를 갖도록해야하기 때문입니다. 그것은 여전히 ​​다른 너비로 재조정 될 것이지만, 이것은 우리가해야 할 다음 작업에 필요합니다.

이제 올바른 글꼴 크기를 갖는 것만으로는 충분하지 않기 때문에 CSS 캐릭터 (CH) 장치로부터 도움을 받아야합니다. CH 단위는 요소 글꼴에서 글리프 "0"의 너비와 동일합니다. 우리는 텍스트 본문을 width: 100% 설정하는 것이 아니라 width: Xch 사용하여 뷰포트만큼 넓게 만들고 싶습니다.

X를 찾으려면 뷰포트 너비가 320px 일 때 최소 뷰포트 너비 320px를 글꼴 크기에서 요소의 CH 크기로 나누어야합니다. 이 경우 1 rem입니다.

걱정하지 마십시오. 요소의 CH 크기를 계산하는 코드 스 니펫이 있습니다.

 // 원하는 글꼴 크기에서 요소의 "0"glyph (픽셀)의 너비를 반환합니다.
함수 calculatech (요소, fontsize) {
  const zero = document.createelement ( "span");
  Zero.innerText = "0";
  Zero.style.position = "절대";
  Zero.style.fontsize = fontsize;

  요소. AppendChild (0);
  const chpixels = Zero.getBoundingClientRect (). 너비;
  요소 .removeChild (0);

  반환 chpixels;
}

이제 우리는 텍스트의 너비를 계속 설정할 수 있습니다.

 함수 calculatech (요소, fontsize) {...}

const text = document.querySelector ( "P");
text.style.fontsize = ClampBuilder (320, 960, 1, 3);
text.style.width =`$ {320 / calculatech (text, "1rem")} ch`;

와우, 잠깐. 나쁜 일이 일어났습니다. 물건을 엉망으로 만드는 수평 스크롤 막대가 있습니다!

우리가 320px에 대해 이야기 할 때, 우리는 수직 스크롤 바를 포함하여 뷰포트의 너비에 대해 이야기하고 있습니다. 따라서 텍스트의 너비는 가시 영역의 너비와 스크롤 막대의 너비로 설정되어 수평으로 오버플로됩니다.

그렇다면 수직 스크롤 막대의 너비를 포함하지 않는 측정 값을 사용하지 않는 이유는 무엇입니까? 우리는 CSS VW 장치 때문일 수 없습니다. clamp() 에서 VW를 사용하여 글꼴 크기를 제어하고 있습니다. VW에는 수직 스크롤 바의 너비가 포함되어있어 스크롤 바를 포함한 뷰포트 너비와 함께 글꼴 스케일을 만듭니다. 재 조정을 피하려면 폭이 스크롤 막대를 포함하여 뷰포트 너비에 비례해야합니다.

그래서 우리는 무엇을해야합니까? 우리가 할 때 :

 text.style.width =`$ {320 / calculatech (text, "1rem")} ch`;

… 결과를 1. 0.9 미만으로 곱하여 결과를 좁힐 수 있습니다. 문제를 해결할 수 있습니다. 이것은 텍스트의 너비가 뷰포트 너비의 90%가 될 것이며, 이는 스크롤 바가 취하는 작은 공간을 보충하기에 충분할 것임을 의미합니다. 작은 숫자를 사용하여 좁을 수 있습니다 (예 : 0.6).

 함수 calculatech (요소, fontsize) {...}

const text = document.querySelector ( "P");
text.style.fontsize = ClampBuilder (20, 960, 1, 3);
text.style.width =`$ {320 / calculatech (text, "1rem") * 0.9} ch`;

스크롤 바를 무시하기 위해 320에서 몇 픽셀을 빼는 경향이 있습니다.

 text.style.width =`$ {(320-30) / calculatech (text, "1rem")} ch`;

이를 수행하는 데 문제가있는 문제는 재정 지정 문제를 복원한다는 것입니다! 320에서 빼면 뷰포트 대 글꼴 비율이 파괴되기 때문입니다.

텍스트의 너비는 항상 뷰포트 너비의 백분율이어야합니다. 또 다른 점은 사이트를 사용하는 모든 장치에 동일한 글꼴을로드해야한다는 것입니다. 이것은 분명하게 들리지 않습니까? 글쎄, 여기 당신의 텍스트를 벗어날 수있는 작은 세부 사항이 있습니다. font-family: sans-serif 모든 브라우저에서 동일한 글꼴이 사용되는 것을 보장하지는 않습니다. sans-serif Chrome에서 Windows 용 Arial을 설정하지만 Android 용 Chrome의 Roboto를 설정합니다. 또한 일부 글꼴의 형상은 모든 것을 올바르게 수행하더라도 재 조정을 유발할 수 있습니다. Monowidth Fonts는 최상의 결과를 얻는 경향이 있습니다. 따라서 글꼴이 정확한지 확인하십시오.

다음 데모 에서이 비율이 아닌 예제를 참조하십시오.

컨테이너의 비실화 텍스트

우리가 지금해야 할 일은 텍스트 요소가 아닌 컨테이너에 글꼴 크기와 너비를 적용하는 것입니다. 그것의 텍스트는 width: 100% . 단락 및 제목의 경우 블록 레벨 요소 자체이며 컨테이너의 너비를 자동으로 채우기 때문에 필요하지 않습니다.

부모 컨테이너 에이 방법을 적용 할 때의 장점 중 하나는 어린이가 글꼴 크기와 너비를 하나씩 설정하지 않고 자동으로 응답하고 크기를 조정한다는 것입니다. 또한 다른 요소에 영향을 미치지 않고 단일 요소의 글꼴 크기를 변경 해야하는 경우 글꼴 크기를 EM 값으로 변경하며 자연스럽게 컨테이너의 글꼴 크기와 관련이 있습니다.

비율이 아닌 텍스트는 까다 롭지 만 디자인에 좋은 결과를 가져올 수있는 미묘한 효과입니다!

요약

요약하면, 나는 실제 시나리오 에서이 모든 것이 어떻게 보이는지에 대한 작은 데모를 만들었습니다.

이 마지막 예에서는 루트 글꼴 크기를 변경할 수 있으며 clamp() 함수는 자동으로 다시 계산하여 텍스트가 어쨌든 올바른 크기를 갖도록합니다.

이 기사의 목표는 글꼴 크기를 가진 clamp() 사용하는 것이지만,이 동일한 기술을 사용하여 길이 단위의 CSS 속성을 수신 할 수 있습니다. 자, 나는 당신이 어디서나 그것을 사용해야 한다고 말하는 것이 아닙니다. 여러 번, 좋은 font-size: 1rem 는 충분합니다. 필요할 때 얼마나 많은 컨트롤을 가질 수 있는지 보여 드리고 싶습니다.

개인적으로, 나는 clamp() 가 CSS에서 가장 좋은 것 중 하나라고 믿고 있으며, 사람들이 점점 더 널리 사용되면서 사람들이 무엇을 할 것인지 기다릴 수 없습니다!

위 내용은 뷰포트를 기반으로 CSS Clamp ()로 글꼴 크기를 선형 스케일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!