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

【问题标题】：What is wrong with my use of the Compass @font-face mixin?我使用 Compass @font-face mixin 有什么问题？
【发布时间】：2013-07-18 01:15:49
【问题描述】：

我使用 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";

【问题讨论】：

有错误吗？错误是什么？如果我没记错的话，字体文件的路径应该是相对于字体目录的（检查你的 config.rb）。
没有文字显示。 config.rb 没有显示任何相关内容。
我同意@cimmanon。看起来您的 url 是相对于 css 文件 - 但它们需要相对于 fonts 文件夹 - 这是config.rb 中的设置。只需从每个 URL 中删除 ../fonts/ 就可以了。（不过，即使字体中断，文本也不应该消失 - 它应该只是未设置样式）
不幸的是，删除 ../fonts/ 似乎没有任何作用。文本仍在消失（是的，消失了，它似乎将 alpha 值设置为 0）。另外，您好，我非常感谢您的工作。
您确定 alpha 设置不是来自其他地方吗？

标签： css sass font-face compass-sass

【解决方案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 以避免 url 中的任何错误。它将允许您从您的应用程序或网站DocumentRoot 目录开始指定一个绝对网址。

在以下示例中，字体文件放置在 '/static/fonts' 中：

config.rb

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

！！如果您使用http_fonts_path，请评论relative_assets = true !!

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

【讨论】：

如果@font-face 不起作用，您仍然应该看到使用默认字体系列的文本。
由于问题的所有者没有回答，我想说我的字体路径问题已按照@svassr 说明解决，谢谢！