如何在Angular 4项目中导入外部字体?
问题描述:
我有styles.less
在我ng项目的地方我导入谷歌字体根:如何在Angular 4项目中导入外部字体?
@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
答
角被添加“./”在此调用。见here它的原因。
你有2种选择:
- 包括在您的index.html
-
下载字体的字体,将其放置在资产文件夹,并调用它像这样:
@font-face { font-family: 'your-font-family'; src: url('/assets/fonts/your-donwloaded-font-1'), url('/assets/fonts/your-donwloaded-font-2'); }
答
您可以试试这种方式:
@chosen-font: 'PT Sans';
@chose-font-escaped: escape(@chosen-font);
@import url('https://fonts.googleapis.com/[email protected]{chose-font-escaped}:400,700&subset=cyrillic');
请检查本回购 - https://github.com/angular/angular-cli/issues/3176 –