css - tamaño - Escalado de fuentes basado en el ancho del contenedor

texto ajustable css

Question

Me está costando entender la escala de fuente.

Actualmente tengo este sitio con un font-size de font-size cuerpo del 100%. 100% de lo que aunque? Esto parece calcular a 16px.

Tenía la impresión de que el 100% de alguna manera se referiría al tamaño de la ventana del navegador, pero aparentemente no porque siempre es 16px si la ventana se redimensiona a un ancho móvil o un escritorio de pantalla panorámica en toda regla.

¿Cómo puedo hacer que el texto de mi sitio se amplíe en relación con su contenedor? Intenté usar em pero esto tampoco escala.

Mi razonamiento es que cosas como mi menú se aplastan cuando redimensionas, por lo que necesito reducir el font-size de font-size px de .menuItem entre otros elementos en relación con el ancho del contenedor. (Por ejemplo, en el menú de un escritorio grande, 22px funciona perfectamente. Bajar al ancho de la tableta y 16px es más apropiado).

Soy consciente de que puedo agregar puntos de interrupción, pero realmente quiero que el texto se amplíe tan bien como tener puntos de interrupción adicionales, de lo contrario terminaré con cientos de puntos de interrupción por cada 100px de ancho en el ancho para controlar el texto.

Answer 1

Solución Pure-CSS con calc() , unidades CSS y matemáticas.

Esto no es precisamente lo que pide OP, pero puede hacer el día de alguien. Esta respuesta no es fácil de alimentar con una cuchara y necesita un poco de investigación por parte del desarrollador.

Finalmente vine para obtener una solución de CSS puro para esto usando calc() con diferentes unidades. Necesitará cierta comprensión matemática básica de las fórmulas para calcular su expresión para calc() .

Cuando resolví esto, tuve que obtener un encabezado de respuesta de ancho de página completo con algunos padres de relleno en DOM. Usaré mis valores aquí, reemplazarlos con los tuyos.

A matematicas

Necesitará:

• relación ajustada en algunas vistas, usé 320px, así que obtuve 24px de alto y 224px de ancho, así que la proporción es de 9.333 ... o 28/3
• el ancho del contenedor, tuve padding: 3em y ancho completo, así que esto llegó a 100wv - 2 * 3em

X es el ancho del contenedor, así que reemplácelo con su propia expresión o ajuste el valor para obtener el texto de la página completa. R es la relación que tendrás. Puede obtenerlo ajustando los valores en alguna ventana gráfica, inspeccionando el ancho y alto del elemento y reemplazándolos con sus propios valores. Además, es width / heigth ;)

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3
y = x / r
= (100vw - 6em) / (28 / 3)
= (100vw - 6em) * 3 / 28
= (300vw - 18em) / 28
= (75vw - 4.5rem) / 7

Y bang! ¡Funcionó! escribí

font-size: calc((75vw - 4.5rem) / 7)

a mi cabecera y se ajustó muy bien en cada viewport.

pero como funciona?

Necesitamos algunas constantes aquí arriba. 100vw significa el ancho completo de la ventana 100vw , y mi objetivo era establecer un encabezado de ancho completo con algo de relleno.

El radio. Obtener una anchura y altura en una vista me dio una proporción para jugar, y con la relación, sé cuál debe ser la altura en el ancho de otra vista. Calcularlos con la mano llevaría mucho tiempo y, al menos, un montón de ancho de banda, por lo que no es una buena respuesta.

Conclusión

Me pregunto por qué nadie ha descubierto esto y algunas personas incluso están diciendo que esto sería imposible de arreglar con CSS. No me gusta usar Javascript en los elementos de ajuste, así que no acepto JS o incluso jQuery respuestas sin cavar más. Con todo, es bueno que esto se haya resuelto y este es un paso para las implementaciones de CSS puro en el diseño de sitios web.

Me disculpo por cualquier convención inusual en mi texto, no soy un hablante nativo en inglés y también soy bastante nuevo para escribir SO respuestas.

Edición : también se debe tener en cuenta que tenemos barras de desplazamiento malvadas en algunos navegadores. Por ejemplo, cuando uso Firefox, noté que 100vw significa el ancho completo de la ventana 100vw , extendiéndose debajo de la barra de desplazamiento (¡donde el contenido no se puede expandir!), Por lo que el texto de ancho completo debe ser cuidadosamente guardado y preferiblemente probado con muchos navegadores y dispositivos.

