Stylus @font-face url 编译不正确
Stylus @font-face url not compiling correctly
我是第一次使用 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 文件进行硬编码。不是什么大问题,但我想弄清楚我做错了什么。
您使用的字体来自 google 字体很简单
把这个放到你的 css 文件上面
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic);
并使用像
这样简单的
body{
font-family: 'Roboto', sans-serif;
}
您正在尝试将 html 请求调用到 css 文件中,据我所知,这就是编译此
的原因
我 100% 确定不是 Stylus 产生了这种行为。您可以在 http://tinyurl.com/hqthyml 验证它(查看已编译 CSS)。可能是您与 Stylus 一起使用的一些插件或构建工具 (gulp/webpack/...)。
我是第一次使用 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 文件进行硬编码。不是什么大问题,但我想弄清楚我做错了什么。
您使用的字体来自 google 字体很简单
把这个放到你的 css 文件上面 @import url(https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic);
并使用像
这样简单的body{
font-family: 'Roboto', sans-serif;
}
您正在尝试将 html 请求调用到 css 文件中,据我所知,这就是编译此
的原因我 100% 确定不是 Stylus 产生了这种行为。您可以在 http://tinyurl.com/hqthyml 验证它(查看已编译 CSS)。可能是您与 Stylus 一起使用的一些插件或构建工具 (gulp/webpack/...)。