66 lines
2.0 KiB
SCSS
66 lines
2.0 KiB
SCSS
|
@charset "UTF-8";
|
|||
|
|
|
|||
|
|
/// Generates an `@font-face` declaration. You can choose the specific file
|
|||
|
|
/// formats you need to output; the mixin supports `woff2`
|
|||
|
|
/// and `woff`. The mixin also supports usage with the Rails Asset Pipeline,
|
|||
|
|
/// which you can enable per use, or globally in the `$bourbon()` settings.
|
|||
|
|
///
|
|||
|
|
/// @argument {string} $font-family
|
|||
|
|
///
|
|||
|
|
/// @argument {string} $file-path
|
|||
|
|
///
|
|||
|
|
/// @argument {string | list} $file-formats [("woff2", "woff")]
|
|||
|
|
/// List of the font file formats to include. Can also be set globally using
|
|||
|
|
/// the `global-font-file-formats` key in the Bourbon settings.
|
|||
|
|
///
|
|||
|
|
/// @argument {boolean} $asset-pipeline [false]
|
|||
|
|
/// Set to `true` if you’re using the Rails Asset Pipeline (place the fonts
|
|||
|
|
/// in `app/assets/fonts/`). Can also be set globally using the
|
|||
|
|
/// `rails-asset-pipeline` key in the Bourbon settings.
|
|||
|
|
///
|
|||
|
|
/// @content
|
|||
|
|
/// Any additional CSS properties that are included in the `@include`
|
|||
|
|
/// directive will be output within the `@font-face` declaration, e.g. you can
|
|||
|
|
/// pass in `font-weight`, `font-style` and/or `unicode-range`.
|
|||
|
|
///
|
|||
|
|
/// @example scss
|
|||
|
|
/// @include font-face(
|
|||
|
|
/// "source-sans-pro",
|
|||
|
|
/// "fonts/source-sans-pro-regular",
|
|||
|
|
/// ("woff2", "woff")
|
|||
|
|
/// ) {
|
|||
|
|
/// font-style: normal;
|
|||
|
|
/// font-weight: 400;
|
|||
|
|
/// }
|
|||
|
|
///
|
|||
|
|
/// // CSS Output
|
|||
|
|
/// @font-face {
|
|||
|
|
/// font-family: "source-sans-pro";
|
|||
|
|
/// src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
|
|||
|
|
/// url("fonts/source-sans-pro-regular.woff") format("woff");
|
|||
|
|
/// font-style: normal;
|
|||
|
|
/// font-weight: 400;
|
|||
|
|
/// }
|
|||
|
|
///
|
|||
|
|
/// @require {function} _font-source-declaration
|
|||
|
|
///
|
|||
|
|
/// @require {function} _fetch-bourbon-setting
|
|||
|
|
|
|||
|
|
@mixin font-face(
|
|||
|
|
$font-family,
|
|||
|
|
$file-path,
|
|||
|
|
$file-formats: _fetch-bourbon-setting("global-font-file-formats"),
|
|||
|
|
$asset-pipeline: _fetch-bourbon-setting("rails-asset-pipeline")
|
|||
|
|
) {
|
|||
|
|
@font-face {
|
|||
|
|
font-family: $font-family;
|
|||
|
|
src: _font-source-declaration(
|
|||
|
|
$font-family,
|
|||
|
|
$file-path,
|
|||
|
|
$asset-pipeline,
|
|||
|
|
$file-formats
|
|||
|
|
);
|
|||
|
|
@content;
|
|||
|
|
}
|
|||
|
|
}
|