HTML / CSS - 如何阻止字体在倾斜的形状内变为“斜体”？ [复制]答案

【问题标题】：HTML /CSS - How to stop the font from becoming "italic" inside a skewed shape? [duplicate]HTML / CSS - 如何阻止字体在倾斜的形状内变为“斜体”？ [复制]
【发布时间】：2021-09-29 02:12:00
【问题描述】：

我所拥有的是两个倾斜的平行四边形形状，我想要做的是阻止它们内部的字体变为“斜体”（正如您在下面的 CSS 代码中看到的，我将其设置为粗体）。

.left-bar {
    transform: skew(-30deg); /* Equal to skewX(10deg) */
    background-color:#00A0DF;
    color: whitesmoke;
    width: 250px;
    height: 250px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    float: left;
  }

  .right-bar {
    transform: skew(-30deg); /* Equal to skewX(10deg) */
    background-color:#425CC7;
    color: whitesmoke;
    width: 250px;
    height:250px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    float: right;
  }

<div class="container-fluid text-center h-100 ">
    <div class="row mt-3">
                <div class="col left-bar text-center mr-3 pt-5">Find your favorite product</div>
        <div class="col right-bar text-center ml-1 mt-5  pt-5">In two easy steps</div>
</div>
</div>

关于如何解决这个问题的任何想法？还想听听一些关于如何只倾斜形状的一侧的建议，但这是另一个话题。

【问题讨论】：

只需对文本容器应用相反程度的倾斜。

标签： html css fonts

【解决方案1】：

.left-bar {
    transform: skew(-30deg); /* Equal to skewX(10deg) */
    background-color:#00A0DF;
    color: whitesmoke;
    width: 250px;
    height: 250px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    float: left;
  }
  
  .right-bar {
    transform: skew(-30deg); /* Equal to skewX(10deg) */
    background-color:#425CC7;
    color: whitesmoke;
    width: 250px;
    height:250px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    float: right;
  }
  
  .left-bar span,
  .right-bar span{
        display:inline-block;
        transform: skew(30deg);  
  }

<div class="container-fluid text-center h-100 ">
    <div class="row mt-3">
        <div class="col left-bar text-center mr-3 pt-5"><span>Find your favorite product</span></div>
        <div class="col right-bar text-center ml-1 mt-5  pt-5"><span>In two easy steps</span></div>
</div>
</div>

【讨论】：