4

次のように、SASS と Compass font-face mixinを使用して、Web サイトに 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";

4

1 に答える 1