字体调整为大字体会导致无法阅读的文本答案

【问题标题】：Font resize to large font causes unreadable text字体调整为大字体会导致无法阅读的文本
【发布时间】：2017-06-01 05:17:20
【问题描述】：

我想将字体大小设置为 700%，但这会导致文本无法阅读。

正文的字体大小设置为：

small

以下是一些截图：

HTML：

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

Css（萨斯）：

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 和 Materializecss。

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

【问题讨论】：

为什么不使用vh' , 'em', 'rem' or vmin'？
它们导致同样的问题

标签： html css font-awesome font-size

【解决方案1】：

问题是由 Chrome 禁用网络安全模式引起的。

因此，如果您遇到此问题，请在没有以下情况下运行 Chrome：

--disable-web-security --user-data-dir

【讨论】：