尝试让我的SCSS导入某些字体时,遇到以下问题:
我完全从罗盘网站复制了文档,但是在编译CSS时,指南针在src
URL后面添加了随机数。我编写的SCSS代码和生成的CSS如下所示
SCSS
@include font-face("NexaBold", font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"));
生成的CSS
@font-face {
font-family: "NexaBold";
src: url('/fonts/nexa_bold-webfont.woff?1417439024') format('woff'), url('/fonts/nexa_bold-webfont.ttf?1417439024') format('truetype'), url('/fonts/nexa_bold-webfont.svg?1417439024') format('svg'), url('/fonts/nexa_bold-webfont.eot?1417439024') format('embedded-opentype');
}
谢谢!
添加了随机数,因为浏览器缓存字体基于url,因此这些随机数会导致每次您编译代码并将其放入html时,它将再次下载字体。
我拥有Visual Studio 2013,并使用sass编译您的代码,结果是:
@font-face {
font-family: "NexaBold";
src: font-files("nexa_bold-webfont.woff", "nexa_bold-webfont.ttf", "nexa_bold-webfont.svg", "nexa_bold-webfont.eot"); }
这是我的指南针来源font-face mixin
:
@mixin font-face(
$name,
$font-files,
$eot: false,
$weight: false,
$style: false
) {
$iefont: unquote("#{$eot}?#iefix");
@font-face {
font-family: quote($name);
@if $eot {
src: font-url($eot);
$font-files: font-url($iefont) unquote("format('eot')"), $font-files;
}
src: $font-files;
@if $weight {
font-weight: $weight;
}
@if $style {
font-style: $style;
}
}
}
如果您看我的指南针版本没有在文件路径末尾添加任何随机数。
我本人建议您在font-face
没有指南针的情况下使用,请使用以下代码:
@font-face {
font-family: 'IranSans';
src: url('/css/fonts/IranSans.eot'); /* IE9 Compat Modes */
src: url('/css/fonts/IranSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/css/fonts/IranSans.woff') format('woff'), /* Modern Browsers */
url('/css/fonts/IranSans.ttf') format('truetype'), /* Safari, Android, iOS */
url('/css/fonts/IranSans.svg') format('svg'); /* Legacy iOS */
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句