javascript - letra - cómo establecer el tamaño de fuente en función del tamaño del contenedor?

tamaño de letra en css

Question

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

Answer 1

Aquí está la función:

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

A continuación, convierta todos los tamaños de fuente de elementos secundarios de sus documentos a em o%.

A continuación, agregue algo como esto a su código para establecer el tamaño de la fuente base.

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

http://jsfiddle.net/0tpvccjt/

Answer 2

He dado una respuesta más detallada al uso de vw con respecto al tamaño específico de contenedor en esta respuesta , así que no solo voy a 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 calcular el tamaño de vw adecuado en función del contenedor, teniendo en cuenta lo que se necesita suceder si algo se cambia de tamaño dinámicamente.

Entonces, si quería un tamaño de 5vw en un contenedor al 100% del ancho de la ventana gráfica, entonces uno al 75% del ancho de la ventana (5vw * .75) = 3.75vw probablemente quiera ser (5vw * .75) = 3.75vw .

Answer 3

No se puede lograr con css font-size

Asumiendo que los "factores externos" a los que se refiere podrían ser recogidos por las consultas de los medios, podría usarlos; es probable que los ajustes tengan que estar limitados a un conjunto de tamaños predefinidos.

Answer 4

Otra alternativa 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, puedes usar svg. Puse un ejemplo simple como una 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>

Answer 5

Puede 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/

Con 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 como quiera que permita el cambio de tamaño de sus elementos.

Answer 6

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

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

El uso es así:

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

Answer 7

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

#mydiv { font-size: 5vw; }

La otra alternativa es usar SVG incrustado en el HTML. Solo serán unas pocas líneas. El atributo de tamaño de fuente para el elemento de texto se interpretará como "unidades de usuario", por ejemplo, aquellas en las que la ventana gráfica se define en términos de. Entonces, si define viewport como 0 0 100 100, entonces un tamaño de letra 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; } div { font-size: 5bw; } , pero nunca escuché esto propuesto.

Answer 8

También puedes probar este método de CSS puro:

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

Answer 9

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 según la ventana gráfica utilizando consultas de medios
• El texto dentro se genera dinámicamente
• Quiero escalar tanto como bajar

No es el más elegante de los ejemplos, pero me parece el truco. Considere utilizar la aceleración del 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/

Answer 10

Utilicé Fittext en algunos de mis proyectos y parece una buena solución a un problema como este.

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