1 | // Copyright 2017 Palantir Technologies, Inc. All rights reserved.
|
2 | // Licensed under the Apache License, Version 2.0.
|
3 |
|
4 | // these implementations borrowed from Bourbon v5, and modified to fit our use cases.
|
5 | // changes: removed $asset-pipeline argument, added weight/style params like Bourbon v4.
|
6 | // https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_font-face.scss
|
7 | // https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/utilities/_font-source-declaration.scss
|
8 |
|
9 | // Generates an `@font-face` declaration. You can choose the specific file
|
10 | // formats you need to output; the mixin supports `eot`, `ttf`, `svg`, `woff2`
|
11 | // and `woff`.
|
12 | //
|
13 | // @argument {string} $font-family
|
14 | //
|
15 | // @argument {string} $file-path
|
16 | //
|
17 | // @argument {string | list} $file-formats
|
18 | // List of the font file formats to include.
|
19 | //
|
20 | // @argument {string} $weight
|
21 | //
|
22 | // @argument {string} $style
|
23 | //
|
24 | // @content
|
25 | // Any additional CSS properties that are included in the `@include`
|
26 | // directive will be output within the `@font-face` declaration, e.g. you can
|
27 | // pass in `font-weight`, `font-style` and/or `unicode-range`.
|
28 | @mixin font-face(
|
29 | $font-family,
|
30 | $file-path,
|
31 | $file-formats,
|
32 | $font-weight: normal,
|
33 | $font-style: normal
|
34 | ) {
|
35 | @font-face {
|
36 | font-family: $font-family;
|
37 | font-style: $font-style;
|
38 | font-weight: $font-weight;
|
39 |
|
40 | src: font-source-declaration(
|
41 | $font-family,
|
42 | $file-path,
|
43 | $file-formats
|
44 | );
|
45 |
|
46 | @content;
|
47 | }
|
48 | }
|
49 |
|
50 | @function font-source-declaration($font-family, $file-path, $file-formats) {
|
51 | $src: ();
|
52 |
|
53 | $formats-map: (
|
54 | eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"),
|
55 | woff2: "#{$file-path}.woff2" format("woff2"),
|
56 | woff: "#{$file-path}.woff" format("woff"),
|
57 | ttf: "#{$file-path}.ttf" format("truetype"),
|
58 | svg: "#{$file-path}.svg##{$font-family}" format("svg"),
|
59 | );
|
60 |
|
61 | @each $key, $values in $formats-map {
|
62 | @if list-contains($file-formats, $key) {
|
63 | $file-path: nth($values, 1);
|
64 | $font-format: nth($values, 2);
|
65 |
|
66 | $src: append($src, url($file-path) $font-format, comma);
|
67 | }
|
68 | }
|
69 |
|
70 | @return $src;
|
71 | }
|
72 |
|
73 | // Returns true if `$list` contains any of `$values`.
|
74 | @function list-contains($list, $values...) {
|
75 | @each $value in $values {
|
76 | @if type-of(index($list, $value)) != "number" {
|
77 | @return false;
|
78 | }
|
79 | }
|
80 |
|
81 | @return true;
|
82 | }
|