奇怪的文字大小（更改或缩放）

Question

更新

好的，在尝试了 Muszla 提供的答案之后

移动/小视图似乎存在缩放问题。您可以看到文本大小设置为 48px（这是我想要的），但在它上面您可以看到屏幕呈现 57px。任何帮助弄清楚为什么会发生这种情况都会很棒！

更新前的问题

所以我遇到了最奇怪的前端问题，将文本从 20 像素更改为 43.81 像素。它似乎取决于标题和内容的长度。进行快速字符计数后，我在内容部分中需要有 276 个字符才能正确调整大小。

如果我将下面的示例 Forgive me Father for I have sinned.............. "go on" says the priest. "I swore the other day" says the man. "continue" says the priest. "I was on the golf course the other day and i hit my drive, it was looking perfect, heading dead straight. About 200 yards down my ball 更改为该示例，但最后一个单词只有一个 l（又名球到 bal），那么它会缩小到下面的小尺寸。关于可能导致此问题的任何指示都会很棒！

这是我的scss

%faq-base {
  font-family: "BentonSans Regular", "Helvetica", arial, sans-serif; // This needs to be implemented in the @font-face
  margin: 20px;
  -webkit-text-size-adjust: auto;
}

.title {
  @extend %faq-base;
}

.subtitle {
  @extend %faq-base;
  font-size: 20px
}

.faq {
  @extend %faq-base;
  margin: 30px;
  line-height: 20px;

  .question {
    font-size: 14px;
    font-weight: bold;
  }
  .answer {
    font-size: 12px;
    margin-left: 20px;
  }
}

a {
  color: #0091bb;
  text-decoration: none;
  outline: none;
}

这是风景

<%= stylesheet_link_tag 'application.css' %>
<p id="notice"><%= notice %></p>
<h2 class="subtitle"><%= @faq_category.name %></h2>
<div class="faq">
  <% @faq_category.faq_entries.each do |faq| %>
      <h3 class="question"><%= raw faq.question %></h3>
      <p class="answer"><%= raw faq.answer %></p>
  <% end %>
</div>

这是一个不正常工作的示例，然后又正常工作。

Answer 1

它总是会很奇怪。删除这个：获取 -webkit-text-size-adjust: auto; 并使用@media 查询并为正确的窗口大小设置正确的字体大小：

示例：

@media screen and (max-width: 700px) {
  .subtitle {
    font-size: 20px;
  }
}
@media screen and (min-width: 701px) {
  .subtitle {
    font-size: 40px;
  }
}

您还可以通过以下方式将文本包装在容器内：

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}