Что не так с моим использованием Compass @ font-face mixin?

Question

я в том числе шрифт Open Sans в моем веб-сайте с помощью SASS и Compass font-face mixin следующим образом:

@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); 

I прежде всего используется CSS3 @ шрифт-лицо выглядит следующим образом:

@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

Have выглядеть ваш файл config.rb бы помочь, но, предполагая, что там ничего не родственник в нем, созданный путь в вашем CSS должен выглядеть следующим образом

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

В вашем использовании relative_assets = trueconfig.rb и установить fonts_dir = "../fonts" иначе по умолчанию сгенерированный URL будет начинаться с `` `шрифтами /` `` `.

Вы можете использовать @include font-face( так же, как вы, но отбросив «../fonts» в своих URL-адресах.

Если папка, содержащая скомпилированный css, находится вне вашего проекта sass, тогда я рекомендую использовать http_fonts_path, чтобы избежать ошибок в URL-адресах. Это позволит вам указать абсолютный URL-адрес, начиная с вашего приложения или веб-сайта DocumentRoot.

В следующем примере шрифтов файлы помещаются в '/ статические/шрифтами':

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

Run compass clean после каждого изменения config.rb