Question

我使用SASS和指南针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"否则默认情况下，您生成的网址将以```fonts /`开头```。

然后您可以像使用@include font-face(一样使用{＃1}}，但丢弃＆＃34; ../ fonts＆＃34;在你的网址中。

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

在以下示例中，字体文件放在＆＃39; / static / fonts＆＃39; ：

的 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" );

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

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

1 个答案: