[css] CSS를 사용하여 텍스트를 늘릴 수 있습니까?

Program / 글쓴이

CSS에서 텍스트를 늘릴 수 있습니까? 글꼴이 더 커지는 것을 원하지 않습니다. 글꼴 옆의 작은 텍스트보다 더 굵게 표시되기 때문입니다. 텍스트를 세로로 늘려서 변형되었습니다. 이것은 하나의 div에 있고 그 옆의 일반 텍스트는 다른 div에 있습니다. 어떻게해야합니까?

답변

예, 실제로 CSS 2D 변환을 사용할 수 있습니다. 이것은 IE9 +를 포함한 거의 모든 최신 브라우저에서 지원됩니다. 다음은 예입니다.

실제 HTML / CSS 스트레치 예제

HTML

<p>I feel like <span class="stretch">stretching</span>.</p>

CSS

span.stretch {
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}

힌트 : 텍스트 충돌을 방지하기 위해 확장 된 텍스트에 여백을 추가해야 할 수도 있습니다.

답변

수직은 쉬운 부분이기 때문에 텍스트의 수평 확장에 대해 대답하겠습니다. “transform : scaleY ()”

.stretched-text {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 32px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
  margin-bottom: -50%;
}
span {
  font-size: 16px;
  vertical-align: top;
}
<span class="stretched-text">this is some stretched text</span>
<span>and this is some random<br />triple line <br />not stretched text</span>

스 니펫 확장

글자 간격 은 글자 사이에 공백 을 추가하고 아무것도 늘리지 않지만 상대적입니다.

인라인 요소가 너무 제한적이고 아래 코드가 다르게 작동하지 않기 때문에 인라인 차단

이제 차이를 만드는 조합

글꼴 크기 를 사용하여 원하는 에 도달하십시오. 그렇게하면 텍스트의 길이와 텍스트 앞뒤의 텍스트가 표시됩니다 (scaleX는 보여주기 위해 브라우저에 여전히 요소가 표시됩니다) 다른 요소를 배치 할 때 원래 크기로).

scaleY 그것을 옆에있는 텍스트와 동일합니다 그래서, 텍스트의 높이를 줄일 수 있습니다.

변형 기원 을 사용하여 줄의 맨 위에서 텍스트 크기를 조절하십시오.

margin-bottom 은 음수 값으로 설정되어 다음 줄이 훨씬 아래로 떨어지지 않도록하십시오-바람직하게는 백분율로 줄 높이 속성을 변경하지 않습니다.
텍스트가 실제 크기가 32px이기 때문에 텍스트가 다른 높이로 떠 다니기 전후의 세로 정렬 을 맨 위로 설정

-단순 범위 요소의 글꼴 크기는 참조 용입니다.

이 질문은 스트레치로 인한 텍스트의 굵게 를 방지하는 방법을 요청했지만 여전히 하나도 제공하지는 않지만 font-weight 속성은 normal 및 bold 보다 많은 값을 갖습니다 .

알다시피, 당신은 그것을 볼 수 없지만 적절한 글꼴 을 검색 하면 더 많은 값을 사용할 수 있습니다.

답변

엄밀히 말하면 그러나 당신이 할 수있는 것은 당신이 될 수있는 뻗어 글꼴을 좋아하고, 것처럼 높이로있는 글꼴 크기를 사용하는 것입니다 다음 으로 수평으로 응축 font-stretch.

답변

“MENU”와 같은 짧은 텍스트에 대해 생각할 수있는 유일한 방법은 모든 단일 문자를 범위에두고 나중에 컨테이너에 정당화하는 것입니다. 이처럼 :

<div class="menu-burger">
  <span></span>
  <span></span>
  <span></span>
  <div>
    <span>M</span>
    <span>E</span>
    <span>N</span>
    <span>U</span>
  </div>
</div>

그리고 CSS :

.menu-burger {
  width: 50px;
  height: 50px;
  padding: 5px;
}

...

.menu-burger > div {
  display: flex;
  justify-content: space-between;
}

답변

CSS 글꼴 스트레치는 이제 모든 주요 브라우저에서 지원됩니다 (iOS Safari 및 Opera Mini 제외). 확장 글꼴을 지원하는 일반적인 글꼴 모음을 찾는 것은 쉽지 않지만 다음과 같이 압축을 지원하는 글꼴을 쉽게 찾을 수 있습니다.

font-stretch: condense;
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;

답변

디자이너가 나에게 글꼴을 늘릴 때 항상이 페이지로 돌아옵니다. 수용 된 솔루션은 훌륭하게 작동하지만 종종 마진 문제가 발생합니다.

문제가 발생하면 너비 대신 높이에서 변형을 사용하는 것이 좋습니다. 현재 프로젝트에서 더 안전합니다.

.font-stretch {
    display: inline-block;
    -webkit-transform: scale(1,.9);
    -moz-transform: scale(1,.9);
    -ms-transform: scale(1,.9);
    -o-transform: scale(1,.9);
    transform: scale(1,.9);
}

답변