Stylus @font-face url 编译不正确

Question

我是第一次使用 css 编译器 (Stylus)，我无法正确加载 Google Web 字体 urls。

这个：

@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");
}

我试过排除故障，一次加载一个字符，并且可以让 url 的一部分正确编译，所以这个:

  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");

但是，一旦我将最后一个 'o' 添加到 'Roboto'，它就会编译为那个疯狂的 "data:application/octet-stream;base64,QGZv..." 输出。

我试过其他 urls 并得到类似的结果。还尝试转义“=”符号。它逃脱了，但我仍然无法通过 'Robot'.

正确编译它

目前，我正在使用正确的 url 对 css 文件进行硬编码。不是什么大问题，但我想弄清楚我做错了什么。

Answer 1

您使用的字体来自 google 字体很简单

把这个放到你的 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 编译不正确

Stylus @font-face url not compiling correctly

css

font-face

stylus