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

У мене є контейнер, який має% ширини та висоти, тому він масштабується залежно від зовнішніх факторів. Я хотів би, щоб шрифт всередині контейнера був постійним розміром щодо розміру контейнерів. Чи є якийсь хороший спосіб зробити це за допомогою CSS? font-size: x%Б тільки масштабувати шрифт в відповідності з початковим розміром шрифту (який був би 100%).

Можливо, ви зможете зробити це за допомогою CSS3 за допомогою розрахунків, проте скоріше за все було б безпечніше використовувати JavaScript.

Ось приклад: http://jsfiddle.net/8TrTU/

Використовуючи JS, ви можете змінити висоту тексту, а потім просто прив’язати цей самий розрахунок до події зміни розміру, під час зміни розміру, щоб вона масштабувалась, коли користувач робить коригування, або, однак, ви дозволяєте змінювати розмір ваших елементів.

Якщо ви хочете встановити розмір шрифту як відсоток від ширини області перегляду, використовуйте vwодиницю:

#mydiv { font-size: 5vw; }

Інша альтернатива - використання SVG, вбудованого в HTML. Це буде лише кілька рядків. Атрибут розміру шрифту для текстового елемента буде інтерпретований як "користувацькі одиниці", наприклад ті, які область перегляду визначена в термінах. Отже, якщо ви визначите область перегляду як 0 0 100 100, тоді розмір шрифту 1 становитиме одну соту розміру елемента svg.

І ні, в CSS це неможливо зробити за допомогою розрахунків. Проблема полягає в тому, що відсотки, використані для розміру шрифту, включаючи відсотки всередині розрахунку, інтерпретуються з точки зору успадкованого розміру шрифту, а не розміру контейнера. CSS може використовувати для цього одиницю, що називається bw(box-width), так що ви можете сказати 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);