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

Ответ 1

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

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

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

Ответ 2

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

#mydiv { font-size: 5vw; }

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

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

Ответ 3

Другая альтернатива 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 answer, вы можете использовать svg. Я привел простой пример в качестве доказательства концепции:

Пример SVG

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

Ответ 4

Он не может выполнить css font-size

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

Ответ 5

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

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

Я надеюсь, что это будет полезно для вас.: D

Ответ 6

Вот функция:

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/

Ответ 7

У меня была аналогичная проблема, но мне пришлось рассмотреть другие проблемы, которые @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>

Ответ 8

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

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

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

Ответ 9

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

Проверьте демо:
https://pomber.github.io/full-width-text/

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

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

Ответ 10

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

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