come impostare la dimensione del carattere in base alla dimensione del contenitore?

Ho un contenitore che ha una larghezza e un’altezza in%, quindi si adatta in base a fattori esterni. Vorrei che il carattere all’interno del contenitore fosse di dimensioni costanti rispetto alla dimensione dei contenitori. C’è un buon modo per farlo usando i CSS? La font-size: x% ridimensiona il carattere solo in base alla dimensione del carattere originale (che sarebbe 100%).

Potresti riuscire a farlo con CSS3 usando i calcoli, tuttavia sarebbe molto più sicuro usare JavaScript.

Ecco un esempio: http://jsfiddle.net/8TrTU/

Usando JS puoi cambiare l’altezza del testo, quindi bind semplicemente questo stesso calcolo a un evento di ridimensionamento, durante il ridimensionamento in modo che venga ridimensionato mentre l’utente sta apportando delle regolazioni, o comunque tu stia consentendo il ridimensionamento dei tuoi elementi.

Se si desidera impostare la dimensione del carattere come percentuale della larghezza della finestra, utilizzare l’unità vw :

 #mydiv { font-size: 5vw; } 

L’altra alternativa è usare SVG incorporato nell’HTML. Saranno solo poche righe. L’attributo font-size per l’elemento text verrà interpretato come “user unit”, ad esempio quelli in cui il viewport è definito in termini di. Quindi, se si definisce viewport come 0 0 100 100, una dimensione font di 1 sarà pari a un centesimo della dimensione dell’elemento svg.

E no, non c’è modo di farlo in CSS usando i calcoli. Il problema è che le percentuali utilizzate per le dimensioni dei caratteri, incluse le percentuali all’interno di un calcolo, sono interpretate in termini di dimensione del carattere ereditato, non della dimensione del contenitore. I CSS potrebbero usare una unità chiamata bw (box-width) per questo scopo, quindi potresti dire div { font-size: 5bw; } div { font-size: 5bw; } , ma non ho mai sentito questo proposto.

Un’altra alternativa js:

Esempio di lavoro

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

Oppure, come dichiarato nella risposta di torazaburo, potresti usare svg. Ho messo insieme un semplice esempio come prova del concetto:

Esempio SVG

 
X

Non può essere realizzato con css font-size

Supponendo che i “fattori esterni” a cui ti stai riferendo possano essere raccolti dalle domande dei media, potresti usarli – le correzioni dovranno probabilmente essere limitate a un insieme di dimensioni predefinite.

Ho usato Fittext su alcuni dei miei progetti e sembra una buona soluzione per un problema come questo.

FitText rende flessibili le dimensioni dei caratteri. Usa questo plugin sul tuo layout fluido o reattivo per ottenere titoli scalabili che riempiano la larghezza di un elemento genitore.

Ecco la funzione:

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

Quindi converti tutte le dimensioni dei font dei tuoi elementi figlio in em o%.

Quindi aggiungi qualcosa di simile al tuo codice per impostare la dimensione del carattere di base.

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

http://jsfiddle.net/0tpvccjt/

Ho avuto un problema simile ma ho dovuto prendere in considerazione altri problemi che l’esempio @ apaul34208 non ha affrontato. Nel mio caso;

  • Ho un contenitore che ha cambiato le dimensioni in base al viewport utilizzando le query multimediali
  • Il testo all’interno viene generato dynamicmente
  • Voglio aumentare o diminuire

Non è il più elegante degli esempi, ma fa il trucco per me. Prendi in considerazione l’utilizzo della limitazione del ridimensionamento della finestra ( 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; } 
  
£5000

Ho dato una risposta più dettagliata dell’utilizzo di vw rispetto al dimensionamento del contenitore specifico in questa risposta , quindi non ripeterò la mia risposta qui.

In sintesi, tuttavia, è essenzialmente una questione di factoring (o di controllo) quale sarà la dimensione del contenitore rispetto alla viewport, e quindi di elaborare il corretto dimensionamento vw basato su quello per il contenitore, tenendo conto di ciò che è necessario succede se qualcosa viene ridimensionato dynamicmente.

Quindi, se si desidera una dimensione di 5vw in un contenitore al 100% della larghezza della finestra, quindi una al 75% della larghezza della finestra si vorrà probabilmente essere (5vw * .75) = 3.75vw .

Se desideri ridimensionarlo in base alla larghezza dell’elemento, puoi utilizzare questo componente Web:
https://github.com/pomber/full-width-text

Controlla la demo qui:
https://pomber.github.io/full-width-text/

L’utilizzo è come questo:

 Lorem Ipsum 

Puoi anche provare questo puro metodo CSS:

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