CSS에서 최소 글꼴 크기를 설정하는 방법

CSS에서 최소 글꼴 크기를 설정하는 방법

---

HTML 페이지의 모든 요소에 최소 글꼴 크기를 설정하고 싶습니다.

예를 들어 글꼴 크기가 12px 미만인 요소가 있으면 12px로 변경됩니다.
그러나 글꼴 크기가 12px보다 큰 요소가 있으면 변경되지 않습니다.

CSS로 할 수있는 방법이 있습니까?

---

아니요 body. font-size속성 을 사용하여 기본 글꼴 크기를 설정할 수 있지만 그 이후에 더 작은 크기를 지정하는 모든 항목은 해당 요소의 기본 규칙을 재정의합니다. 원하는 작업을 수행하려면 Javascript를 사용해야합니다.

페이지의 요소를 반복하고 다음과 같은 것을 사용하여 더 작은 글꼴을 변경할 수 있습니다.

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

다음은 완료 한 것을 볼 수있는 Fiddle입니다. http://jsfiddle.net/mifi79/LfdL8/2/

---

CSS3에는 간단하지만 훌륭한 해킹이 있습니다.

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

이는 calc ()의 정적 부분이 최소값을 정의하기 때문입니다. 동적 부분이 0에 가까운 것으로 축소 될 수 있지만.

---

이것은 아마도 당신이 원하는 것은 아니지만 CSS 3에서는 max-function을 사용할 수 있습니다.

예:

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

이렇게하면 글꼴 크기는 1em (1em> 12px 인 경우)이되지만 최소 12px가됩니다.

안타깝게도이 멋진 CSS3 기능은 아직 어떤 브라우저에서도 지원되지 않지만 곧 변경되기를 바랍니다.

---

미디어 쿼리를 사용하십시오. 예 : 이것은 원래 크기를 사용하는 메신저가 1.0vw이지만 1000에 도달하면 글자가 너무 작아 져서 크기를 늘립니다.

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

내가 작업중인이 사이트는> 500px에 대해 응답하지 않지만 더 필요할 수 있습니다. 이 솔루션의 장점은 초소형 글자없이 글꼴 크기 조정을 유지하고 js를 무료로 유지할 수 있다는 것입니다.

---

조금 늦은 것 같지만이 문제가있는 다른 사람들은이 코드를 사용해보십시오.

p { font-size: 3vmax; }

선호하는 태그와 원하는 크기를 사용하십시오 (3을 대체하십시오).

p { font-size: 3vmin; }

최대 크기에 사용됩니다.

---

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
  }
}

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;
}

---

AFAIK 일반 CSS로는 불가능
하지만 다음과 같이 꽤 비싼 jQuery 작업을 수행 할 수 있습니다.

jsBin 데모

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

_{전역 선택기 를 사용하는 대신 *가능한 경우 선택기를 더 구체적으로 지정하는 것이 좋습니다.}

---

위의 의견으로 판단하면 jQuery로이 작업을 수행하는 것이 좋습니다. 다음은 다음과 같습니다.

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

이를위한 더 깨끗한 방법은 CSS에 font-size : 12px를 설정하는 "min-font"클래스를두고 대신 클래스를 추가하는 것입니다.

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

참고 URL : https://stackoverflow.com/questions/23984629/how-to-set-min-font-size-in-css