Y a-t-il une chose telle que min-font-size et max-font-size?

J'essaie de créer une police dans un div en fonction de la fenêtre du navigateur. Jusqu'à présent, cela a parfaitement fonctionné, mais la division parent a un max-widthof 525px. Redimensionner davantage le navigateur ne fera pas arrêter le redimensionnement de la police. Cela m'a amené à me demander s'il existe une chose telle que min-font-sizeou max-font-size, et si une telle chose n'existe pas, s'il existe un moyen de parvenir à quelque chose de similaire.

Je pensais que l'utilisation de pourcentages font-sizefonctionnerait, mais le morceau de texte ne sera pas mis à l'échelle en fonction du div parent. Voici ce que j'ai:

Le CSS pour la div parent:

.textField{
    background-color:rgba(88, 88, 88, 0.33);

    width:40%;
    height:450px;

    min-width:200px;
    max-width:525px;

    z-index:2;
}

Le CSS pour le morceau de texte en question:

.subText{
    position:relative;
    top:-55px;
    left:15px;

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;

    z-index:1;
}

J'ai cherché pendant un certain temps sur Internet, mais en vain.

Non, il n'y a pas de propriété CSS pour la taille de police minimale ou maximale. Les navigateurs ont souvent un paramètre pour la taille de police minimale, mais c'est sous le contrôle de l'utilisateur, pas d'un auteur.

Vous pouvez utiliser des @mediarequêtes pour définir certains paramètres CSS en fonction de paramètres tels que la largeur de l'écran ou de la fenêtre. Dans de tels paramètres, vous pouvez par exemple définir la taille de la police sur une petite valeur spécifique si la fenêtre est très étroite.

Vous pouvez le faire en utilisant une formule et en incluant la largeur de la fenêtre.

font-size: calc(7px + .5vw);

Cela définit la taille de police minimale à 7px et l'amplifie de .5vw en fonction de la largeur de la fenêtre.

Bonne chance!

Cela fonctionne bien avec CSS.

J'ai traversé les mêmes problèmes et je l'ai résolu comme suit.

Utilisez une taille "px" fixe pour la taille maximale à une largeur spécifique et au-dessus. Ensuite, pour différentes largeurs plus petites, utilisez un "vw" relatif en pourcentage de l'écran.

Le résultat ci-dessous est qu'il s'ajuste à des écrans inférieurs à 960px mais garde une taille fixe au-dessus. Juste un rappel, ne pas oublier d'ajouter dans la doc html en entête:

<meta name="viewport" content="width=device-width">

Exemple en CSS:

@media all and (min-width: 960px) {
h1{
    font-size: 50px;
  }
}

@media all and (max-width: 959px) and (min-width: 600px) {
h1{
    font-size: 5vw;
  }
}

@media all and (max-width: 599px) and (min-width: 50px) {
h1{
    font-size: 6vw;
  }
}

J'espère que cela vous aidera!

J'arrive un peu en retard ici, je n'obtiens pas beaucoup de mérite pour cela, je fais juste un mélange des réponses ci-dessous parce que j'ai été obligé de le faire pour un projet.

Donc pour répondre à la question: cette propriété CSS n'existe pas . Je ne sais pas pourquoi, mais je pense que c'est parce qu'ils ont peur d'une mauvaise utilisation de cette propriété, mais je ne trouve aucun cas d'utilisation où cela peut être un problème sérieux.

Quoi qu'il en soit, quelles sont les solutions?

Deux outils nous permettront de faire cela: les requêtes média et la propriété vw

1) Il existe une solution "folle" consistant à faire une requête média pour chaque étape que nous ançons dans notre css, en changeant la police d'un montant fixe à un autre montant fixe. Cela fonctionne, mais c'est très ennuyeux à faire et vous n'avez pas un aspect linéaire lisse.

2) Comme l'explique AlmostPitt, il existe une solution brillante pour les minima:

font-size: calc(7px + .5vw);

Le minimum ici serait de 7 pixels en plus de 0,5% de la largeur de la vue. C'est déjà vraiment cool et fonctionne dans la plupart des cas . Il ne nécessite aucune requête multimédia, il vous suffit de passer du temps à trouver les bons paramètres.

Comme vous l'avez remarqué, il s'agit d'une fonction linéaire, les mathématiques de base vous apprennent que deux points vous trouvent déjà les paramètres. Ensuite, fixez simplement la taille de police en px que vous voulez pour les très grands écrans et pour la version mobile, puis calculez si vous voulez faire une méthode scientifique. Bien pensé, ce n'est absolument pas nécessaire et vous pouvez simplement y aller en essayant.