Answer 2

Utilizar variables CSS

Nadie ha mencionado las variables CSS todavía, y este enfoque funcionó mejor para mí, así que:

Digamos que tiene una columna en su página que es el 100% del ancho de la pantalla de un usuario móvil, pero tiene un max-widthtamaño de 800px, por lo que en el escritorio hay espacio a cada lado de la columna. Pon esto en la parte superior de tu página:

<script> document.documentElement.style.setProperty(''--column-width'', Math.min(window.innerWidth, 800)+''px''); </script>

Y ahora puede usar esa variable (en lugar de la vwunidad integrada ) para establecer el tamaño de su fuente. P.ej

p {
font-size: calc( var(--column-width) / 100 );
}

No es un enfoque de CSS puro , pero está bastante cerca.

Answer 3

Pero, ¿y si el contenedor no es la ventana gráfica (cuerpo)?

Esta pregunta es formulada en un comentario por Alex bajo la respuesta aceptada.

Ese hecho no significa que vw no se pueda usar hasta cierto punto para el tamaño de ese contenedor. Ahora, para ver cualquier variación, uno tiene que estar asumiendo que el contenedor de alguna manera es flexible en tamaño. Ya sea a través de un porcentaje directo de width o por ser 100% menos márgenes. El punto se convierte en "discutible" si el contenedor siempre está configurado en, digamos, 200px ancho; luego, configure un font-size que funcione para ese ancho.

Ejemplo 1

Sin embargo, con un contenedor de ancho flexible, se debe tener en cuenta que, de alguna manera, el contenedor aún se está dimensionando en la ventana gráfica . Como tal, es una cuestión de ajustar una configuración de vw basada en esa diferencia porcentual de tamaño a la ventana gráfica, lo que significa tener en cuenta el tamaño de las envolturas principales. Tomemos este ejemplo :

div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let''s say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}

Suponiendo que el div es un hijo del body , es el 50% de ese ancho del 100% , que es el tamaño de la ventana gráfica en este caso básico. Básicamente, usted desea establecer un vw que se vea bien para usted. Como puede ver en mi comentario en el css anterior, puede "pensar" a través de eso matemáticamente con respecto al tamaño completo de la ventana gráfica, pero no necesita hacerlo. El texto se va a "flexionar" con el contenedor, porque el contenedor se está flexionando con el tamaño de la ventana gráfica. ACTUALIZACIÓN: aquí hay un ejemplo de dos contenedores de diferentes tamaños .

Ejemplo 2

Puede ayudar a garantizar el tamaño de la ventana gráfica forzando el cálculo basado en eso. Considera este ejemplo :

html {width: 100%;} /* force html to be viewport width */
body {width: 150%; } /* overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let''s say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}

El tamaño aún se basa en la ventana gráfica, pero en esencia se configura en función del tamaño del contenedor.

El tamaño del contenedor debería cambiar dinámicamente ...

Si el tamaño del elemento contenedor terminara cambiando dinámicamente su relación porcentual a través de @media break points o javascript, entonces cualquiera que sea el "objetivo" básico, se debería volver a calcular para mantener la misma "relación" para el tamaño del texto.

Tome el Ejemplo # 1 arriba. Si el div se cambió al 25% ancho por @media o javascript, entonces al mismo tiempo, el font-size la font-size tendría que ajustarse en la consulta de medios o por javascript para el nuevo cálculo de 5vw * .25 = 1.25 . Esto colocaría el tamaño del texto en el mismo tamaño que habría tenido si el "ancho" del contenedor original del 50% hubiera reducido a la mitad con respecto al tamaño de la ventana gráfica, pero ahora se haya reducido debido a un cambio en su propio cálculo de porcentaje.

Un reto

Con la función calc() CSS3 en uso, sería difícil ajustarlo dinámicamente, ya que esa función no funciona para font-size de font-size en este momento. Por lo tanto, no podría hacer un ajuste puro de CSS3 si su ancho está cambiando en calc() . Por supuesto, un pequeño ajuste del ancho de los márgenes puede no ser suficiente para garantizar cualquier cambio en font-size , por lo que puede no importar.

Answer 4

¿Estás buscando algo como esto? =>
http://jsfiddle.net/sijav/dGsC9/4/
http://fiddle.jshell.net/sijav/dGsC9/4/show/
He usado http://simplefocus.com/flowtype/ y está funcionando muy bien (sin embargo, es js y no pura solución CSS)

$(''body'').flowtype({
minFont : 10,
maxFont : 40,
minimum : 500,
maximum : 1200,
fontRatio : 70
});

Answer 5

¿Has probado http://simplefocus.com/flowtype/ ?

Esto es lo que uso para mis sitios y ha funcionado perfectamente. Espero eso ayude.

Answer 6

100% es relativo al tamaño de fuente base, que si no lo ha configurado sería el agente de usuario predeterminado del navegador.

Para obtener el efecto que está buscando, usaría una pieza de javascript para ajustar el tamaño de fuente base en relación con las dimensiones de la ventana.

Answer 7

Actualizado porque tengo un voto negativo.

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 documentos en tamaños de fuente de elementos secundarios a em''s o%.

Luego, agrega algo como esto a tu 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/

Answer 8

Como respaldo de JavaScript (o su única solución), puede usar mi complemento jQuery Scalem , que le permite escalar en relación con el elemento principal (contenedor) al pasar la opción de reference .

Answer 9

Dentro de su CSS intente agregar esto en la parte inferior, cambiando el ancho de 320px para que el diseño comience a romperse:

 @media only screen and (max-width: 320px) {
body { font-size: 1em; }
}

A continuación, indique el tamaño de fuente en "px" o "em" como desee.

Answer 10

Eche un vistazo a mi código para que el font size smaller la font size smaller para fit lo que haya

pero creo que esto no condujo a una buena experiencia de usuario

var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;
items.each(function(){
//display value depend sometimes on your case you may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width
$(this).css({"whiteSpace":"nowrap","display":"inline-block"});
while ($(this).width() > containerWidth){
console.log("$(this).width()"+ $(this).width() + "containerWidth" + containerWidth)
$(this).css("font-size", fontSize -= 0.5);
}
});

espero que esto te ayude

Answer 11

En caso de que sea útil para cualquiera, la mayoría de las soluciones en este hilo estaban envolviendo el texto en varias líneas, forma e.

Pero luego encontré esto, y funcionó:

https://github.com/chunksnbits/jquery-quickfit

Ejemplo de uso:

$(''.someText'').quickfit({max:50,tolerance:.4})

Answer 12

Esto funcionó para mí:

Intento con el tamaño de fuente aproximado basado en un ancho / alto obtenido de la configuración de tamaño de fuente: 10px. Básicamente, la idea es "si tengo 20px de ancho y 11px de alto con tamaño de fuente: 10px, ¿cuál sería el tamaño de letra máximo para un contenedor de 50px de ancho y 30px de alto?"

La respuesta es un sistema de doble proporción:

{20: 10 = 50: X, 11: 10 = 30: Y} = {X = (10 * 50) / 20, Y = (10 * 30) / 11}

Ahora X es un tamaño de fuente que coincidirá con el ancho, Y es un tamaño de fuente que coincidirá con la altura; toma el menor valor

function getMaxFontSizeApprox(el){
var fontSize = 10;
var p = el.parentNode;
var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
if(!parent_h)parent_h = 0;
var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
if(!parent_w)parent_w = 0;
el.style.fontSize = fontSize + "px";
var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
if(!el_h)el_h = 0;
var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
if(!el_w)el_w = 0;
//0.5 is the error on the measure that js does
//if real measure had been 12.49 px => js would have said 12px
//so we think about the worst case when could have, we add 0.5 to
//compensate the round error
var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);
fontSize = Math.floor(Math.min(fs1,fs2));
el.style.fontSize = fontSize + "px";
return fontSize;
}

NB: el argumento de la función debe ser un elemento span o un elemento que es más pequeño que su padre, de lo contrario, si los hijos y el padre tienen la misma función de ancho / alto, la función falla

Answer 13

Hay una gran filosofía para este tema. Lo más fácil sería dar un cierto tamaño de fuente al cuerpo (recomiendo 10), y luego todos los demás elementos tendrían su fuente en em o rem. Te daré un ejemplo para entender esas unidades. Em siempre es relativo a su padre.

body{font-size:10px;}
.menu{font-size:2em;} /* that means 2*10px = 20px */
.menu li{font-size:1.5em;} /* that means 1.5*20px = 30px */

