Angular4项目如何导入外部字体？

Question

我的 ng 项目的根目录中有 styles.less，我要在其中导入 google 字体：

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

但是出现错误：

Failed to compile.

./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":false}!./src/styles.less
Module build failed: 

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

^
Can't resolve './https://fonts.googleapis.com/cssfamily=PT+Sans:400,700&subset=cyrillic' in 'C:\apps-dev\ldrm\src' in C:\apps-dev\ldrm\src\styles.less (line 1, column 0)

@./src/styles.less 4:14-187

@multi ./src/styles.less

Answer 1

Angular 在此调用中添加“./”。请参阅 here 原因。

您有 2 个选择：

在您的 index.html

下载字体，放在assets文件夹中，这样调用：

@font-face {
    font-family: 'your-font-family';
    src: url('/assets/fonts/your-donwloaded-font-1'), 
         url('/assets/fonts/your-donwloaded-font-2');
}

Answer 2

你可以这样试试：

@chosen-font: 'PT Sans';
@chose-font-escaped: escape(@chosen-font);
@import url('https://fonts.googleapis.com/css?family=@{chose-font-escaped}:400,700&subset=cyrillic');

Angular4项目如何导入外部字体？

How to import external font in Angular 4 project?

less

angular