イナヅマTVログ

[Sass][Compass] Memo, @font-faceのmixin、フォントフォルダパスを指定したい

| 0件のコメント

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;
}

ちょっとめんどくさいけど、まいっか。

コメントを残す