글꼴 크기를 계산하는 방법은 무엇입니까?

내 웹 사이트에 HTML 태그를 사용하고 있습니다.글꼴 크기를 계산하는 방법은 무엇입니까?

고정 된 높이 150px의 HTML <table>가 있습니다. 테이블 내용은 JavaScript를 사용하여 동적으로 채워집니다.
아래 그림과 같이 테이블 텍스트 내용에 동적font-size을 설정하고 싶습니다.

가 나는 또한 문자

HTML

<table style="height:150px;width:350px;"> 
    <tr> 
     <td> 
     bla....bla...bla... /* I want to set this font size dynamic*/ 
     <td> 
    </tr> 
    <tr> 
     <td> 
     bla....bla...bla... /* I want to set this font size dynamic*/ 
     <td> 
    </tr> 
</table>

그러나 문제가의 총 수를 가지고, 내가 적용해야 공식을 모른다. 제발 도와주세요 - font-size을 설정하기 위해 적용해야하는 공식에 따라 길이에 따라 문자의 총 개수가 있습니다. over lapping없이 스크롤하지 않고 모든 문자를 표에 맞춰야합니다.

감사합니다.

출처

2015-01-09 prog1011

, 당신이 우리가 생각하게? – adeneo

Sarcastically : 나는 항상 웹 사이트의 개 태그를 사용합니다 .-) – Mouser

계산은 무엇을 기반으로합니까? 무엇을 성취하려고합니까? 당신이 글꼴 크기를 계산하고 싶지 않다는 말은 많이하지 않습니다. – atmd

나는 "FitText"라는 jQuery 플러그인을 권장합니다. (http://fittextjs.com/)

$("table tr td").fitText();

div의 글꼴 크기가 너비에 따라 자동으로 변경됩니다.

jsFiddle는 : http://jsfiddle.net/vay0tf33/

출처

2015-01-09 10:39:34

대답을 설명하십시오. 어떻게 이것이 OP의 문제를 해결합니까? – Mouser

OP의 문제점은 무엇입니까? 그는 텍스트가 부모에게 적합하다고 말하지 않았다. – atmd

@atmd - 예 모든 문자를 넣을 수 있습니다

태그 – prog1011

당신은 테이블 안에있는 문자의 폭을 계산해야합니다. 내용을 범위로 감싸고 너비를 픽셀 단위로 계산하는 함수로이를 수행 할 수 있습니다. 그런 다음 해당 함수의 결과를 테이블의 너비로 나눕니다. 이것은 당신에게 행을 가져다 줄 것입니다. 픽셀 높이를 행으로 나눠서 최대 글꼴 크기를 픽셀 단위로 가져와야합니다.

function calculateFontSize(width, height, content){ 
    var area = width*height; 
    var contentLength = content.length(); 

    return Math.sqrt(area/contentLength); //this provides the font-size in points. 

}

주의 사항 :

이 기능은 일반 텍스트 입력을 필요로한다. @atmd는 폰트 크기를 근사 할 수 있다고 말했다. 글꼴 크기는 점 pt이어야합니다.

바이올린 : 여기

출처

2015-01-09 10:43:54 Mouser

반환 값이 정확하지 않습니다 - 반환 값 1.534 .. 올바르지 않은 값 :( – prog1011

아이디어가 필요합니다 – Mouser

@ prog, 나는 이것이 더 많거나 적게해야한다고 생각합니다. 그것은 여전히 근사치이며 정확한 계산이 아닙니다. – Mouser

http://jsfiddle.net/b5yebL0k/이 해결책이 아니 훌륭하지만 당신은 당신이 먼저

당신의 스타일 (CSS 또는 인라인으로 'visibility:hidden;display:inline;와 요소를 만드는 데 필요한 것

을 원하는 원하는 줄 것이다, 아무튼 이 예제에서는 중요하지 않음). 요소에는 측정하려는 텍스트가 필요합니다. 스크립트에서 다음

<p id='hidden' style='visibility:hidden;display:inline;'>some thing here</p>

: 다음

var text = document.getElementById('hidden'); // id of hidden element

당신은 당신이 당신은 다음의 offsetWidth 때까지 글꼴 크기를 증가시키기 위해 자바 스크립트 루프를 만들 수있는 요소 의 폭을 얻을 것이다 text.offsetWidth 사용하는 경우 표 너비와 같습니다.

위의 밤은 당신에 관계없이 글꼴 종류 나 무게 등의 찾고있는 정확하게 당신을 줄 것이다하지만 일을하는 좋은 방법

수식을 모르는 경우

출처

2015-01-09 10:55:37 atmd

글꼴 크기를 계산하는 방법은 무엇입니까?

답변

관련 문제