html - 这在 css 字体 : 20vmin/1 FontNameBold;? 中意味着什么

Question

我有一个元素，他们给了我一个带有以下 CSS 的起始站点:

h1 {
  //more styles...
  font: 20vmin/1 FontNameBold;
  
}

这是我第一次遇到诸如 font: 20vmin/1 FontNameBold; 之类的东西，这在 css 中应该做什么？

他们还在规范表中说:

Typography

Titles 21/48 FontNameBold

Body 16/48 FontNameBold

所以是的，我知道一个是标题，另一个是正文，但 21/48 实际上是什么？第一次找到这样的规范，一头雾水。

Answer 1

它是以下内容的简写:font-size/line-height font-family

视口(viewport)大小的排版:

vmin是随 CSS3 引入的一个值，它将根据您的视口(viewport)调整大小。 Chris Coyier does a fantastic job of explaining viewport sized typography on CSS Tricks.

在您的示例中，将某些内容设置为 20vmin会将字体大小设置为 20vw或 20vh , 以较小者为准。如果您的最小用户视口(viewport)大小(vh 或 vw)为 40cm，则将 font-size 设置为 20vmin 将除以该值 (40) 除以 20%，得到 8cm 的 font-size。

这背后的整个想法是，如果用户重新调整视口(viewport)的大小，您的字体大小将相应调整以获得更灵敏的用户体验。

行高属性:

line-height简单地定义行内元素上方和下方的空间量(例如 <p> 标签中的文本。Chris Coyier does a fantastic job of explaining the line-height property on CSS Tricks.