Question

我第一次使用css编译器（Stylus），我无法正确加载Google Web Font网址。

此：

@font-face {
  font-family: 'Roboto';
  font-style: light;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Roboto:300,500,700&subset=latin,latin-ext);
}

产生：

@font-face {
  font-family: 'Roboto';
  font-style: light;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light') url("data:application/octet-stream;base64,QGZvbnQtZmFjZSB7CiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nOwogIGZvbnQtc3R5bGU6IG5vcm1hbDsKICBmb250LXdlaWdodDogMzAwOwogIHNyYzogbG9jYWwoJ1JvYm90byBMaWdodCcpLCBsb2NhbCgnUm9ib3RvLUxpZ2h0JyksIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3Mvcm9ib3RvL3YxNS9QcnUzM3FqU2hwWlNtRzN6NlZZd25hQ1djeW5mX2NEeFh3Q0x4aWl4RzFjLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpOwp9CkBmb250LWZhY2UgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJzsKICBmb250LXN0eWxlOiBub3JtYWw7CiAgZm9udC13ZWlnaHQ6IDUwMDsKICBzcmM6IGxvY2FsKCdSb2JvdG8gTWVkaXVtJyksIGxvY2FsKCdSb2JvdG8tTWVkaXVtJyksIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3Mvcm9ib3RvL3YxNS9vT2VGd1pObHJUZWZ6TFltbFZWMVVLQ1djeW5mX2NEeFh3Q0x4aWl4RzFjLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpOwp9CkBmb250LWZhY2UgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJzsKICBmb250LXN0eWxlOiBub3JtYWw7CiAgZm9udC13ZWlnaHQ6IDcwMDsKICBzcmM6IGxvY2FsKCdSb2JvdG8gQm9sZCcpLCBsb2NhbCgnUm9ib3RvLUJvbGQnKSwgdXJsKGh0dHBzOi8vZm9udHMuZ3N0YXRpYy5jb20vcy9yb2JvdG8vdjE1Lzk3dWFoeGlxWlJvbmNCYUNFSTNhVzZDV2N5bmZfY0R4WHdDTHhpaXhHMWMudHRmKSBmb3JtYXQoJ3RydWV0eXBlJyk7Cn0K");
}

我已经尝试进行故障排除，一次加载一个角色，并且可以获取部分网址以便正确编译，所以这个：

  src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Robot);

产生

  src: local('Roboto Light'), local('Roboto-Light') url("https://fonts.googleapis.com/css?family=Robot");

但是，只要我添加最后一个＆＃39; o＆＃39;致Roboto＆＃39;它编译为疯狂＆＃34;数据：application / octet-stream; base64，QGZv ...＆＃34;输出

我尝试了其他网址并得到了类似的结果。也试过逃避＆＃34; =＆＃34;标志。它逃脱了，但我仍然无法通过“机器人”来正确编译。

目前，我正在使用正确的网址对css文件进行硬编码。这不是一个大问题，但我想知道我做错了什么。

Answer 1

你使用google fonmt的字体只是简单的

把它放到顶部的css文件中 @import url（https://fonts.googleapis.com/css？family = Roboto：400,300italic，300,400italic）;

并使用简单的

body{
 font-family: 'Roboto', sans-serif;
}

你试图将html请求调用到css文件中，我明白这就是为什么要编译这个

Answer 2

我100％确定它不是Stylus产生这种行为。您可以在http://tinyurl.com/hqthyml验证它（查看已编译的CSS）。可能是你在Stylus上使用的插件或构建工具（gulp / webpack / ...）。

Stylus @ font-face url无法正确编译

2 个答案: