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編譯不正確

回答

相關問題