min-font-size 및 max-font-size와 같은 것이 있습니까?

브라우저 창에 반응하는 div에서 글꼴을 만들려고합니다. 지금까지, 그것은 완벽하게 작동하고 있지만 부모 DIV는이 max-width의 525px. 브라우저 크기를 더 조정해도 글꼴 크기 조정이 중지되지는 않습니다. 이 날이 그런 일 같은 경우 궁금해했다 min-font-size거나 max-font-size, 비슷한 무언가를 달성 할 수있는 방법이 있는지, 존재하지 그런 일이없는 경우.

백분율을 사용하면 효과가 있다고 생각 font-size했지만 일부 텍스트는 부모 div에 따라 크기가 조정되지 않습니다. 내가 가진 것은 다음과 같습니다.

상위 div의 CSS :

.textField{
    background-color:rgba(88, 88, 88, 0.33);

    width:40%;
    height:450px;

    min-width:200px;
    max-width:525px;

    z-index:2;
}

문제의 텍스트에 대한 CSS :

.subText{
    position:relative;
    top:-55px;
    left:15px;

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;

    z-index:1;
}

나는 인터넷에서 꽤 오랫동안 검색했지만 아무 소용이 없습니다.

아니요, 최소 또는 최대 글꼴 크기에 대한 CSS 속성이 없습니다. 브라우저에는 종종 최소 글꼴 크기에 대한 설정이 있지만 이는 작성자가 아닌 사용자가 제어합니다.

@media쿼리 를 사용 하여 화면 또는 창 너비와 같은 항목에 따라 일부 CSS 설정을 지정할 수 있습니다 . 이러한 설정에서 창이 매우 좁은 경우 글꼴 크기를 특정 작은 값으로 설정할 수 있습니다.

수식을 사용하고 뷰포트 너비를 포함하여이를 수행 할 수 있습니다.

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

이것은 최소 글꼴 크기를 7px로 설정하고 뷰포트 너비에 따라 .5vw로 증폭합니다.

행운을 빕니다!

CSS와 잘 작동합니다.

나는 같은 문제를 겪었고 다음과 같이 수정했습니다.

특정 너비 이상에서 최대 크기로 고정 된 "px"크기를 사용합니다. 그런 다음 다른 더 작은 너비의 경우 상대적인 "vw"를 화면의 백분율로 사용합니다.

아래 결과는 960px 미만의 화면에서 자체 조정되지만 위의 고정 크기를 유지한다는 것입니다. 헤더의 html 문서에 추가하는 것을 잊지 마세요.

<meta name="viewport" content="width=device-width">

CSS의 예 :

@media all and (min-width: 960px) {
h1{
    font-size: 50px;
  }
}

@media all and (max-width: 959px) and (min-width: 600px) {
h1{
    font-size: 5vw;
  }
}

@media all and (max-width: 599px) and (min-width: 50px) {
h1{
    font-size: 6vw;
  }
}

도움이 되길 바랍니다!

나는 여기에 조금 늦게오고 있습니다. 나는 그것에 대해 그다지 신용을 얻지 못합니다. 프로젝트를 위해 그렇게해야했기 때문에 아래 답변을 혼합하고 있습니다.

따라서 질문에 답하기 위해 : 이 CSS 속성과 같은 것은 없습니다 . 이유는 모르겠지만이 속성의 오용을 두려워하기 때문이라고 생각하지만 심각한 문제가 될 수있는 사용 사례를 찾지 못했습니다.

어쨌든 해결책은 무엇입니까?

: 두 개의 도구는 우리가 할 수 있도록 미디어 쿼리 ANS 폭스 바겐 속성을

1) CSS에서 수행하는 모든 단계에 대한 미디어 쿼리를 작성하여 글꼴을 고정 된 양에서 다른 고정 된 양으로 변경하는 "어리석은"솔루션이 있습니다. 작동하지만 매우 지루하고 매끄러운 선형 측면이 없습니다.

2) AlmostPitt가 설명했듯이 최소값에 대한 훌륭한 솔루션이 있습니다.

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

여기에서 최소값은보기 너비의 0.5 %에 추가하여 7px입니다. 그것은 이미 정말 멋지고 대부분의 경우에 작동 합니다. 미디어 쿼리가 필요하지 않으며 적절한 매개 변수를 찾는 데 시간을 투자하면됩니다.

선형 함수라는 것을 알았을 때 기본 수학은 두 점이 이미 매개 변수를 찾았다는 것을 학습합니다. 그런 다음 매우 큰 화면과 모바일 버전에 대해 원하는 글꼴 크기를 px로 수정 한 다음 과학적 방법을 원하는지 계산하십시오. 생각, 그것은 절대적으로 필요하지 않으며 시도하여 갈 수 있습니다.

3) 제목이 한 줄로 된 것을 절대적으로 원하지 않는 매우 지루한 클라이언트 (나와 같은)가 있다고 가정 해 봅시다. AlmostPitt 솔루션을 사용한 경우 글꼴이 계속 커지고 너비가 고정 된 컨테이너 (예 : 1140px에서 중지되는 부트 스트랩 또는 큰 창에 있음)가 있기 때문에 문제가 발생합니다. 여기에서는 미디어 쿼리도 사용하는 것이 좋습니다. 사실 애스펙트가 원치 않게되기 전에 컨테이너에서 처리 할 수있는 최대 픽셀 크기 (pxMax)를 찾을 수 있습니다. 이것이 최대 값이 될 것입니다. 그런 다음 중지해야하는 정확한 화면 너비 (wMax)를 찾아야합니다. (나는 당신이 직접 선형 함수를 역전시킬 수 있습니다).

