Comment définir min-taille de police en CSS

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

Par exemple si il y a des éléments avec une taille de police inférieure 12px, puis ils vont changer de 12px.

Mais si il y a des éléments avec une taille de police d'une râpe, puis 12px, ils ne changeront pas.

Est-il possible de le faire avec du CSS?

InformationsquelleAutor nrofis | 2014-06-01

3

Pas. Alors que vous pouvez définir une taille de police sur body à l'aide de la font-size bien, quoi que ce soit après que qui spécifie une taille plus petite va remplacer la base de la règle de l'élément. Afin de faire ce que vous voulez faire, vous aurez besoin d'utiliser le Javascript.

Vous pourriez faire une itération sur les éléments de la page et de modifier les petites polices d'utiliser quelque chose comme ceci:
```
$("*").each( function () {
    var $this = $(this);
    if (parseInt($this.css("fontSize")) < 12) {
        $this.css({ "font-size": "12px" });   
    }
});
```
Ici est un Violon, où vous pouvez voir qu'il fait: http://jsfiddle.net/mifi79/LfdL8/2/
- Est-il un moyen simple de les trouver avec des éléments jQuery avec la taille de moins de 12px?
- bien sûr, voir la modifier à ma réponse ci-dessus. Cheers!
- Itération sur TOUS les éléments sur une page et la modification d'une propriété CSS semble être une très mauvaise idée de rendement, d'un point de vue. Je ne suis pas un expert sur ce qui déclenche les remboursements, mais vous pourriez, par inadvertance, être la redistribution du contenu de la page a beaucoup de mal avec cette approche. Je ne recommande pas cette approche.
- Je suis avec @AvandAmiri - c'est une mauvaise approche, dans le sens que ce genre de pensée conduit à de nombreuses autres solutions de ce type sur une page, ce qui conduit alors à des non-performant sites et même des fuites de mémoire qui va planter votre application. La vraie réponse c'est (jusqu'à une taille de police de max devient un légitimement utilisable chose) est de renforcer l'architecture - concevoir et mettre en œuvre un bon système qui a juste fait les choses correctement. Il ne devrait pas être de tailles de police sur une page qui sont "accidentelle".
- Mais les tailles de police spécifiées avec vw devrait être accompagnée d'une min taille de la police ou autre chose, ils deviennent si petits dans xs.
- Dans ce cas, fixer une taille minimale de la police dans une requête de média, par exemple, si vous ne voulez pas que votre taille de la police pour aller en dessous de 10px: p{ font-size: 1vw } @media (max-width: 1000px){ p{ font-size: 10px } }
- attendre, donc si vous avez un élément avec (par exemple) width:10vw; min-width:1in alors vous ne pouvez pas empêcher la taille de la police de continuer à reculer même si l'élément n'est pas plus petit???!
InformationsquelleAutor mifi79
152

En CSS3, il est un simple mais brillant hack pour que:
```
font-size:calc(12px + 1.5vw);
```
C'est parce que la partie statique de calc() définit le minimum. Même si la partie dynamique pourrait réduire à quelque chose de proche de 0.
- fantastique hack!
- Je vous aime. C'est génial.
- C'est gentil, mais sur un très grand écran, TÉLÉVISEUR à écran plat)...
- vous pouvez utiliser les media queries pour cela: (a)media (max-width: 610px)...
- Génial! Exactement ce dont j'avais besoin. Merci!!!!
- ce doit être la accepté de répondre à
- Grande méthode: j'ai fait un codepen pour cela, mais pour la hauteur. Le changement " vh " à " vw " pour voir comment cela fonctionne avec la largeur. codepen.io/iamnotsam/stylo/JWXVxM
- J'ai tendance à utiliser vh pour les polices et ce truc juste révolutionné ma vie. Incroyable.
- Même si c'est un hack sympa, je dirais que ce n'est pas vraiment une solution, car elle affecte la taille de police lorsque la taille est supérieure au minimum, de sorte que vous avez à mettre en place avec ce supplément 12px (dans ce cas) en tout temps.
- si vous utilisez le stylet et souhaitez de l'aide pour définir une taille font-size "calc(%s + (%s - %s))" % (minSize size baseFontSize)
- Cela ne permettra pas de redimensionnement dynamique de la fenêtre, vous devez actualiser la page pour voir les changements.
InformationsquelleAutor Marc Ruef
32

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

Exemple:
```
blockquote {
    font-size: max(1em, 12px);
}
```
De cette façon, la taille de police sera cadratin (1 em (si cadratin (1 em > 12px), mais au moins 12px.

Malheureusement, cela génial CSS3 fonctionnalité n'est pas supportée par tous les navigateurs, mais j'espère que cela va bientôt changer!
- Edit: a Été retiré de CSS3, peut-être re-programmé pour CSS4...
- sérieusement, pourquoi ne comités des normes de toujours enlever le truc qui serait effectivement faire mon travail faisable!?
- le CSS WG supprime des trucs principalement en raison de l'absence de maître d'œuvre de l'intérêt ou de priorité. Il a besoin de deux implémentations indépendantes pour obtenir une fonctionnalité CSS dans une dernière Recommandation du W3C. Il n'y a pas de point dans l'écriture d'un livre et personne ne veut le pousser dans le monde réel logiciel. Vous devriez poser la question fournisseurs de navigateur ...
InformationsquelleAutor Stefan Steiger
8

Utilisez une requête de média. Exemple:
C'est quelque chose im en utilisant le format de l'original est 1.0 vw, mais quand il frappe 1000, la lettre est trop petit donc je agrandir
```
@media(max-width:600px){
    body,input,textarea{
         font-size:2.0vw !important;
    }
}
```
Ce site, j'y suis n'est pas réactif >500px, mais vous pourriez avoir besoin de plus. Le pro,l'avantage de cette solution est que vous garder la taille de la police de mise à l'échelle sans avoir super mini lettres et vous pouvez le garder js gratuit.
- ugh. cela rejoint l'élément à la résolution de la fenêtre, n'est-ce pas? qui signifie que, en général, vous auriez besoin d'un support distinct de requête pour chaque élément de la page.
InformationsquelleAutor zardilior
7

On dirait que je suis un peu en retard mais pour les autres, avec ce problème, essayez ce code
```
p { font-size: 3vmax; }
```
utiliser quelle que soit la marque que vous préférez et la taille que vous préférez (remplacer le 3)
```
p { font-size: 3vmin; }
```
est utilisé pour une taille max.
- Pas ce que je voulais.
- parfait. merci
- vmax et vmin sont effectivement utilisés pour spécifier des valeurs par rapport au point de vue/taille de la page. Le min et le max reportez-vous à minimum/maximum de viewport pas le min ou le max de la taille de la police - qui est ce que l'op a été demandé. (par exemple, si la hauteur est plus grande que la largeur de la fenêtre d'affichage de la vmax est égal à 100vmax = hauteur de la fenêtre d'affichage et 100vmin = largeur de la fenêtre d'affichage)
InformationsquelleAutor ccc

CSS Solution:

.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ù si certains ont besoin d'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;
}

InformationsquelleAutor Syed

1

Autant que je sache, il n'est pas possible avec du CSS,

mais vous pouvez faire une assez cher jQuery comme:

jsBin démo
```
$('*').css('fontSize', function(i, fs){
  if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});
```
_{au Lieu d'utiliser le Sélecteur Global *, je vous suggère (si possible) pour être plus précis avec votre sélecteurs.}

InformationsquelleAutor Roko C. Buljan

À en juger par votre commentaire ci-dessus, vous êtes OK de le faire avec jQuery — va ici:

//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")
});

D'une façon plus propre de le faire pourrait être d'avoir un "min-police" de la classe dans votre CSS qui définit font-size: 12px, et il suffit d'ajouter la classe à la place:

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

InformationsquelleAutor Patrick Harrington

Vous devez vous connecter pour publier un commentaire.