字体调整为大字体会导致文本无法读取

Question

我想将font-size设置为700％，但这会导致文本无法读取。

正文的字体大小设置为：

small

以下是一些截图：

HTML：

<div class="splash-page main-body" [@routerTransition]="">
  <div class="thisClassNameIsToLong">
    <span class="whyAreYouInspectingMe">
    Stijn Aerts
  </span>
  </div>
</div>

Css（Sass）：

html,body
  height: 100%
  font-size: small

.wrapper
  min-height: 100%
  position: relative

.main-body
  display: flex
  align-items: center
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%

.splash-page
  background: #1565C0

  .thisClassNameIsToLong
    margin: auto

    .whyAreYouInspectingMe
      font-family: "Pacifico"
      //font-family: "'Times New Roman', Times, serif"
      font-size: 600%
      white-space: nowrap
      color: white

.arrow-wrapper
  width: 100%
  margin: auto
  position: absolute
  bottom: 0
  text-align: center

.arrow-box
  margin: auto
  color: white
  text-align: center

  i
    color: white
    border-radius: 5px 5px 0px 0px
    background: rgba(0, 0, 0, 0.5)
    margin: 20px
    margin-bottom: 0
    padding: 20px
    cursor: pointer

也许值得一提的是我正在使用Angular v2和Materialisecss。

编辑：我也在使用Font-Awesome，当我排除它时，一切似乎都很好。非常奇怪。

Answer 1

问题是由Chrome停用网络安全模式造成的。

因此，如果您遇到此问题，请在不使用

的情况下运行Chrome

class Artikel(models.Model):
    price = models.FloatField(help_text ='Price')