그 후에 그냥

@media (min-width: [wMax]px) {
    h2{
        font-size: [pxMax]px;
    }
}

그러면 완벽하게 선형 이고 글꼴 크기가 더 이상 커지지 않습니다! 미디어 쿼리는 더 중요한 것으로 간주되고 이전 속성을 덮어 쓰므로 wMax 아래의 미디어 쿼리에 이전 CSS 속성 (calc ...)을 넣을 필요가 없습니다.

나는 이것을 위해 스 니펫을 만드는 것이 유용하다고 생각하지 않습니다. 전체 화면으로 만드는 데 어려움이 있고 결국 로켓 과학이 아니기 때문입니다.

이것이 다른 사람들에게 도움이되기를 바라며 AlmostPitt의 해결책에 대해 감사하는 것을 잊지 마십시오.

이것은 실제로 CSS4에서 제안되고 있습니다.

W3C의 작업 초안

인용문:

이 두 속성을 사용하면 웹 사이트 또는 사용자가 요소의 글꼴 크기를이 두 속성과 함께 제공된 범위 내에서 고정하도록 요구할 수 있습니다. 계산 된 값 font-size가 font-min-size 및 font-max-size에 의해 생성 된 경계를 벗어난 경우 font-size의 사용 값은이 두 속성에 지정된 값으로 고정됩니다.

이것은 실제로 다음과 같이 작동합니다.

.element {
    font-min-size: 10px;
    font-max-size: 18px;
    font-size: 5vw; // viewport-relative units are responsive.
}

이것은 말 그대로 글꼴 크기가 뷰포트 너비의 5 %가되지만 10 픽셀보다 작지 않고 18 픽셀보다 크지 않음을 의미합니다.

안타깝게도이 기능은 아직 어디에도 구현되지 않았습니다 (caniuse.com에서도 구현되지 않음).

Rucksack은 훌륭하지만 Gulp 또는 Grunt 등과 같은 도구를 구축하기 위해 반드시 의지 할 필요는 없습니다.

최소 및 최대 글꼴 크기를 쉽게 제어하기 위해 CSS 사용자 정의 속성 (CSS 변수)을 사용하여 데모 를 만들었습니다 .

이렇게 :

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

나는 이것들로 부드러운 결과를 얻었습니다. 연속적인 조각 함수처럼 3 개의 너비 범위 사이에서 부드럽게 흐릅니다.

@media screen and (min-width: 581px) and (max-width: 1760px){
    #expandingHeader {
        line-height:5.2vw;
        font-size: 5.99vw;
    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (min-width: 1761px){
    #expandingHeader {
        line-height:.9em;
        font-size: 7.03em;

    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (max-width: 580px){
    #expandingHeader {
        line-height:.9em;
        font-size: 2.3em;
    }
    #tagLine {
        letter-spacing: .1em;
        font-size: .65em;
        line-height: .10em;
    }
}

Sass를 사용하여 최소 및 최대 글꼴 크기를 제어 할 수 있습니다. 다음은 Eduardo Boucas의 훌륭한 솔루션입니다.

https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum-and-maximum-sizes.html

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

.limit-min {
  @include responsive-font(3vw, 20px);
}

.limit-min-max {
  @include responsive-font(3vw, 20px, 50px);
}

접근성 문제로 인해 px로 글꼴 크기 를 설정하는 것은 권장되지 않습니다 .

"사용자가 일부 브라우저에서 글꼴 크기를 변경할 수 없기 때문에 px로 글꼴 크기를 정의 할 수 없습니다. 예를 들어 시각 장애가있는 사용자는 웹 디자이너가 선택한 크기보다 훨씬 큰 글꼴 크기를 설정하려고 할 수 있습니다." ( https://developer.mozilla.org/en-US/docs/Web/CSS/font-size 참조 )

보다 접근하기 쉬운 접근 방식은 사용자 기본 크기 설정font-size: 100% 을 준수 하는 html에서 설정 하고 크기를 조정할 때 ( em또는 rem) @media 쿼리와 같이 백분율 또는 상대 단위를 사용하여 설정 하는 것입니다.

( https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/ 참조 )

예, SVG의 일부 브라우저에는 몇 가지 제한 사항이있는 것 같습니다. 개발자 도구는이를 8000px로 제한합니다. 예를 들어 Chrome에서 다음과 같이 동적으로 생성 된 차트가 실패합니다.

http://www.xn--dddelei-n2a.de/2018/test-von-svt/ 시도

<svg id="diagrammChart"
     width="100%"
     height="100%"
     viewBox="-400000 0 1000000 550000"
     font-size="27559"
     overflow="hidden"
     preserveAspectRatio="xMidYMid meet"
>
    <g class="hover-check">
        <text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            Heinz: -16800
        </text>
        <rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
        </rect>
        <rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
              opacity="0">
        </rect>

    </g>
</svg>