Rem es siempre relativo al cuerpo

body{font-size:10px;}
.menu{font-size:2rem;} /* that means 2*10px = 20px */
.menu li{font-size:1.5rem;} /* that means 1.5*10px = 15px */

Y que podría crear una secuencia de comandos que modificaría el tamaño de fuente en relación con el ancho de su contenedor. Pero esto no es lo que yo recomendaría. Porque, por ejemplo, en un contenedor de 900px de ancho, tendría un elemento p con un tamaño de fuente de 12px, digamos. Y en su idea, eso se convertiría en un contenedor de 300px de ancho con un tamaño de fuente de 4px. Tiene que haber un límite inferior. Otra solución sería con consultas de medios, para que pueda establecer la fuente para diferentes anchos.

Pero las soluciones que recomendaría es usar una biblioteca de javascript que te ayude con eso. Y FitText que he encontrado hasta ahora.

Answer 14

He preparado una función de escala simple utilizando la transformación css en lugar del tamaño de fuente. Puede usarlo dentro de cualquier contenedor, no tiene que configurar consultas de medios, etc.

Publicación en el blog: https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/

El código:

function scaleHeader() {
var scalable = document.querySelectorAll(''.scale--js'');
var margin = 10;
for (var i = 0; i < scalable.length; i++) {
var scalableContainer = scalable[i].parentNode;
scalable[i].style.transform = ''scale(1)'';
var scalableContainerWidth = scalableContainer.offsetWidth - margin;
var scalableWidth = scalable[i].offsetWidth;
scalable[i].style.transform = ''scale('' + scalableContainerWidth / scalableWidth + '')'';
scalableContainer.style.height = scalable[i].getBoundingClientRect().height + ''px'';
}
}

Demostración de trabajo: https://codepen.io/maciejkorsan/pen/BWLryj

Answer 15

Lo que hago en uno de mis proyectos es una "mezcla" entre vw y vh para ajustar el tamaño de la fuente a mis necesidades, por ejemplo:

font-size: calc(3vw + 3vh);

Sé que esto no responde a la pregunta de la operación, pero tal vez pueda ser una solución para cualquier otra persona.

Answer 16

Mi problema fue similar pero relacionado con la escala del texto dentro de un encabezado. Probé Fit Font, pero necesitaba cambiar el compresor para obtener algún resultado, ya que estaba resolviendo un problema ligeramente diferente, al igual que el flujo de texto. Así que escribí mi propio pequeño complemento que reduce el tamaño de la fuente para que se ajuste al contenedor, asumiendo que tiene un overflow: hidden white-space: nowrap overflow: hidden y white-space: nowrap manera que incluso si reduce la fuente al mínimo no permita mostrar el encabezado completo, simplemente corta lo que puede mostrar.

