我想为每种语言使用不同的字体。 (SCSS)

Question

我想为每种语言设置不同的字体。

但这不起作用。(hugo 0.90.2)

怎么了？

@font-face {
  font-family: 'Noto Sans KR';
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
  unicode-range: U+AC00-D7A3, U+0030-0039;
}
@font-face {
  font-family: 'Poppins';
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
  unicode-range: U+0041-005A, U+0061-007A;
}

:root {
  --font-family-heading: 'Poppins', 'Noto Sans KR', sans-serif;
  --font-family-paragraph: Helvetica, 'Noto Sans KR', sans-serif;
  --font-family-mono: monospace, 'Noto Sans KR';
  --base-color: #ffffff;
  --base-offset-color: #eaeaea;
  --highlight-color: #7b16ff;
  --heading-color: #1c1b1d;
  --text-color: #4e5157;
}

我的网站 https://ravenearth.com

Answer 1

为此使用 :lang 选择器。例如：

/* Selects any <p> in English (en) */
p:lang(en) {

}

Answer 2

您没有正确定义 css 字体系列变量。您应该提供一个或多个字体系列名称的优先列表。第一个将是最优先的字体系列名称，如果它丢失 - 浏览器将从列表中获取下一个字体系列名称，依此类推。


:root {
  --font-family-heading: 'Poppins', 'Noto Sans KR', sans-serif;
  --font-family-paragraph: 'Noto Sans KR', Helvetica, sans-serif;
  --font-family-mono: 'Noto Sans KR', monospace;
  ...
}

要根据所选语言覆盖根变量，您可以使用“:lang()”选择器：

// Korean language
html:lang(ko):root {
    --font-family-h1: sans-serif;
}

// English language
html:lang(en):root {
    --font-family-h1: monospace;
}

我想为每种语言使用不同的字体。 (SCSS)

I want to have different fonts for each language. (SCSS)

css

sass

fonts

hugo