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

Program / 글쓴이

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에 가까운 것으로 축소 될 수 있지만.

답변

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)

답변

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

p { font-size: 3vmax; }

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

p { font-size: 3vmin; }

최대 크기에 사용됩니다.

답변

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

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

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

답변

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

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

  1. 최소값.
  2. 목록 항목
  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>

스 니펫 확장

답변

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