web-dev-qa-db-fra.com

comment définir la taille de la police en fonction de la taille du conteneur?

J'ai un conteneur qui a un% de largeur et de hauteur, il varie donc en fonction de facteurs externes. Je voudrais que la police à l'intérieur du conteneur ait une taille constante par rapport à la taille des conteneurs. Y at-il un bon moyen de faire cela en utilisant CSS? Le font-size: x% redimensionnerait uniquement la police en fonction de la taille de la police d'origine (qui serait 100%).

javascriptcssfont-size
80
FurtiveFelon

Vous pourrez peut-être faire cela avec CSS3 en utilisant des calculs, mais il serait probablement plus sûr d'utiliser JavaScript. 

Voici un exemple: http://jsfiddle.net/8TrTU/

En utilisant JS, vous pouvez modifier la hauteur du texte, puis lier simplement ce même calcul à un événement de redimensionnement, pendant le redimensionnement, afin de le redimensionner lorsque l'utilisateur effectue des ajustements ou que vous autorisez le redimensionnement de vos éléments.

29
Matthew Riches

Si vous souhaitez définir la taille de la police en tant que pourcentage de la largeur de la fenêtre d'affichage, utilisez l'unité vw:

#mydiv { font-size: 5vw; }

L'autre alternative consiste à utiliser SVG intégré dans le code HTML. Ce ne sera que quelques lignes. L'attribut font-size de l'élément de texte sera interprété comme une "unité d'utilisateur", par exemple celle définie par la fenêtre d'affichage. Ainsi, si vous définissez viewport comme 0 0 100 100, une taille de police de 1 sera égale à un centième de la taille de l'élément svg.

Et non, il n'y a aucun moyen de faire cela en CSS en utilisant des calculs. Le problème est que les pourcentages utilisés pour la taille de police, y compris les pourcentages à l'intérieur d'un calcul, sont interprétés en termes de taille de police héritée, pas de taille du conteneur. CSS pourrait utiliser une unité appelée bw (box-width) à cette fin. Vous pourriez donc dire div { font-size: 5bw; }, mais je n'ai jamais entendu parler de cela.

148
user663031

Une autre alternative js:

Exemple de travail

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

Ou, comme indiqué dans la réponse de torazaburo vous pouvez utiliser svg. J'ai construit un exemple simple comme preuve de concept:

Exemple SVG

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

J'ai utilisé Fittext sur certains de mes projets et cela semble être une bonne solution à un problème de ce type.

FitText rend les tailles de police flexibles. Utilisez ce plugin sur votre mise en page fluide ou sensible pour obtenir des titres évolutifs qui remplissent la largeur d'un élément parent.

6
ElvinD

Il ne peut pas être accompli avec css font-size

En supposant que les "facteurs externes" auxquels vous faites référence puissent être détectés par les requêtes des médias, vous pouvez les utiliser - les ajustements devront probablement être limités à un ensemble de tailles prédéfinies.

6
o.v.

Voici la fonction:

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

Convertissez ensuite toutes les tailles de police de vos éléments enfants en documents en em ou en%.

Ajoutez ensuite quelque chose comme ceci à votre code pour définir la taille de la police de base.

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

http://jsfiddle.net/0tpvccjt/

2
tnt-rox

J'avais un problème similaire, mais je devais prendre en compte d'autres problèmes que @ apaul34208 n'avait pas abordés. Dans mon cas;

  • J'ai un conteneur qui a changé de taille en fonction de la fenêtre d'affichage à l'aide de requêtes multimédia
  • Le texte à l'intérieur est généré dynamiquement
  • Je veux augmenter et diminuer

Ce n’est pas le plus élégant des exemples, mais c’est tout pour moi. Pensez à limiter le redimensionnement de la fenêtre ( 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/

1
Richard Merchant

Si vous souhaitez le redimensionner en fonction de la largeur de l'élément, vous pouvez utiliser ce composant Web:
https://github.com/pomber/full-width-text

Vérifiez la démo ici:
https://pomber.github.io/full-width-text/

L'usage est comme ça: 

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

J'ai donné une réponse plus détaillée en utilisant vw en ce qui concerne le dimensionnement spécifique du conteneur dans cette réponse , je ne vais donc pas simplement répéter ma réponse ici.

En résumé, cependant, il s’agit essentiellement d’affactiver (ou de contrôler) la taille du conteneur par rapport à la fenêtre de visualisation, puis de déterminer le format vw approprié en fonction du conteneur, en tenant compte de arriver si quelque chose est redimensionné dynamiquement.

Donc, si vous vouliez une taille 5vw dans un conteneur correspondant à 100% de la largeur de la fenêtre, puis une à 75% de la largeur de la fenêtre, vous voudriez probablement être (5vw * .75) = 3.75vw.

0
ScottS