Question

定义说1vw = 1% of viewport width。但我不明白与font-size一起使用时的含义是什么？例如，如果我设置它意味着什么：

h1 {
  font-size: 10vw;
}

我认为如果我的h1有10个字符，那么它将需要100％的视口，但事实并非如此。

Answer 1

字体大小是指字体的垂直大小，而不是字符宽度

请参阅下面的演示，了解它们的反应方式。

h1 {
  font-size: 10vw;
}
h1:nth-of-type(2) {
  font-size: 10vh;
}

<h1>MY HEADER</h1>

<h1>MY HEADER</h1>

JSfiddle Demo

Answer 2

正如Paulie_D所说：

字体大小是指字体的垂直大小，而不是字符宽度。

如果您正在寻找角色的宽度，您可能需要查看font-weight（对于角色的粗细）或font-kerning（对于角色之间的间距）。

Answer 3

implicit val s1Format = jsonFormat3(S1) //assuming S1 and S2 are case classes implicit val s2Format = jsonFormat5(S2) //with 3 and 5 parameters respectively implicit object bFormat extends RootJsonFormat[B] { //assuming both objects have a field called "myTypeField" def read(jv: JsValue) = jv.asJsObject.fields("myTypeField") match { case JsString("s1") => jv.convertTo[S1] case JsString("s2") => jv.convertTo[S2] } def write(b: B) = b match { case s1: S1 => s1Format.write(s1) case s2: S2 => s2Format.write(s2) } }单位基于视口的宽度。

vw是浏览器视口宽度的1％。（1vw是高度的对应值）

这意味着如果视口为vh宽，则600px为10vw，这就是您的字体有多高

这也意味着可以相对于屏幕宽度设置包括高度在内的尺寸，这对于保持纵横比非常有用。这意味着您的字体大小将响应视口的大小，即can't do with a font any other way

It's not supported in all cases，因此最好提供一个像素回退，如下所示：

60px

CSS3 vw for font-size：这是什么意思

3 个答案: