Question

我正在使用bootstrap，并且我试图使一个提示段p.tiny文本的大小非常小。使用开发人员的工具向我显示，如果字体小于15像素，则字体不能更小。以下是我的尝试：

＆＃13;

window.history.back();

＆＃13;

nav,
.container {
  display: none;
}

h1 {
  color: red;
}

div.panel * {
  text-align: center;
  font-family: AraJozoor-Regular, Arial, Ubuntu, serif;
  text-shadow: 1px 0px 2px #800000;
}

div.panel hr {
  height: 20px;
  background: red;
}

div.panel img {
  display: block;
  margin: 0 auto;
}

p.tiny {
  font-size: 8px !important;
  text-shadow: none;
  font-style: italic;
  font-weight: 400;
  font-family: sans-serif;
}

＆＃13;

<div class="panel">
  <img src="/imgs/wrong.png" />
  <h1>Error: 1</h1>
  <h3>This Application Works Only With Javascript Enabled Browsers.</h3>
  <h3>Please contact the system Administrator.</h3>
  <div>Your browser: Chrome, Version: 61.0<sup>(*)</sup></div>

  <hr />
</div>
<p class="tiny">(*): It`s estimated information and it may not be accurate enough.</p>

＆＃13;

我还尝试使用比例单位设置p.tiny的字体大小，即%和em，但这也不会减小字体大小。

Answer 1

某些浏览器具有“最小字体大小”设置（例如Firefox：10px），并且它们不会显示小于该值的文本以使其始终可读。这纯粹是一个浏览器设置，并覆盖任何CSS规则。如果您将此设置更改为8px，您将看到所需的结果，但其他用户不会，除非他们在浏览器中更改了该设置。

Answer 2

您在问题中提供的代码在</head>和<body>之间具有样式和脚本标记。这不合法。尝试移动标签？

这是一个工作版本 plnkr.co/edit/FFB1K3j1dmUaWdBir5M9?p=preview

使用CSS无法减少字体大小

2 个答案: