как установить размер шрифта в зависимости от размера контейнера?

У меня есть контейнер с шириной и высотой%, поэтому он масштабируется в зависимости от внешних факторов. Я хочу, чтобы шрифт внутри контейнера имел постоянный размер относительно размера контейнеров. Есть ли хороший способ сделать это с помощью CSS? Он font-size: x%будет масштабировать шрифт только в соответствии с исходным размером шрифта (который будет составлять 100%).

Вы можете сделать это с помощью CSS3, используя вычисления, однако, скорее всего, будет безопаснее использовать JavaScript.

Вот пример: http://jsfiddle.net/8TrTU/

Используя JS, вы можете изменить высоту текста, а затем просто привязать этот же расчет к событию изменения размера, во время изменения размера, чтобы он масштабировался, пока пользователь вносит изменения, или, как бы то ни было, вы разрешаете изменение размера ваших элементов.

Если вы хотите установить размер шрифта в процентах от ширины области просмотра, используйте vwединицу:

#mydiv { font-size: 5vw; }

Другой альтернативой является использование SVG, встроенного в HTML. Это будет всего лишь несколько строк. Атрибут font-size для текстового элемента будет интерпретироваться как «пользовательские единицы», например те, в терминах которых определяется область просмотра. Таким образом, если вы определяете область просмотра как 0 0 100 100, тогда размер шрифта 1 будет составлять одну сотую размера элемента svg.

И нет, в CSS это невозможно сделать с помощью вычислений. Проблема в том, что проценты, используемые для font-size, включая проценты внутри вычислений, интерпретируются в терминах унаследованного размера шрифта, а не размера контейнера. CSS мог бы использовать bwдля этой цели единицу, называемую (ширина поля), можно сказать div { font-size: 5bw; }, но я никогда не слышал, чтобы это предлагалось.

Еще одна альтернатива js:

Рабочий пример

fontsize = function () {
    var fontSize = $("#container").width() * 0.10; // 10% of container width
    $("#container h1").css('font-size', fontSize);
};
$(window).resize(fontsize);
$(document).ready(fontsize);

Или, как указано в ответе torazaburo, вы можете использовать svg. В качестве доказательства концепции я собрал простой пример:

Пример SVG

<div id="container">
    <svg width="100%" height="100%" viewBox="0 0 13 15">
        <text x="0" y="13">X</text>
    </svg>
</div>

Я использовал Fittext в некоторых своих проектах, и это похоже на хорошее решение такой проблемы.

FitText делает размеры шрифтов гибкими. Используйте этот плагин в своем гибком или адаптивном макете, чтобы получить масштабируемые заголовки, заполняющие ширину родительского элемента.

Это не может быть достигнуто с помощью CSS размера шрифта

Предполагая, что «внешние факторы», о которых вы говорите, могут быть уловлены медиа-запросами, вы можете их использовать - корректировки, вероятно, придется ограничить набором предопределенных размеров.

Вот функция:

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

Затем преобразуйте все размеры шрифта дочерних элементов ваших документов в em или%.

Затем добавьте что-то подобное в свой код, чтобы установить базовый размер шрифта.

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

У меня была аналогичная проблема, но мне пришлось рассмотреть другие проблемы, которые не удалось решить в примере @ apaul34208. В моем случае;

• У меня есть контейнер, размер которого менялся в зависимости от области просмотра с помощью медиа-запросов
• Текст внутри создается динамически
• Я хочу как увеличивать, так и уменьшать

Не самый элегантный из примеров, но мне он помогает. Рассмотрите возможность регулирования изменения размера окна ( https://lodash.com/ )

var TextFit = function(){
	var container = $('.container');
  container.each(function(){
    var container_width = $(this).width(),
     	width_offset = parseInt($(this).data('width-offset')),
        font_container = $(this).find('.font-container');
	
     if ( width_offset > 0 ) {
         container_width -= width_offset;
     }
                
    font_container.each(function(){
      var font_container_width = $(this).width(),
          font_size = parseFloat( $(this).css('font-size') );

      var diff = Math.max(container_width, font_container_width) - Math.min(container_width, font_container_width);
 
      var diff_percentage = Math.round( ( diff / Math.max(container_width, font_container_width) ) * 100 );
      
      if (diff_percentage !== 0){
          if ( container_width > font_container_width ) {
            new_font_size = font_size + Math.round( ( font_size / 100 ) * diff_percentage );
          } else if ( container_width < font_container_width ) {
            new_font_size = font_size - Math.round( ( font_size / 100 ) * diff_percentage );
          }
      }
      $(this).css('font-size', new_font_size + 'px');
    });
  });
}

$(function(){
  TextFit();
  $(window).resize(function(){
  	TextFit();
  });
});

.container {
		width:341px;
		height:341px;
		background-color:#000;
		padding:20px;
	}
	.font-container {
		font-size:131px;
		text-align:center;
		color:#fff;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container" data-width-offset="10">
	<span class="font-container">£5000</span>
</div>

https://jsfiddle.net/Merch80/b8hoctfb/7/

В этом ответе я дал более подробный ответ об использовании в vwотношении конкретного размера контейнера. , поэтому я не буду просто повторять здесь свой ответ.

Вкратце, однако, по сути, это вопрос факторинга (или контроля) того, каким будет размер контейнера относительно области просмотра, а затем разработка правильного vw размера на основе этого для контейнера, принимая во внимание то, что должно произойти. если что-то динамически изменяется.

Итак, если вам нужен 5vwразмер контейнера, равный 100% ширины области просмотра, то 75%вы, вероятно, захотите иметь размер в размере, равном ширине области просмотра (5vw * .75) = 3.75vw.

Если вы хотите масштабировать его в зависимости от ширины элемента, вы можете использовать этот веб-компонент:
https://github.com/pomber/full-width-text

Посмотрите демонстрацию здесь:
https://pomber.github.io/full-width-text/

Использование такое:

<full-width-text>Lorem Ipsum</full-width-text>

Вы также можете попробовать этот чистый метод CSS:

font-size: calc(100% - 0.3em);