주어진 텍스트를 깨지 않는 가장 큰 글꼴 크기를 어떻게 찾습니까?

StackOverflow https://stackoverflow.com/questions/158710

  •  03-07-2019
  •  | 
  •  

문제

나는 CSS를 사용하려고 노력하고있다.아래에 @media print) 및 JavaScript는 주어진 너비 안에 여전히 맞는 동안 가능한 한 큰 텍스트 조각으로 1 페이지짜리 문서를 인쇄하는 JavaScript. 텍스트의 길이는 미리 알려지지 않으므로 단순히 고정 된 넓은 글꼴을 사용하는 것은 옵션이 아닙니다.

다시 말해서, 나는 "iiii"가 "wwwww"보다 훨씬 큰 글꼴 크기로 나올 수 있도록 적절한 크기 조정을 찾고 있습니다. -Width 글꼴.

내가 이것으로 얻을 수 있었던 가장 가까운 것은 JavaScript를 사용하여 다양한 글꼴 크기를 시도하는 것입니다. clientWidth 충분히 작습니다. 이것은 스크린 매체에 충분하지만 인쇄 매체로 전환 할 때, 90 DPI가 내 시스템에 들어있는 것으로 보이는 보장이 있습니까 (즉, 마진을 한쪽으로 0.5 인치로, 텍스트가 그 안에 맞도록 크기가 조정되면 약 675를 얻을 수 있습니다. clientWidth) 다른 곳에서 동일할까요? 브라우저는 픽셀 측정에서 변환 할 때 사용할 DPI를 어떻게 결정합니까? JavaScript를 사용 하여이 정보에 액세스 할 수있는 방법이 있습니까?

이것이 단지 CSS3 기능이라면 나는 그것을 좋아할 것이다 (font-size:max-for-width(7.5in)) 그러나 그것이 있다면, 나는 그것을 찾을 수 없었습니다.

도움이 되었습니까?

해결책 3

Here's some code I ended up using, in case someone might find it useful. All you need to do is make the outer DIV the size you want in inches.

function make_big(id) // must be an inline element inside a block-level element
{
    var e = document.getElementById(id);
    e.style.whiteSpace = 'nowrap';
    e.style.textAlign = 'center';
    var max = e.parentNode.scrollWidth - 4; // a little padding
    e.style.fontSize = (max / 4) + 'px'; // make a guess, then we'll use the resulting ratio
    e.style.fontSize = (max / (e.scrollWidth / parseFloat(e.style.fontSize))) + 'px';
    e.style.display = 'block'; // so centering takes effect
}

다른 팁

CSS 글꼴 크기 속성은 수락합니다 길이 단위 여기에는 인치 또는 센티미터의 절대 측정이 포함됩니다.

절대 길이 단위는 출력 매체에 크게 의존하므로 상대 단위보다 덜 유용합니다. 다음 절대 장치를 사용할 수 있습니다.

  • (인치; 1in = 2.54cm)
  • cm (센티미터; 1cm = 10mm)
  • MM (밀리미터)
  • PT (포인트; 1pt = 1/72in)
  • PC (picas; 1pc = 12pt)

텍스트가 아직 몇 문자인지 알지 못하므로 글꼴 크기 속성을 올바르게 설정하려면 JavaScript와 CSS의 조합을 사용해야 할 수도 있습니다. 예를 들어, 문자열의 길이를 문자로 가져 가서 8.5를 문자 수로 나누고 (문자 수 크기 용지를 기대한다고 가정) 크기를 인치 단위로 제공하여 글꼴 크기를 해당 덩어리로 설정합니다. 텍스트. Firefox, Safari 및 IE6에서 절대 측정으로 글꼴 크기를 테스트하여 휴대가 가능해야합니다. 도움이되기를 바랍니다.

편집하다: 글꼴 크기 설정이 실제로 문자의 너비가 아니기 때문에 사용하는 글꼴을 실험하고 사용하는 글꼴을 실험하고 실험 한 글을 사용하여 실험해야 할 수도 있습니다. 글자 간격 및 글꼴로 길이에 비례합니다. 아, 그리고 Monospace 글꼴을 사용하면 도움이됩니다;)

나는 CSS에서 이것을하는 방법을 모른다. 가장 좋은 방법은 JavaScript를 사용하는 것입니다.

  1. 텍스트를 div에 넣습니다
  2. div의 크기를 얻으십시오
  3. 필요한 경우 텍스트를 더 작게 만드십시오
  4. 텍스트가 충분히 작을 때까지 2 단계로 돌아갑니다.

여기에 있습니다 샘플 코드 DIV의 크기를 감지합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top