Как рассчитать размер шрифта?

Я использую теги HTML для своего веб-сайта.Как рассчитать размер шрифта?

У меня есть один HTML <table> с фиксированной высотой 150px. Содержимое таблицы заполняется динамическим с использованием 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

Саркастически: я всегда использую теги для веб-сайтов ;-) – Mouser

расчет на основе чего? Чего вы пытаетесь достичь? говоря, что вы хотите рассчитать размер шрифта, не означает много – atmd

Я рекомендую JQuery-плагин "FitText". (http://fittextjs.com/)

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

Это автоматически изменяет размер шрифта в DIV в зависимости от его ширины.

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

источник

2015-01-09 10:39:34

Пожалуйста, объясните свой ответ, как это решает проблему OP? – Mouser

Что такое проблема OP? Он не сказал, что хочет, чтобы текст соответствовал его родителям? – atmd

@atmd - да Я хочу поместить все символы в

tag – 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.

Fiddle: http://jsfiddle.net/b5yebL0k/

источник

2015-01-09 10:43:54 Mouser

Это не возвращает правильное значение - это возврат 1.534 .. что-то не правильное :( – prog1011

Нужно работать над ним. Идея – Mouser

@ прог, я думаю, что это должно сделать это более или менее. Это все еще приближение, а не точный расчет. – Mouser

Вот решение, его не велика, но даст вам хочу, чтобы вы хотите

Во-первых, вам нужно создать элемент с 'visibility:hidden;display:inline; как его стиль (CSS или инлайн, Безразлично Для этого примера не имеет значения. Элементу нужен текст, который вы хотите измерить.

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

затем в скриптах:

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

Затем, если вы используете text.offsetWidth вы получите ширину элемента Вы можете создать цикл в JavaScript, чтобы увеличить размер шрифта до offSetWidth равна ширине таблицы.

выше разве отличный способ делать вещи, но это даст вам именно то, что вы ищете, независимо от типа шрифта или веса и т.д.

источник

2015-01-09 10:55:37 atmd

Смежные вопросы