github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

font styles in the @font-face

Browse Source
This commit is contained in:
lyuba 2011-05-22 01:32:34 +02:00
parent 9992a18a72
commit 279124cc19
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frameworks/compass/stylesheets/compass/css3/_font-face.scss
View File

@ -6,6 +6,8 @@
// * $font-files is required using font-files('relative/location', 'format'). // * $font-files is required using font-files('relative/location', 'format').
// for best results use this order: woff, opentype/truetype, svg // for best results use this order: woff, opentype/truetype, svg
// * $eot is required by IE, and is a relative location of the eot file. // * $eot is required by IE, and is a relative location of the eot file.
// * $weight shows if the font is bold, defaults to normal
// * $style defaults to normal, might be also italic
// * For android 2.2 Compatiblity, please ensure that your web page has // * For android 2.2 Compatiblity, please ensure that your web page has
// a meta viewport tag. // a meta viewport tag.
// * To support iOS < 4.2, an SVG file must be provided // * To support iOS < 4.2, an SVG file must be provided
@ -13,10 +15,19 @@
// If you need to generate other formats check out the Font Squirrel // If you need to generate other formats check out the Font Squirrel
// [font generator](http://www.fontsquirrel.com/fontface/generator) // [font generator](http://www.fontsquirrel.com/fontface/generator)
// In order to refer to a specific style of the font in your stylesheets as
// e.g. "font-style: italic;", you may add a couple of @font-face includes
// containing the respective font files for each style and specying
// respective the $style parameter.
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
@mixin font-face( @mixin font-face(
$name, $name,
$font-files, $font-files,
$eot: false $eot: false,
$weight: normal,
$style: normal
) { ) {
$iefont: unquote("#{$eot}?iefix"); $iefont: unquote("#{$eot}?iefix");
@font-face { @font-face {
@ -25,12 +36,14 @@
src: font-url($eot); src: font-url($eot);
$font-files: font-url($iefont) unquote("format('eot')"), $font-files; $font-files: font-url($iefont) unquote("format('eot')"), $font-files;
} }
src: $font-files; src: $font-files;
font-weight: $weight;
font-style: $style;
} }
} }
// EXAMPLE // EXAMPLE
// +font-face("this name", font-files("this.woff", "woff", "this.otf", "opentype"), "this.eot") // +font-face("this name", font-files("this.woff", "woff", "this.otf", "opentype"), "this.eot", bold, italic)
// //
// will generate: // will generate:
// //
@ -40,4 +53,6 @@
// src: local("☺"), // src: local("☺"),
// url('fonts/this.otf') format('woff'), // url('fonts/this.otf') format('woff'),
// url('fonts/this.woff') format('opentype'); // url('fonts/this.woff') format('opentype');
// font-weight: bold;
// font-style: italic;
// } // }