web-dev-qa-db-fra.com

Comment définir min-font-size en CSS

Je souhaite définir une taille de police minimale pour chaque élément de ma page HTML.

Par exemple, s'il existe des éléments dont la taille de police est inférieure à 12px, ils passeront à 12px.
Mais s’il existe des éléments avec une taille de police plus grande que 12 pixels, ils ne changeront pas.

Est-il possible de le faire avec CSS?

html5css3font-size
57
nrofis

Non. Vous pouvez définir une taille de police de base sur body à l'aide de la commande font-size propriété, tout élément après qui spécifie une taille plus petite remplacera la règle de base pour cet élément. Pour faire ce que vous cherchez, vous devez utiliser Javascript.

Vous pouvez parcourir les éléments de la page et changer les polices plus petites en utilisant quelque chose comme:

$("*").each( function () {
    var $this = $(this);
    if (parseInt($this.css("fontSize")) < 12) {
        $this.css({ "font-size": "12px" });   
    }
});

Voici un Fiddle où vous pouvez le voir se faire: http://jsfiddle.net/mifi79/LfdL8/2/

3
mifi79

Dans CSS3, il existe un hack simple mais brillant pour cela:

font-size:calc(12px + 1.5vw);

En effet, la partie statique de calc () définit le minimum. Même si la partie dynamique risque de diminuer à quelque chose comme 0.

155
Marc Ruef

Ce n'est probablement pas exactement ce que vous voulez, mais en CSS 3, vous pouvez utiliser la fonction max.

Exemple:

blockquote {
    font-size: max(1em, 12px);
}

De cette façon, la taille de la police sera 1em (si 1em> 12px), mais au moins 12px.

Malheureusement, cette fonctionnalité CSS3 géniale n'est pas encore supportée par les navigateurs, mais j'espère que cela changera bientôt!

32
Stefan Steiger

Utilisez une requête média. Exemple: c’est quelque chose qui utilise la taille originale est 1.0vw mais quand il frappe 1000 la lettre devient trop petite donc je l’agrandis

@media(max-width:600px){
    body,input,textarea{
         font-size:2.0vw !important;
    }
}

Ce site sur lequel je travaille ne répond pas à plus de 500 pixels, mais vous pourriez avoir besoin de plus. Le pro, avantage de cette solution est que vous gardez la mise à l’échelle de la taille de la police sans avoir de super mini-lettres et que vous pouvez la garder libre.

9
zardilior

On dirait que je suis un peu en retard, mais pour les autres personnes ayant ce problème, essayez ce code

p { font-size: 3vmax; }

utilisez la balise que vous préférez et la taille que vous préférez (remplacez la 3)

p { font-size: 3vmin; }

est utilisé pour une taille maximale.

7
ccc

Solution CSS:

.h2{
  font-size: 2vw
}
@media (min-width: 700px) {
  .h2{
    /* Minimum font size */
    font-size: 14px
  }
}
@media (max-width: 1200px) {
  .h2{
    /* Maximum font size */
    font-size: 24px
  }
}

Juste au cas où certains auraient besoin de scss mixin:

///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback),
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///

@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;
}
4
Syed

Autant que je sache, ce n'est pas possible avec CSS simple,
mais vous pouvez effectuer une opération jQuery assez coûteuse comme:

démo de jsBin

$('*').css('fontSize', function(i, fs){
  if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});

Au lieu d'utiliser le Global Selector* Je vous suggérerais (si possible) d’être plus précis avec vos sélecteurs.

1
Roko C. Buljan

À en juger par votre commentaire ci-dessus, vous êtes prêt à le faire avec jQuery - voici:

// for every element in the body tag
$("*", "body").each(function() {
  // parse out its computed font size, and see if it is less than 12
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    // if so, then manually give it a CSS property of 12px
    $(this).css("font-size", "12px")
});

Une façon plus simple de faire cela pourrait être d’avoir une classe "min-font" dans votre CSS qui définit font-size: 12px, et d’ajouter la classe à la place:

$("*", "body").each(function() {
  if ( parseInt($(this).css("font-size"), 10) < 12 )
    $(this).addClass("min-font")
});
0
Patrick Harrington