Ответственный размер шрифта с помощью CSS/jQuery

Я хочу создать отзывчивый текст внутри div.Ответственный размер шрифта с помощью CSS/jQuery

Я пробовал jquery-textfill и FlowType, но они не работают для меня вообще.

FlowType не использует все доступное пространство, только часть его (demo), в то время как textfill не уважает высоту (demo).

Я использую их небрежно или то, что я хочу, слишком сложно достичь?

Мой HTML:

<body> 
    <div class="external"> 
     <div class="internal">Example</div> 
    </div>  
</body>

Мой CSS:

.internal{width:100%;height:100%} 
.external{width:400px;height:50px;}

PS. Видимости пока недостаточно.

источник

2014-09-09 dev9

Можете ли вы описать, что вы имеете в виду под "отзывчивым текст"? Как он должен отвечать точно? – flowstoneknight

EDIT: Обновлено resize прослушиватель событий. Обновлено fiddle.

Как я понимаю, вы хотите, чтобы текст был как можно большим, все еще подгоняя внутри содержащего <div>, правильно? Мое решение состоит в том, чтобы поместить текст <span> вокруг текста, который соответствует нормальному размеру текста. Затем рассчитайте соотношения между размерами контейнера и размерами <span>. Какое бы ни было меньшее (ширина или высота), используйте это соотношение для увеличения текста.

HTML:

<div class="container"> 
    <span class="text-fitter"> 
     text here 
    </span> 
</div>

JS (Jquery):

textfit(); 
$(window).on('resize', textfit); 

function textfit() { 
    $('.text-fitter').css('font-size', 'medium'); 
    var w1 = $('.container').width()-10; 
    var w2 = $('.text-fitter').width(); 
    var wRatio = Math.round(w1/w2 * 10)/10; 

    var h1 = $('.container').height()-10; 
    var h2 = $('.text-fitter').height(); 
    var hRatio = Math.round(h1/h2 * 10)/10; 

    var constraint = Math.min(wRatio, hRatio); 

    $('.text-fitter').css('font-size', constraint + 'em'); 
}

Вот fiddle. Отрегулируйте размеры .container в CSS, чтобы увидеть его в действии.

источник

2014-09-09 12:19:24 flowstoneknight

Да, это то, что я хотел. Хотя, я думаю, мы должны также добавить слушателя JS, чтобы реагировать на изменение размера окна браузера. – dev9

@ dev9 Опять же, вам нужно быть немного более конкретным. Что изменится при изменении размера окна? В вашем вопросе '.external' имеет ширину набора (400 пикселей), поэтому он не изменится при изменении размера, поэтому размер текста также не изменится. Пожалуйста, опишите, что вы хотите. «Реагировать на изменение размера» слишком расплывчато. – flowstoneknight

Я хочу, что вы опубликовали. Трудность в том, что я не контролирую '.external' div, поэтому он должен работать, если его размер установлен на определенное значение ИЛИ если его размер установлен на' auto' или 'x%' – dev9

CSS

.internal{width:100%;height:100%} 
.external{width:auto;height:auto;background-color:yellow}

JQuery

$(".external").fitText(0.5);

DEMO 1

Update 1:

CSS

.internal{width:auto;height:auto;position:absolute;} 
.external{width:400px;height:50px;background-color:yellow;position:relative;}

JQuery

$(".external").fitText();

DEMO 2

Update 2:

JQuery

var ex=$(".external"); 
var h=ex.height(); 
var w=ex.width(); 
ex.fitText(Math.min(h,w)/Math.max(h,w));

DEMO 3

Update 4:

BigText текстовый плагин JQuery, который автоматически увеличить размер шрифта текста, чтобы заполнить его родительский контейнер, без переполнения контейнера Div. jQuery Bigtext Plugin

источник

2014-09-09 10:42:32 Hamix

Я не хочу делать это АВТО. Это будет виджет для сторонних пользователей. Некоторые из них, вероятно, назначат некоторое постоянное значение HEIGHT или WIDTH. – dev9

См. «Обновление 1» в моем ответе. – Hamix

Я изменил высоту, и она не работает. Http://jsfiddle.net/FXL9k/149/ – dev9

Для тех, кто наткнулся на эту старую должность, я нашел решение, которое я считаю совершенным.

Вы берете этот красивый плагин, написанный Дейвом Рупертом, настраиваете настройки по своему вкусу, и я добавил для этого обертку, которая позволяет вам определять элементы, которые вы хотите изменить. Он также сохраняет исходный размер шрифта, поэтому, когда вы масштабируете резервную копию, текст ограничен его оригинальным размером, иначе он масштабируется без ограничений.

Вот фрагмент и jsfiddle. JSFiddle

ПРИМЕЧАНИЕ: фрагмент работает только при изменении размера в JSFiddle, поэтому не забудьте изменить размер экрана. В производстве он работает на нагрузке.

var headings = [$('h1'), $('h2'), $('h3')] 

    $.each(headings, function(index, heading) { 

    var fontsize = heading.css('font-size'); 
    $(window).on('load resize', function() { 
     if (heading.parent()[0] && 
     heading.parent()[0].scrollWidth > $('.container').innerWidth()) { 
     heading.fitText(1, { 
      minFontSize: '10px', 
      maxFontSize: fontsize 
     }); 
     } 
    }); 
    }); 


    /*global jQuery */ 
    /*! 
    * FitText.js 1.2 
    * 
    * Copyright 2011, Dave Rupert http://daverupert.com 
    * Released under the WTFPL license 
    * http://sam.zoy.org/wtfpl/ 
    * 
    * Date: Thu May 05 14:23:00 2011 -0600 
    */ 

    $.fn.fitText = function(kompressor, options) { 
    // Setup options 
    var compressor = kompressor || 1, 
     settings = $.extend({ 
     'minFontSize': Number.NEGATIVE_INFINITY, 
     'maxFontSize': Number.POSITIVE_INFINITY 
     }, options); 
    return this.each(function() { 
     // Store the object 
     var $this = $(this); 
     // Resizer() resizes items based on the object width divided by the compressor * 10 
     var resizer = function() { 
     $this.css('font-size', Math.max(Math.min($this.width()/(compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 
     }; 
     // Call once to set. 
     resizer(); 
     // Call on resize. Opera debounces their resize by default. 
     $(window).on('resize.fittext orientationchange.fittext', resizer); 
    }); 
    };

.container { 
    width: 80vw; 
    background: yellow; 
} 

h1 { 
    font-size: 5rem; 
} 

h2 { 
    font-size: 4rem; 
} 

h3 { 
    font-size: 3rem; 
} 

h4 { 
    font-size: 1rem; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
    <h1>GIGANTICFONT</h1> 
</div> 
<div class="container"> 
    <h2>LargishFont</h2> 
</div> 
<div class="container"> 
    <h3>Mediumfont</h3> 
</div> 
<div class="container"> 
    <h4>smallfont</h4> 
</div>

источник

2017-06-26 12:10:11 Blanknewkid

Ответственный размер шрифта с помощью CSS/jQuery

ответ

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