SCSS：如何在SCSS文件中导入Google字体？

Question

我试图在main.scss文件中导入Google字体，但是以下代码没有起作用：

@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");

有没有办法做到这一点？我在stackoverflow上寻找这个问题，但我没有找到一个明确的答案...

有人能帮我吗？

- Albert Font

Answer 1

不要使用url()，尝试使用以下代码：

@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700';

- heyitsjhu

Answer 2

正确的导入 Google 字体到 Sass 的语法如下：

@import url('https://fonts.googleapis.com/css2?family=Alegreya + Sans + SC:wght@400;500;800');

- Hany Afifi

Answer 3

目前，使用 Gulp 和 Dart Sass，两者都可以工作。我更喜欢 Sass 的方式，只是这么说而已。因此，使用新的 Google Fonts 语法：

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");

或者

@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap";

使用Sass编译成CSS可以得到完全相同的结果。如果您在.scss文件中添加其中一个，就不必担心任何问题。

- Federico Moretti

Answer 4

从我的案例中，另一个多重导入的示例：

CSS： @import url('https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap');

SCSS： @import 'https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap';

- Arin Yazilim