¿Cómo establecer el tamaño de fuente según el tamaño del contenedor?

Tengo un contenedor que tiene un% de ancho y alto, por lo que se escala en función de factores externos. Me gustaría que la fuente dentro del contenedor tuviera un tamaño constante en relación con el tamaño de los contenedores. ¿Hay alguna buena forma de hacer esto usando CSS? El font-size: x%sólo habría escalar la fuente de acuerdo con el tamaño de la fuente original (que sería 100%).

Es posible que pueda hacer esto con CSS3 usando cálculos, sin embargo, lo más probable es que sea más seguro usar JavaScript.

Aquí hay un ejemplo: http://jsfiddle.net/8TrTU/

Usando JS puede cambiar la altura del texto, luego simplemente vincular este mismo cálculo a un evento de cambio de tamaño, durante el cambio de tamaño para que se escale mientras el usuario está haciendo ajustes, o sin embargo, está permitiendo el cambio de tamaño de sus elementos.

Si desea establecer el tamaño de fuente como un porcentaje del ancho de la ventana gráfica, use la vwunidad:

#mydiv { font-size: 5vw; }

La otra alternativa es usar SVG incrustado en el HTML. Serán solo unas pocas líneas. El atributo de tamaño de fuente del elemento de texto se interpretará como "unidades de usuario", por ejemplo, aquellas en las que se define la ventana gráfica. Entonces, si define la ventana gráfica como 0 0 100 100, entonces un tamaño de fuente de 1 será una centésima parte del tamaño del elemento svg.

Y no, no hay forma de hacer esto en CSS usando cálculos. El problema es que los porcentajes utilizados para el tamaño de fuente, incluidos los porcentajes dentro de un cálculo, se interpretan en términos del tamaño de fuente heredado, no del tamaño del contenedor. CSS podría usar una unidad llamada bw(box-width) para este propósito, por lo que podría decir div { font-size: 5bw; }, pero nunca escuché esta propuesta.

Otra alternativa de js:

Ejemplo de trabajo

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

O como se indica en la respuesta de torazaburo, puede usar svg. Reuní un ejemplo simple como prueba de concepto:

Ejemplo de SVG

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

Solía Fittext en algunos de mis proyectos y se ve como una buena solución a un problema como este.

FitText hace que los tamaños de fuente sean flexibles. Use este complemento en su diseño fluido o receptivo para lograr titulares escalables que llenen el ancho de un elemento principal.

No se puede lograr con css font-size

Suponiendo que los "factores externos" a los que se refiere podrían ser recogidos por las consultas de medios, podría utilizarlos; los ajustes probablemente tendrán que limitarse a un conjunto de tamaños predefinidos.

Aquí está la función:

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

Luego, convierta todos los tamaños de fuente de los elementos secundarios de sus documentos a em o%.

Luego agregue algo como esto a su código para establecer el tamaño de fuente base.

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

http://jsfiddle.net/0tpvccjt/

Tuve un problema similar, pero tuve que considerar otros problemas que el ejemplo de @ apaul34208 no abordó. En mi caso;

• Tengo un contenedor que cambió de tamaño dependiendo de la ventana gráfica mediante consultas de medios
• El texto interior se genera dinámicamente
• Quiero escalar tanto como hacia abajo

No es el ejemplo más elegante, pero me funciona. Considere la posibilidad de limitar el cambio de tamaño de la ventana ( 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/

He dado una respuesta más detallada sobre el uso vwcon respecto al tamaño específico del contenedor en esta respuesta , por lo que no repetiré mi respuesta aquí.

En resumen, sin embargo, es esencialmente una cuestión de factorizar (o controlar) cuál será el tamaño del contenedor con respecto a la ventana gráfica, y luego determinar el vwtamaño adecuado basado en eso para el contenedor, teniendo en cuenta lo que debe suceder. si algo cambia de tamaño dinámicamente.

Entonces, si quisiera un 5vwtamaño en un contenedor al 100% del ancho de la ventana gráfica, entonces 75%probablemente le gustaría tener uno en el ancho de la ventana gráfica (5vw * .75) = 3.75vw.

Si desea escalarlo según el ancho del elemento, puede usar este componente web:
https://github.com/pomber/full-width-text

Consulte la demostración aquí:
https://pomber.github.io/full-width-text/

El uso es así:

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

También puede probar este método CSS puro:

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