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

Question 1

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

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

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

Question 2

아니요 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/

Question 3

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

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

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

Question 4

12 월 중순 2019으로, CSS4의 최소 / 최대 기능 당신이 원하는 것을 정확히 :
(주의 트레드, 이것은 아주 새로운, IE & msEdge) 일명 이전 버전의 브라우저는 (아직 지원하지 않음)
(의로 지원 Chromium 79 및 Firefox v75)

https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max

예:

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

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

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

편집하다:

이전에는 CSS3의 일부 였지만 CSS4 용으로 다시 예약되었습니다.
에 따라 2019 년 12 월 11 , 지원 79 (안드로이드 포함하여, 안드로이드 웹보기에), 오페라 66, 사파리 11.1 포함 애너하임 일명 또한 같은 마이크로 소프트 Chredge에 크롬 / 크롬에 도착 (포함. 아이폰 OS)

Question 5

내가 조금 늦어 보이지만이 문제가있는 다른 사람들은이 코드를 시도하십시오.

p { font-size: 3vmax; }

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

p { font-size: 3vmin; }

최대 크기에 사용됩니다.

Question 6

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

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

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

Question 7

CSS에는 상한과 하한 사이의 값을 보유하는 clamp () 함수가 있습니다. clamp () 함수를 사용하면 정의 된 최소값과 최대 값 사이의 값 범위에서 중간 값을 선택할 수 있습니다.

단순히 3 차원을 취합니다.

최소값.
목록 항목
기본 값 허용되는 최대 값입니다.

아래 코드로 시도하고 창 크기 조정을 확인하면 콘솔에 표시되는 글꼴 크기가 변경됩니다. 나는 최대 값 150px과 최소값을 설정 합니다 100px.

$(window).resize(function(){
    console.log($('#element').css('font-size'));
});
console.log($('#element').css('font-size'));

h1{
    font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100px, 10vw, 150px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
  <h1 id="element">THIS IS TEXT</h1>
</center>

스 니펫 확장

Question 8

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

Question 9

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

jsBin 데모

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

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

Question 10

font-min-size및 font-max-sizeCSS 속성은 한 제거 는 CSS 글꼴 모듈 레벨 4 규격 (와 브라우저 AFAIK에서 구현되지 않음)에서. 그리고 CSS 워킹 그룹은 font-size: clamp(...)아직 최고의 브라우저 지원 을 제공하지 않는 CSS 예제를 대체 했기 때문에 브라우저가이를 지원할 때까지 기다려야합니다. https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples의 예를 참조하십시오 .

Question 11

위의 의견으로 판단하면 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")
});

Question 12

50px에서 완벽하게 작동합니다. 정적 및 최소 너비로 작동합니다.

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