能否通过scss从目录中导入字体？

Question

我有一个scss文件，其中字体导入是以这种方式实现的：

@import url(https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&subset=latin-ext,cyrillic); 

我明白使用CDN可以在用户缓存方面带来优势，但这是内部网站，也可以在没有访问广域网的服务器上使用。而且我不确定用户机器是否也能够访问互联网。因此，我想使用其他页面静态文件服务于字体。

在SCSS中是否有一种方式可以从服务器上的某个目录导入字体？类似于：

@import dir(/path/to/fonts/file)

或者说SCSS没有这个功能？

- Paul

---

将@font-face直接添加到Sass文件中。 - mercury

Answer 1

据我所知，在SCSS中无法使用@import导入字体。你可以使用@font-face来引用字体。例如：

@font-face {
    font-family: 'Open Sans';
    src: url(path/to/file) format(Example: 'truetype' or 'opentype' depending on the file extension of your font);
}


// USAGE
body {
    font-family: 'Open Sans', sans-serif;
}

- JTrixx16

---

这就是来自谷歌字体的 @import 所做的事情。如果你将导入的 URL 放入浏览器中，你会看到以下内容（一堆 @font-face）。 - jassok

非常好用。现在建议在@font-face规则中添加font-display: swap;，这可以为您赚取一些额外的谷歌积分;) 请参见https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display - Fabian von Ellerts

我如何获得多种粗细的字体大小？ - Brainmaniac

Answer 2

虽然有点晚，但是你可以使用下面的格式与libsass配合进行外部引入：

@import url("http...");

- Romany Saad

---

我认为URL不应该有任何引号。 - Isaac Pak

有对应的 @use 用法吗？ @use url("http..."); 和 @use "http..."; 似乎无法正常工作。 - Nayfin

Answer 3

通常它用于导入CSS片段或文件，而不是字体。 如果您使用Ruby SASS/SCSS，请尝试此解决方法，不要使用括号。

@import "https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&subset=latin-ext,cyrillic.css"; 

我将 .css 文件放在其后面。在使用 Ruby SASS/SCSS 时可以生效，但在使用 LibSass 时却不行。

- Thielicious

Answer 4

import { SPComponentLoader } from '@microsoft/sp-loader';

在您的 Web 部件构造函数中，您可以使用 SPComponentLoader 加载它。

export default class WebPart extends BaseClientSideWebPart<WebPartProps> {
    constructor() {
      super();
    
      SPComponentLoader.loadCss('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
      
    }

}

- Mike

Answer 5

如果你在使用Angular，你可以在package.json中添加一个依赖项。

"@fontsource/nunito-sans": "^4.5.1",
"@fontsource/roboto": "^4.5.7",

然后你可以将这个添加到scss文件中作为导入。

@import "@fontsource/nunito-sans";
@import "@fontsource/roboto";

然后在样式中使用它们

$fontFamily: "Nunito Sans", "Roboto", "Helvetica Neue", sans-serif;

- cabaji99

Answer 6

试试这个

@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Caption&display=swap');

使用类似于font-family的样式

font-family: 'PT Sans Caption', sans-serif;

- Jenish MS

Answer 7

外部资源链接：

@font-face {
  src: url('https://fonts.googleapis.com/your-font')
  ...
}

链接到一个相关文件（对我来说没有起作用）：

@font-face {
  src: url('../../assets/fonts/your-font-name.woff2')
  ...
}

我在使用相对路径时遇到了一个问题，似乎是一个SCSS问题

所以我使用了绝对路径，它起作用了：

@font-face {
  src: url('/root-dir/assets/fonts/your-font-name.woff2')
  ...
}

- Edgars Pujāts