Created
June 4, 2012 18:05
-
-
Save mirisuzanne/2869914 to your computer and use it in GitHub Desktop.
Naming convention for new Compass @font-face API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// New fontface naming conventions & API | |
// File Structure | |
// | |
// - fonts_dir/ [config setting] | |
// - simple.eot | |
// - simple.svg | |
// - simple.ttf | |
// - simple.woff | |
// - folder/ | |
// - nested-font.eot | |
// - nested-font.otf | |
// - nested-font.woff | |
// | |
// Fonts to be loaded in the same font-face mixin (same variation, different format) | |
// should share the same filename, not counting the extension. | |
// | |
// Formats will be determined based on extension: | |
// (unless Ruby has a better way of determining font format?) | |
// '.ttf' => 'truetype' | |
// '.otf' => 'opentype' | |
// '.woff' => 'woff' | |
// '.svg' => 'svg' | |
// '.svgz' => 'svg' | |
// '.eot' => 'eot' | |
// font-face mixin | |
// | |
// $name : (string or list, required) The name and optional SVG-ID to use. | |
// - string "simpleName" => name: simpleName, ID: #simpleName | |
// - list "name #id" => name: name, ID: #id | |
// $location : (string) The location of the font files - use $name if none provided. | |
// - Locations include the file name, without extensions: | |
// 'simple' => 'simple.eot', 'simple.ttf', 'simple.woff' | |
// 'folder/nested-font' => 'folder/nested-font.eot' etc... | |
// - Locations are relative to the set fonts_dir: | |
// 'simple' => 'project/fonts_dir/simple' | |
// $weight : (string | number) any accepted font-weight value. | |
// $style : (string) any accepted font-style value. | |
// $inline : (boolean | string ) true/false or the version of the font to inline (e.g. "woff"). | |
@mixin font-face($name, $location: $name, $weight: normal, $style: normal, $inline: false) { | |
// ... the magic ... | |
} | |
// ----------------------- | |
// 1) default | |
@include font-face(simple); | |
// default output | |
@font-face { | |
font-family: "simple"; | |
src: url('path/to/fonts_dir/simple.eot'); | |
src: url('path/to/fonts_dir/simple.eot?#iefix') format('eot'), | |
url('path/to/fonts_dir/simple.woff') format('woff'), | |
url('path/to/fonts_dir/simple.ttf') format('truetype'), | |
url('path/to/fonts_dir/simple.svg#simple') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
// ----------------------- | |
// 2) name change | |
@include font-face(NewName, simple); | |
// name change output | |
@font-face { | |
font-family: "NewName"; | |
src: url('path/to/fonts_dir/simple.eot'); | |
src: url('path/to/fonts_dir/simple.eot?#iefix') format('eot'), | |
url('path/to/fonts_dir/simple.woff') format('woff'), | |
url('path/to/fonts_dir/simple.ttf') format('truetype'), | |
url('path/to/fonts_dir/simple.svg#NewName') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
// ----------------------- | |
// 3) nested use | |
@include font-face(Nested, 'folder/nested-font'); | |
// nested output | |
@font-face { | |
font-family: "Nested"; | |
src: url('path/to/fonts_dir/folder/nested-font.eot'); | |
src: url('path/to/fonts_dir/folder/nested-font.eot?#iefix') format('eot'), | |
url('path/to/fonts_dir/folder/nested-font.woff') format('woff'), | |
url('path/to/fonts_dir/folder/nested-font.otf') format('opentype'), | |
url('path/to/fonts_dir/folder/nested-font.svg#Nested') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
// ----------------------- | |
// 4) WRONG | |
@include font-face(wrong); | |
// WRONG output | |
/* error: no font files found at "fonts_dir/wrong", | |
please provide the correct location and file name. */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Awesome API!