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

Question

J'ai un conteneur qui a une largeur et une hauteur de %, de sorte qu'il s'adapte 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. Existe-t-il un moyen efficace d'y parvenir à l'aide de CSS ? Le site font-size: x% ne mettrait à l'échelle la police qu'en fonction de la taille de la police d'origine (qui serait de 100 %).

Answer 1

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'attribut vw unité :

#mydiv { font-size: 5vw; }

L'autre solution consiste à utiliser le SVG intégré dans le HTML. Il ne s'agira que de quelques lignes. L'attribut font-size de l'élément text sera interprété comme des "unités utilisateur", par exemple celles qui sont définies dans le viewport. Ainsi, si vous définissez la fenêtre d'affichage comme 0 0 100 100, une taille de police de 1 correspondra à un centième de la taille de l'élément svg.

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

Answer 2

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 pourriez utiliser des svg. J'ai mis au point 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>

Answer 3

Vous pouvez peut-être le faire avec CSS3 en utilisant des calculs, mais il serait 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 qu'il soit mis à l'échelle pendant que l'utilisateur effectue des ajustements, ou quelle que soit la manière dont vous autorisez le redimensionnement de vos éléments.

Answer 4

Utilicé Fittext sur certains de mes projets et cela semble être une bonne solution à un problème comme celui-ci.

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

Answer 5

Il ne peut pas être réalisé avec css taille de la police

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