From a1c976bbcbc2a3a32fc5627fcd81db622b11cecd Mon Sep 17 00:00:00 2001 From: Eric Meyer Date: Tue, 24 Nov 2009 13:12:31 -0700 Subject: [PATCH] added font-face mixin with font_files function --- .../compass/stylesheets/compass/_css3.sass | 1 + .../stylesheets/compass/css3/_font_face.sass | 31 +++++++++++++++++++ lib/compass/sass_extensions/functions.rb | 1 + .../sass_extensions/functions/font_files.rb | 10 ++++++ 4 files changed, 43 insertions(+) create mode 100644 lib/compass/frameworks/compass/stylesheets/compass/css3/_font_face.sass create mode 100644 lib/compass/sass_extensions/functions/font_files.rb diff --git a/lib/compass/frameworks/compass/stylesheets/compass/_css3.sass b/lib/compass/frameworks/compass/stylesheets/compass/_css3.sass index c502c05e..1276cce7 100644 --- a/lib/compass/frameworks/compass/stylesheets/compass/_css3.sass +++ b/lib/compass/frameworks/compass/stylesheets/compass/_css3.sass @@ -9,3 +9,4 @@ @import css3/background_clip.sass @import css3/background_origin.sass @import css3/background_size.sass +@import css3/font_face.sass diff --git a/lib/compass/frameworks/compass/stylesheets/compass/css3/_font_face.sass b/lib/compass/frameworks/compass/stylesheets/compass/css3/_font_face.sass new file mode 100644 index 00000000..b4380b55 --- /dev/null +++ b/lib/compass/frameworks/compass/stylesheets/compass/css3/_font_face.sass @@ -0,0 +1,31 @@ +// @Font-Face +// Cross-browser support for @font-face +// - !name is required, arbitrary, and what you will use in font stacks. +// - !font_files is required using font_files('relative_location', 'format'). +// - for best results use this order: woff, opentype/truetype, svg +// - !eot is required by IE, and is a relative location of the eot file. +// - postscript name is required by some browsers to look for local fonts. +=font-face( !name, !font_files, !eot = false, !postscript = !false, !style = false) + @font-face + font-family: '#{!name}' + @if !style + font-style= !style + @if !eot + src: url('#{!eot}') + @if !postscript + src: local('#{!name}'), local('#{!postscript}'), #{!font_files} + @else + src: local('#{!name}'), #{!font_files} + +// EXAMPLE + +font-face("this name", font_files("this.otf", "opentype", "this.woff", "woff"), "fonts/this.eot", "thisname") + + will generate: + + @font-face { + font-family: 'this name'; + src: url('fonts/this.eot'); + src: local('this name'), local('thisname'), + url('this.otf') format('opentype'), + url('this.woff') format('woff'); + } diff --git a/lib/compass/sass_extensions/functions.rb b/lib/compass/sass_extensions/functions.rb index f80445b5..a1943a10 100644 --- a/lib/compass/sass_extensions/functions.rb +++ b/lib/compass/sass_extensions/functions.rb @@ -12,6 +12,7 @@ module Sass::Script::Functions include Compass::SassExtensions::Functions::Display include Compass::SassExtensions::Functions::InlineImage include Compass::SassExtensions::Functions::ColorStop + include Compass::SassExtensions::Functions::FontFiles end # Wierd that this has to be re-included to pick up sub-modules. Ruby bug? diff --git a/lib/compass/sass_extensions/functions/font_files.rb b/lib/compass/sass_extensions/functions/font_files.rb new file mode 100644 index 00000000..babfaa4d --- /dev/null +++ b/lib/compass/sass_extensions/functions/font_files.rb @@ -0,0 +1,10 @@ +module Compass::SassExtensions::Functions::FontFiles + def font_files(*args) + raise Sass::SyntaxError, "An even number of arguments must be passed to color-stop()" unless args.size % 2 == 0 + files = [] + while args.size > 0 + files << "url('#{args.shift}') format('#{args.shift}')" + end + Sass::Script::String.new(files.join(", ")) + end +end