3) Supposons que vous ayez un client très ennuyeux (comme moi) qui veut absolument qu'un titre soit une ligne et pas plus. Si vous avez utilisé la solution AlmostPitt, alors vous avez des problèmes car votre police continuera de grandir et si vous avez un conteneur de largeur fixe (comme le bootstrap s'arrêtant à 1140px ou quelque chose dans de grandes fenêtres). Ici, je vous suggère d'utiliser également une requête média. En fait, vous pouvez simplement trouver la quantité maximale de taille px que vous pouvez gérer dans votre conteneur avant que l'aspect ne devienne indésirable (pxMax). Ce sera votre maximum. Ensuite, il vous suffit de trouver la largeur d'écran exacte que vous devez arrêter (wMax). (Je vous laisse inverser une fonction linéaire par vous-même).

Après ça, fais juste

@media (min-width: [wMax]px) {
    h2{
        font-size: [pxMax]px;
    }
}

Ensuite, il est parfaitement linéaire et la taille de votre police cesse de croître! Notez que vous n'avez pas besoin de mettre votre propriété css précédente (calc ...) dans une requête multimédia sous wMax car la requête multimédia est considérée comme plus importante et elle écrasera la propriété précédente.

Je ne pense pas qu'il soit utile de créer un extrait de code pour cela, car vous auriez du mal à le faire sur tout l'écran et ce n'est pas sorcier après tout.

J'espère que cela pourrait aider les autres, et n'oubliez pas de remercier AlmostPitt pour sa solution.

Ceci est en fait proposé dans CSS4

Projet de travail au W3C

Citation:

Ces deux propriétés permettent à un site Web ou à un utilisateur d'exiger que la taille de police d'un élément soit fixée dans la plage fournie avec ces deux propriétés. Si la valeur calculée font-size est en dehors des limites créées par font-min-size et font-max-size, la valeur d'utilisation de font-size est limitée aux valeurs spécifiées dans ces deux propriétés.

Cela fonctionnerait en fait comme suit:

.element {
    font-min-size: 10px;
    font-max-size: 18px;
    font-size: 5vw; // viewport-relative units are responsive.
}

Cela signifierait littéralement que la taille de la police sera de 5% de la largeur de la fenêtre, mais jamais inférieure à 10 pixels, ni supérieure à 18 pixels.

Malheureusement, cette fonctionnalité n'est encore implémentée nulle part (même pas sur caniuse.com).

Le sac à dos est génial, mais vous n'avez pas nécessairement besoin de créer des outils comme Gulp ou Grunt, etc.

J'ai fait une démo en utilisant les propriétés personnalisées CSS (variables CSS) pour contrôler facilement les tailles de police min et max.

Ainsi:

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

J'ai obtenu de bons résultats avec ces derniers. Il s'écoule en douceur entre les 3 plages de largeur, comme une fonction continue par morceaux.

@media screen and (min-width: 581px) and (max-width: 1760px){
    #expandingHeader {
        line-height:5.2vw;
        font-size: 5.99vw;
    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (min-width: 1761px){
    #expandingHeader {
        line-height:.9em;
        font-size: 7.03em;

    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (max-width: 580px){
    #expandingHeader {
        line-height:.9em;
        font-size: 2.3em;
    }
    #tagLine {
        letter-spacing: .1em;
        font-size: .65em;
        line-height: .10em;
    }
}

Vous pouvez utiliser Sass pour contrôler les tailles de police min et max. Voici une brillante solution d'Eduardo Boucas.

https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}

.limit-min {
  @include responsive-font(3vw, 20px);
}

.limit-min-max {
  @include responsive-font(3vw, 20px, 50px);
}

Veuillez noter que la définition de la taille de la police avec px n'est pas recommandée en raison de problèmes d'accessibilité :

"La définition des tailles de police en px n'est pas accessible, car l'utilisateur ne peut pas modifier la taille de police dans certains navigateurs. Par exemple, les utilisateurs ayant une vision limitée peuvent souhaiter définir une taille de police beaucoup plus grande que la taille choisie par un concepteur Web." (voir https://developer.mozilla.org/en-US/docs/Web/CSS/font-size )

Une approche plus accessible consiste à définir font-size: 100%dans le html, qui respecte les paramètres de taille par défaut de l'utilisateur , et ALORS en utilisant des pourcentages ou des unités relatives lors du redimensionnement ( emou rem), par exemple avec une requête @media.

(voir https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/ )

Oui, certains navigateurs semblent avoir certaines restrictions en SVG. L'outil de développement le limite à 8000px; Le graphique suivant généré dynamiquement échoue par exemple dans Chrome.

Essayez http://www.xn--dddelei-n2a.de/2018/test-von-svt/

<svg id="diagrammChart"
     width="100%"
     height="100%"
     viewBox="-400000 0 1000000 550000"
     font-size="27559"
     overflow="hidden"
     preserveAspectRatio="xMidYMid meet"
>
    <g class="hover-check">
        <text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            Heinz: -16800
        </text>
        <rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
        </rect>
        <rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
              opacity="0">
        </rect>

    </g>
</svg>