我使用Compass @ font-face mixin有什么问题？

Question

我通过使用SASS和Compass font-face mixin在我的网站中包含Open Sans字体,如下所示:

@include font-face("Open Sans",
    font-files(
        "../fonts/opensans-light/OpenSans-Light-webfont.woff",
        "../fonts/opensans-light/OpenSans-Light-webfont.ttf",
        "../fonts/opensans-light/OpenSans-Light-webfont.svg#open_sanslight"
    ),
    "../fonts/opensans-light/OpenSans-Light-webfont.eot", 200);

@include font-face("Open Sans",
    font-files(
        "../fonts/opensans-regular/OpenSans-Regular-webfont.woff",
        "../fonts/opensans-regular/OpenSans-Regular-webfont.ttf",
        "../fonts/opensans-regular/OpenSans-Regular-webfont.svg#open_sansregular"
    ),
    "../fonts/opensans-regular/OpenSans-Regular-webfont.eot", normal);

@include font-face("Open Sans",
    font-files(
        "../fonts/opensans-semibold/OpenSans-Semibold-webfont.woff",
        "../fonts/opensans-semibold/OpenSans-Semibold-webfont.ttf",
        "../fonts/opensans-semibold/OpenSans-Semibold-webfont.svg#open_sanssemibold"
    ),
    "../fonts/opensans-semibold/OpenSans-Semibold-webfont.eot", 600);

@include font-face("Open Sans",
    font-files(
        "../fonts/opensans-bold/OpenSans-Bold-webfont.woff",
        "../fonts/opensans-bold/OpenSans-Bold-webfont.ttf",
        "../fonts/opensans-bold/OpenSans-Bold-webfont.svg#open_sansbold"
    ),
    "../fonts/opensans-bold/OpenSans-Bold-webfont.eot", bold);

我以前只使用CSS3 @ font-face如下:

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/opensans-light/OpenSans-Light-webfont.eot');
    src: url('../fonts/opensans-light/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-light/OpenSans-Light-webfont.woff') format('woff'),
         url('../fonts/opensans-light/OpenSans-Light-webfont.ttf') format('truetype'),
         url('../fonts/opensans-light/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/opensans-regular/OpenSans-Regular-webfont.eot');
    src: url('../fonts/opensans-regular/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-regular/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/opensans-regular/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/opensans-regular/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/opensans-semibold/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/opensans-semibold/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-semibold/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/opensans-semibold/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-semibold/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: 600;
    font-style: normal;
}


@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/opensans-bold/OpenSans-Bold-webfont.eot');
    src: url('../fonts/opensans-bold/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opensans-bold/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/opensans-bold/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/opensans-bold/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

哪个效果很好.在我的scss文件的顶部,我有:@import "compass/css3/font-face";

Answer 1

看看你的config.rb文件会有所帮助但是,假设它没有相关内容,你的css中生成的路径应该看起来像这样

/{css_dir}/../fonts/opensans-semibold/OpenSans-Semibold-webfont.eot

在你的config.rb中 使用 relative_assets = true和设置fonts_dir = "../fonts"默认情况下你生成的url将以```fonts /````开头.

然后你可以@include font-face(像你一样使用,但是在你的网址中丢弃"../fonts".

如果包含已编译的css的文件夹在您的sass项目之外,那么我建议您使用http_fonts_path以避免网址中的任何错误.它允许您从应用程序或网站DocumentRoot目录开始指定绝对URL .

在以下示例中,字体文件放在'/ static/fonts'中:

config.rb

http_fonts_path = "/static/fonts"  
# relative_assets = true
# replace static by your public asset folder path

!评论,relative_assets = true如果你使用http_fonts_path!!

my.scss*

@include font-face("Open Sans", font-files( "opensans-semibold/OpenSans-Semibold-webfont.woff", "opensans-semibold/OpenSans-Semibold-webfont.ttf" ), "opensans-semibold/OpenSans-Semibold-webfont.eot" );

运行compass clean后,每次更改config.rb