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

Question

我正在尝试在 main.scss 文件中导入 Google 字体，但以下代码不起作用：

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

有办法吗？我在 Whosebug 中寻找这个问题，但没有找到具体答案...

有人可以帮我吗？

Answer 1

不要使用 url()，请尝试以下操作：

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

Answer 2

我案例中的另一个示例，用于多次导入：

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';

Answer 3

将 Google 字体导入 Sass 的正确语法：

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

Answer 4

没错，使用 Gulp and Dart Sass，两者都有效。我更喜欢Sass-方式，只是说。因此，使用新的 Google 字体语法：

@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 文件中，您就完全不用担心了。

SCSS: How can import a Google Font inside a SCSS file?