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

【问题标题】：I want to have different fonts for each language. (SCSS)我想为每种语言使用不同的字体。 (SCSS)
【发布时间】：2022-01-27 18:18:00
【问题描述】：

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

但这不起作用。(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

【问题讨论】：

标签： css sass fonts hugo

【解决方案1】：

为此使用:lang 选择器。这方面的一个例子可能是：

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

}

【讨论】：

【解决方案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;
}

【讨论】：