字体大小：.8125rem；在新网站中使用时非常小

Question

我在一个空项目中设计了一个网页。现在我将它移动到一个新项目，该项目是一个带有主详细信息页面的 Visual Studio 2019 Webforms 项目，我将此页面转换为详细信息页面之一。我将脚本和 css 文件处理到新项目中，我可以看到它正在采用我原来的样式。

但是我在每个地方都使用了 font-size: 'some number'rem，字体渲染得非常小。我是 Web 开发的新手，并且了解“rem”根据我尚未完全理解的条件使字体大小动态化。但这并没有转移到移动应用程序中，源项目和目标项目都是完整大小的网站项目。

使用 google chrome Inspect 功能，我可以看到相关元素之一的样式。当我取消选中 font-size 属性时，字体呈现得更像正常。请参阅随附的屏幕截图。

如果页面是在一个环境中设计的，然后转移到一个新环境中，没有字体正确呈现，那么处理此类问题的最佳方法是什么？

谢谢。

Answer 1

'rem' 基于 html 的字体大小。

例如，如果html的字体大小是16pt（chrome默认），0.815rem大约是13pt。

如果只是修改html的font-size值，rem设置的所有font-size都会改变。

html {
    font-size: [some number]px;
}

Answer 2

我认为您混淆了 em 和 rem

• em 基于当前字体大小，1em 不会改变外观大小。
• rem 基于根字体大小 (html)，1rem 在文档中的任何位置都将具有相同的外观大小，而与当前字体大小无关。

运行此代码段以查看差异示例

:root {
  font-size: 14pt; 
}

.double-size {
  font-size: 2rem;
  border: 1px solid darkgray;
}

.point8125rem{
  font-size: 0.8125rem;
}

.point8125em{
  font-size: 0.8125em;
}

<p>This text is the root font size (14pt)</p>

<div class="double-size">
  <p>This text is twice the size of the root font size specificied by <code>font-size: 2rem;</code>.</p>
  
  <p class="point8125rem">This text is 0.8125rem, it is based on the root font size (14pt) and is the same as 14pt * 0.8125</p>

  <p class="point8125em">This text is 0.8125em, it is based on the current font size (28pt) and is the same as 14pt * 2 * 0.8125</p>
</div>

如果您将 CSS 更改为使用 0.8125em，那么您可能会得到您想要的结果。

在指定字体大小时，您应该认真考虑使用 rem，因为使用 em 可能会成为嵌套问题。