Stylus @ font-face url编译不正确

我第一次使用css编译器（Stylus），并且无法正确加载Google Web Font url。Stylus @ font-face url编译不正确

此：

@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 ...”输出。

我试过其他的网址，并得到类似的结果。也尝试转义“=”符号。它逃脱了，但我仍然无法正确地编译过去的'机器人'。

现在，我很难用正确的URL来编码css文件。不是一个大问题，但我想弄清楚我做错了什么。

来源

2016-01-08 Bill Wareham

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

来源

2016-01-09 01:45:33 Panya

是的，看起来你是对的。由于这是一个相对简单的解决方法，我不确定我想要下载插件/吞食兔子洞。谢谢。 –

您从谷歌使用的字体fonmt其简单的只是

要把它放到你的CSS文件的顶部 @import URL（https://fonts.googleapis.com/css家族=的Roboto：400,300italic，300,400italic）;

，并使用简单的像

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

你想叫一个HTML请求到CSS文件，我明白这就是为什么它编译这个

来源

2016-01-08 22:47:55 Noni

Stylus @ font-face url编译不正确

回答

相关问题