(function($) {
// Reduces the size of text in the element to fit the parent.
$.fn.reduceTextSize = function(options) {
options = $.extend({
minFontSize: 10
}, options);
function checkWidth(em) {
var $em = $(em);
var oldPosition = $em.css(''position'');
$em.css(''position'', ''absolute'');
var width = $em.width();
$em.css(''position'', oldPosition);
return width;
}
return this.each(function(){
var $this = $(this);
var $parent = $this.parent();
var prevFontSize;
while (checkWidth($this) > $parent.width()) {
var currentFontSize = parseInt($this.css(''font-size'').replace(''px'', ''''));
// Stop looping if min font size reached, or font size did not change last iteration.
if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
prevFontSize && prevFontSize == currentFontSize) {
break;
}
prevFontSize = currentFontSize;
$this.css(''font-size'', (currentFontSize - 1) + ''px'');
}
});
};
})(jQuery);

Answer 17

Mi propia solución, basada en jQuery, funciona aumentando gradualmente el tamaño de la fuente hasta que el contenedor obtiene un gran aumento de altura (lo que significa que tiene un salto de línea). Es bastante simple pero funciona bastante bien y es muy fácil de usar. No tiene que saber nada sobre la fuente que se está utilizando, todo está a cargo del navegador.

Puedes jugar con él en http://jsfiddle.net/tubededentifrice/u5y15d0L/2/

La magia sucede aquí:

var setMaxTextSize=function(jElement) {
//Get and set the font size into data for reuse upon resize
var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
jElement.data(quickFitFontSizeData,fontSize);
//Gradually increase font size until the element gets a big increase in height (ie line break)
var i=0;
var previousHeight;
do
{
previousHeight=jElement.height();
jElement.css("font-size",""+(++fontSize)+"px");
}
while(i++<300 && jElement.height()-previousHeight<fontSize/2)
//Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
fontSize-=1;
jElement.addClass(quickFitSetClass).css("font-size",""+fontSize+"px");
return fontSize;
};

Answer 18

Para que el tamaño de fuente se ajuste a su contenedor, en lugar de la ventana, vea la función resizeFont() que he compartido en esta pregunta (una combinación de otras respuestas, la mayoría de las cuales ya están vinculadas aquí). Se activa utilizando window.addEventListener(''resize'', resizeFont); .

Vanilla JS: cambia el tamaño de la fuente para ajustarse al contenedor

JS:

function resizeFont() {
var elements = document.getElementsByClassName(''resize'');
console.log(elements);
if (elements.length < 0) {
return;
}
_len = elements.length;
for (_i = 0; _i < _len; _i++) {
var el = elements[_i];
el.style.fontSize = "100%";
for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
el.style.fontSize = size + ''%'';
}
}
}

Tal vez podría usar vw / vh como respaldo, por lo que asigna dinámicamente emo remunidades usando javascript, asegurándose de que las fuentes se escalan a la ventana si javascript está deshabilitado.

Aplique la .resizeclase a todos los elementos que contengan texto que desee escalar.

Active la función antes de agregar la ventana para cambiar el tamaño del detector de eventos. Luego, cualquier texto que no se ajuste a su contenedor se reducirá cuando se cargue la página, así como cuando se cambie de tamaño.

NOTA: El valor por defecto font-sizedebe establecerse en cualquiera em, remo %para lograr resultados adecuados ... y si el estilo de sus elementos es demasiado complejo entonces el navegador puede colgarse si se inicia desesperadamente cambiar el tamaño de la ventana.

Answer 19

Para texto dinámico, este complemento es bastante útil http://freqdec.github.io/slabText/ . Simplemente agrega css

.slabtexted .slabtext
{
display: -moz-inline-box;
display: inline-block;
white-space: nowrap;
}
.slabtextinactive .slabtext
{
display: inline;
white-space: normal;
font-size: 1em !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
*letter-spacing: normal !important;
*word-spacing: normal !important;
}
.slabtextdone .slabtext
{
display: block;
}

y guión

$(''#mydiv'').slabText();

Answer 20

Puede que no sea muy práctico, pero si desea que la fuente sea una función directa del padre, sin tener ningún JS que escuche / repita (intervalo) para leer el tamaño de la página / div, hay una manera de hacerlo. Iframes Cualquier cosa dentro del iframe considerará el tamaño del iframe como el tamaño de la ventana gráfica. Entonces, el truco es simplemente crear un iframe cuyo ancho sea el ancho máximo que desea que tenga su texto, y cuya altura sea igual a la altura máxima * de la relación de aspecto del texto en particular.

Dejando a un lado la limitación de que las unidades de la ventana gráfica no pueden acompañar a las unidades parentales secundarias para el texto (como en el caso de que el% de tamaño se comporte como todos los demás), las unidades de la ventana gráfica proporcionan una herramienta muy poderosa: poder obtener la dimensión mínima / máxima . No puedes hacer eso en ningún otro lugar, no puedes decir ... hacer que la altura de este div sea el ancho del padre * algo.

Dicho esto, el truco es usar vmin y establecer el tamaño del iframe de modo que la [altura] [fracción] * sea un buen tamaño de fuente cuando la altura sea la dimensión límite, y el ancho total [fracción] * cuando la anchura sea el Dimensión limitante. Esta es la razón por la cual la altura debe ser un producto del ancho y la relación de aspecto.

para mi ejemplo particular, tienes

.main iframe{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: calc(3.5 * 100%);
background: rgba(0,0,0,0);
border-style: none;
transform: translate3d(-50%,-50%,0);
}

La pequeña molestia con este método es que tienes que configurar manualmente el CSS del iframe. Si adjunta el archivo CSS completo, eso ocuparía mucho ancho de banda para muchas áreas de texto. Entonces, lo que hago es adjuntar la regla que quiero directamente desde mi CSS.

var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector(''iframe'').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);

Puede escribir una función pequeña que obtenga la regla CSS / todas las reglas CSS que afectarían al área de texto.

No puedo pensar en otra forma de hacerlo sin tener un poco de ciclismo / escucha JS. La solución real sería que los navegadores proporcionen una forma de escalar el texto como una función del contenedor principal Y también proporcionen la misma funcionalidad de tipo vmin / vmax.

JS fiddle: https://jsfiddle.net/0jr7rrgm/3/ (haga clic una vez para bloquear el cuadrado rojo en el mouse, haga clic nuevamente para liberar)

La mayor parte del JS en el violín es solo mi función personalizada de hacer clic y arrastrar

Answer 21

Solución con SVG:

<div style="width: 60px;">
<svg width="100%" height="100%" viewBox="0 -200 1000 300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="300" fill="black">Text</text>
</svg>
</div>

https://jsfiddle.net/qc8ht5eb/

Answer 22

Ten siempre tu elemento con este atributo:

Javascript: element.style.fontSize = "100%";

o

CSS: style = "font-size: 100%;"

Cuando vaya a pantalla completa, ya debería haber calculado una variable de escala (escala> 1 o escala = 1). Luego, en pantalla completa:

document.body.style.fontSize = (scale * 100) + "%";

Funciona muy bien con poco código.

Answer 23

Trate de usar el complemento FitText , ya que el tamaño de Viewport no es la solución a este problema. Solo agrega biblioteca

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.fittext.js"></script>

y cambie el tamaño de fuente para que sea correcto configurando el coeficiente de texto:

$("#text_div").fitText(0.8);

Puede configurar los valores máximo y mínimo de texto:

$("#text_div").fitText(0.8, { minFontSize: ''12px'', maxFontSize: ''36px'' });

Answer 24

Utilizando vw , em & co. seguro que funciona, pero imo siempre necesita un toque humano para el ajuste fino.

Aquí hay un guión que acabo de escribir basado en la answer @ tnt-rox que intenta automatizar el toque de ese humano:

$(''#controller'').click(function(){
$(''h2'').each(function(){
var
$el = $(this),
max = $el.get(0),
el = null
;
max =
max
? max.offsetWidth
: 320
;
$el.css({
''font-size'': ''1em'',
''display'': ''inline'',
});
el = $el.get(0);
el.get_float = function(){
var
fs = 0
;
if (this.style && this.style.fontSize) {
fs = parseFloat(this.style.fontSize.replace( /([/d/.]+)em/g, ''$1'' ));
}
return fs;
};
el.bigger = function(){
this.style.fontSize = (this.get_float() +0.1) +''em'';
};
while ( el.offsetWidth < max ) {
el.bigger();
}
// finishing touch.
$el.css({
''font-size'': ((el.get_float() -0.1) +''em''),
''line-height'': ''normal'',
''display'': '''',
});
}); // end of ( each )
}); // end of ( font scaling test )

div {
width: 50%;
background-color: tomato;
font-family: ''Arial'';
}
h2 {
white-space: nowrap;
}
h2:nth-child(2) {
font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
<h2>Lorem ipsum dolor</h2>
<h2>Test String</h2>
<h2>Sweet Concatenation</h2>
<h2>Font Scaling</h2>
</div>

Básicamente, reduce el tamaño de la fuente a 1em y luego comienza a incrementarse en 0.1 hasta que alcanza el ancho máximo.

jsFiddle

Answer 25

Este componente web cambia el tamaño de fuente para que el ancho del texto interno coincida con el ancho del contenedor. Revisa la demo .

Puedes usarlo así:

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

Answer 26

¡Hay una manera de hacer esto SIN javascript!

Puede utilizar un svg en línea. Puede usar css en un svg si está en línea. Debe recordar que el uso de este método significa que su svg responderá a su tamaño de contenedor.

Intenta usar la siguiente solución ...

HTML

<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
<text>SAVE $500</text>
</svg>
</div>

CSS

div {
width: 50%; /* set your container width */
height: 50%; /* Set your container height */
}
svg {
width: 100%;
height: auto;
}
text {
transform: translate(40px, 202px);
font-size: 62px;
fill: #000;
}

ejemplo: https://jsfiddle.net/k8L4xLLa/32/

¿Quieres algo más llamativo?

Los SVG también te permiten hacer cosas geniales con formas y basura. Echa un vistazo a este gran caso de uso para el texto escalable ...

https://jsfiddle.net/k8L4xLLa/14/

Answer 27

EDITAR: Si el contenedor no es el cuerpo, los trucos de CSS cubren todas sus opciones aquí: https://css-tricks.com/fitting-text-to-a-container/

Si el contenedor es el cuerpo, lo que está buscando es longitudes de porcentaje de Viewport :

Las longitudes porcentuales de la ventana gráfica son relativas al tamaño del bloque inicial que contiene . Cuando se cambia la altura o el ancho del bloque que contiene inicial, se escalan en consecuencia. Sin embargo, cuando el valor de desbordamiento en el elemento raíz es automático, se supone que no existen barras de desplazamiento.

Los valores son:

• vw (% del ancho de la ventana gráfica)
• vh (% de la altura de la ventana gráfica)
• vi (1% del tamaño de la ventana gráfica en la dirección del eje en línea del elemento raíz)
• vb (1% del tamaño de la ventana gráfica en la dirección del eje del bloque del elemento raíz)
• vmin (el menor de vw o vh )
• vmax (el más grande o vw o vh )

1 v * es igual al 1% del bloque inicial que contiene.

usándolo se ve así:

p {
font-size: 4vw;
}

Como puede ver, cuando el ancho de la ventana gráfica aumenta, también lo hace el tamaño de la fuente, sin necesidad de utilizar consultas de medios.

Estos valores son una unidad de tamaño, como px o em , por lo que también pueden usarse para dimensionar otros elementos, como ancho, margen o relleno.

El soporte del navegador es bastante bueno, pero es probable que necesites un respaldo, como:

p {
font-size: 16px;
font-size: 4vw;
}

Consulte las estadísticas de soporte: http://caniuse.com/#feat=viewport-units .

Además, echa un vistazo a CSS-Tricks para una mirada más amplia: css-tricks.com/viewport-sized-typography

Aquí hay un buen artículo sobre cómo establecer tamaños mínimos / máximos y ejercer un poco más de control sobre los tamaños: http://madebymike.com.au/writing/precise-control-responsive-typography/

Y aquí hay un artículo sobre cómo configurar su tamaño usando calc () para que el texto llene la ventana gráfica: http://codepen.io/CrocoDillon/pen/fBJxu

También, vea este artículo, que utiliza una técnica denominada ''vanguardia fundida'' para ajustar la altura de la línea también. https://css-tricks.com/molten-leading-css/

Answer 28

Pero, ¿y si el contenedor no es la ventana gráfica (cuerpo)?

La respuesta real está en la propiedad de transformación que le permite manipular visualmente un elemento sesgando, girando, traduciendo o escalando:

https://css-tricks.com/almanac/properties/t/transform/

Answer 29

Las consultas directas de los medios de comunicación parecen ser una solución mucho más simple y comprensible para cambiar el tamaño de la fuente en función de tamaños de contenedores que pueden ser dinámicos.

El siguiente tamaño cambia el tamaño de la fuente al tamaño del contenedor, ya sea que el contenedor se ajuste al tamaño de la ventana gráfica, o si alcanza su valor máximo. Si no tiene contenedores de un 100% de ancho, puede ajustarlos vwsegún corresponda.

.container {
width: 100%;
max-width: 600px;
}
.headline {
font-size: 20vw;
}
.subhead {
font-size: 5vw;
}
@media (min-width:600px) {
.headline {
font-size: 120px;
}
.subhead {
font-size: 32px;
}
}

Answer 30

No veo ninguna respuesta con referencia a la propiedad CSS flex, pero también puede ser muy útil.