Question

我有一个样式问题，我希望该字体看起来与我的拙劣MSPaint示例相似。

我尝试了无数种方法，例如使用引导程序并尝试通过网格系统进行构建，但是存在一些相当严重的空白问题，并且伸缩性不好。

What I would like it to look like.

帮助会很棒。

Answer 1

您可以使用伪元素添加％

.discount {
  display: inline-block;
  position: relative;
  font-size: 40px;
}
.discount::after {
  content: "% off";
  display: block;
  left: 100%;
  font-size: 18px;
  line-height: 18px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

<div class="discount">50</div>

Answer 2

您可以使用grid和flex来实现此目的

.row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    width: 50px;
}

.row .col {
    font-size: 3rem;
}

.row .col2 {
    display: flex;
    flex-direction: column;
    font-size: 1.3rem;
}

<div class="row">
    <div class="col">
        50
    </div>
    <div class="col2">
        <div class="top">
            %
        </div>
        <div class="bottom">Off</div>
    </div>
</div>

Answer 3

尝试这个...

<h3 style="display: inline-block;">
    50  <sub style="margin-left: -4%;">off</sub>
    <sup style="margin-left: -32%;"> % 
   </sup>    
</h3>

Answer 4

找到以下用于自定义和普通小数表示的完整代码：

<!DOCTYPE html>
<html>

<head>
  <title>Fraction</title>
  <style>
    * {
      font-family: sans-serif;
      font-weight: 600;
    }
    
    .wn {
      font-size: 45px;
    }
    
    .frac {
      display: inline-block;
      position: relative;
      letter-spacing: 0.001em;
    }
    
    .frac>span {
      display: block;
      padding: 0.1em;
    }
  </style>
</head>

<body>
  <h3>To display custom fraction</h3>
  <div><span class="wn">50</span>
    <div class="frac">
      <span>%</span>
      <span class="bottom">OFF</span>
    </div>
  </div>
  <hr>
  <h3>To display normal fractional representation</h3>
  <div>1 &frac12;</div>

</body>

</html>

Answer 5

您可以尝试执行此操作（如果需要单独的%和OFF来分别设置样式）：

.discount{
  position: relative;
  font-size: 40pt;
  font-weight: bold;
}
.discount:after{
  content:"%";
  position: absolute;
  top:0;
  left: 100%;
  font-size: 18pt;
  box-sizing: border-box;
}
.discount:before{
  content:"OFF";
  position: absolute;
  bottom:0;
  left: 100%;
  font-size: 18pt;
}

<span class="discount">50</span>

您如何将文本样式化为分数？

5 个答案: