CSS transform- scale () -如何在不缩放容器的情况下缩放文本并保持适当的对齐方式

Question

我正在尝试转换一些字体，以便在大小方面看起来像另一个字体。问题是，当我这样做时，容器的大小也被调整了，并且我失去了我的对齐方式。我尝试了不同类型的显示(块显示，内联显示)，最后，我认为它可以工作，flex，但显然不是。使用CSS可以吗？

​

.block3 {
    display: flex;
    background-color: #a8a9ad;
    padding: 50px 30px;
    overflow: none;
    justify-content: space-evenly;

}

.address {
  display: flex;
  text-align: left;
  flex-direction: column;
  justify-content: left;
}

.address span {
  text-align: left;
}

.address p {
  margin: 5px;
  padding-left: 5px;
}

.address h2 {
  /* display: inline-flex; */
  font-size-adjust: 0.6;
  transform: scale(0.8, 1);
  text-align: left;
}

.terms-of-service {
  text-align: left;
}

<div class="block3">
  <div class="address col-content">
    <span><h2>CORPORATE CLEANING SERVICES LTD.</h2></span>
    <p>#106 – 20285 Stewart Crescent,</p>
    <p>Maple Ridge, BC, V2X 8G1</p><br>
    <p>Toll Free: 1-866-543-4666</p>
    <p>Telephone: 604-465-4699</p>
    <p>Fax: 604-465-4674</p>
  </div>
  <div class="terms-of-service col-content">
    <h2>Terms of Service</h2>
    <p>This site uses cookies. By continuing to use this site you are agreeing to our use of cookies. Please refer to Google's Privacy Terms and Terms of Service to see how cookies are used.</p>
  </div>
</div>

​

因此，在这里，我试图保持我的<h2>左对齐，但我似乎不能让它工作…

有什么想法吗？谢谢

Answer 1

如果你想左对齐你的缩放文本，你需要设置'transform-origin: left‘

.address h2 {
  font-size-adjust: 0.6;
  transform: scale(0.8, 1);
  text-align: left;
  transform-origin: left; //add this line
}

仅供参考:如果你希望缩放x和y相同，那么你可以使用transform: scale(0.8)而不是这个'transform: scale(0.8，1)‘。

您可以参考此链接了解更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

代码片段中的示例：

​

.block3 {
    display: flex;
    background-color: #a8a9ad;
    padding: 50px 30px;
    overflow: none;
    justify-content: space-evenly;

}

.address {
  display: flex;
  text-align: left;
  flex-direction: column;
  justify-content: left;
}

.address span {
  text-align: left;
}

.address p {
  margin: 5px;
  padding-left: 5px;
}

.address h2 {
  font-size-adjust: 0.6;
  transform: scale(0.8, 1);
  text-align: left;
  transform-origin: left; //add this line
}

.terms-of-service {
  text-align: left;
}

<div class="block3">
  <div class="address col-content">
    <span><h2>CORPORATE CLEANING SERVICES LTD.</h2></span>
    <p>#106 – 20285 Stewart Crescent,</p>
    <p>Maple Ridge, BC, V2X 8G1</p><br>
    <p>Toll Free: 1-866-543-4666</p>
    <p>Telephone: 604-465-4699</p>
    <p>Fax: 604-465-4674</p>
  </div>
  <div class="terms-of-service col-content">
    <h2>Terms of Service</h2>
    <p>This site uses cookies. By continuing to use this site you are agreeing to our use of cookies. Please refer to Google's Privacy Terms and Terms of Service to see how cookies are used.</p>
  </div>
</div>

​