CompassでWebfontの読み込み。
@font-faceの入力。
Webfontはブラウザ互換を配慮しながら使わないといけないし、
フォーマットも色々だし…
でもCompassだと割と簡単にできる様子。
Web Symbols typeface: WebSymbolsRegular fontを使っています。
[Compass]
$fontFileName: 'websymbols-regular-webfont'; @include font-face( 'WebSymbolsRegular', font-files( '#{$fontFileName}.woff', '#{$fontFileName}.ttf', '#{$fontFileName}.svg' ), '#{$fontFileName}.eot', normal, normal ); |
書き出されたCSSを見てみると。
[CSS]
@font-face { font-family: "WebSymbolsRegular"; src: url('/css/fonts/websymbols-regular-webfont.eot'); src: url('/css/fonts/websymbols-regular-webfont.eot?#iefix') format('eot'), url('/css/fonts/websymbols-regular-webfont.woff') format('woff'), url('/css/fonts/websymbols-regular-webfont.ttf') format('truetype'), url('/css/fonts/websymbols-regular-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } |
パスが “/css書出フォルダ/fonts/” 以下になっちゃうのね。
どこで設定できるんかなぁ。
良くわかんないんでこんなんにしてみた。
[Compass]
$pathToFontFileName: '/fonts/websymbols-regular-webfont'; $fontName: WebSymbolsRegular; @font-face { font-family: $fontName; src: url('#{$pathToFontFileName}.eot'); src: url('#{$pathToFontFileName}.eot?#iefix') format('embedded-opentype'), url('#{$pathToFontFileName}.woff') format('woff'), url('#{$pathToFontFileName}.ttf') format('truetype'), url('#{$pathToFontFileName}.svg##{$fontName}') format('svg'); font-weight: normal; font-style: normal; } |
書き出されたCSSは、
[CSS]
@font-face { font-family: WebSymbolsRegular; src: url("/fonts/websymbols-regular-webfont.eot"); src: url("/fonts/websymbols-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/websymbols-regular-webfont.woff") format("woff"), url("/fonts/websymbols-regular-webfont.ttf") format("truetype"), url("/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular") format("svg"); font-weight: normal; font-style: normal; } |
ちょっとめんどくさいけど、まいっか。