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

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

#mydiv { font-size: 5vw; }

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

и нет, нет никакого способа сделать это в CSS с помощью вычислений. Проблема заключается в том, что проценты, используемые для размера шрифта, включая проценты внутри вычисления, интерпретируются в терминах унаследованного размера шрифта, а не размера контейнера. 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>

Это не может быть выполнено с помощью css размер шрифта

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

Я Fittext на некоторых из моих проектов, и это выглядит как хорошее решение проблемы, как это.

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

вот функция:

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 в отношении конкретного размера контейнера в ответ, поэтому я не буду просто повторять свой ответ здесь.

в целом, однако, это по существу вопрос факторинга (или управления), что размер контейнера будет по отношению к viewport, а затем разработка правильного 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);