次のように、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";