html - Google 字体名称中带有空格，在 HTML 中正确的引用方式是什么？

Question

这是我从谷歌字体网页链接复制的字体。其他字体(muli、oswald、lato)工作正常，但当我尝试使用它时，sawarabi mincho 不会呈现，当我想使用 sawarabi mincho 时，chrome 似乎使用我的默认字体。

我试过了

p{
    font-family: Sawarabi_Mincho;
}
p{
    font-family: Sawarabi+Mincho;
}
p{
    font-family: Sawarabi Mincho;
}
p{
    font-family: "sawarabi+mincho";
}

但这些似乎都不起作用。

调用名称中有空格的字体的正确方法是什么？

Answer 1

Google Fonts告诉您如果单击字体上的“+”，然后单击“选择 1 系列”以显示工具窗口:

Specify in CSS

Use the following CSS rules to specify these families:

font-family: 'Sawarabi Mincho', sans-serif;

For examples of how fonts can be added to webpages, see the getting started guide.

所以这应该有效:

body {
  font-family: 'Sawarabi Mincho', sans-serif;
}

<!-- head: -->
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">

<!-- body: -->
<h1>A red flare silhouetted the jagged edge of a wing.</h1>