Как подключить этот font-face генератор?
Просто там 3 аргумента, а я хочу несколько там жирных шрифтов подключить.
Вот код SCSS:
$fonts: () !default; $font-file-types: 'woff' !default; $fonts-path: '../fonts' !default; @function str-replace($string, $search, $replace: '') { $index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + str-replace( str-slice($string, $index + str-length($search)), $search, $replace ); } @return $string; } @mixin generate-font-face( $font-family, $src, $font-weight, $font-style: normal ) { @font-face { font-family: $font-family; src: $src; font-weight: $font-weight; font-style: $font-style; @content; } } @function fontSrc( $fonts-path, $font-family, $font-file, $font-types: $font-file-types ) { $src: (local('☺')); $family-folder: str-replace($font-family, ' ', '-'); @each $type in $font-types { $format-type: $type; @if $type == 'ttf' { $format-type: 'truetype'; } @if $type == 'otf' { $format-type: 'opentype'; } $src: append( $src, url('#{$fonts-path}/#{$family-folder}/#{nth($font-file, 1)}.#{$type}') format('#{$format-type}'), 'comma' ); } @return $src; } @mixin font-face($fonts: $fonts, $types: $font-file-types, $path: $fonts-path) { @each $font-family, $font-set in $fonts { @each $font-weight, $font-file in $font-set { @if type-of($font-file) == 'string' { $src: fontSrc($path, $font-family, $font-file, $types); @include generate-font-face($font-family, $src, $font-weight) { @content; } } @else { @each $font-style, $file in $font-file { $src: fontSrc($path, $font-family, $file, $types); @include generate-font-face( $font-family, $src, $font-weight, $font-style ) { @content; } } } } } } |
$fonts: () !default; $font-file-types: 'woff' !default; $fonts-path: '../fonts' !default; @function str-replace($string, $search, $replace: '') { $index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + str-replace( str-slice($string, $index + str-length($search)), $search, $replace ); } @return $string; } @mixin generate-font-face( $font-family, $src, $font-weight, $font-style: normal ) { @font-face { font-family: $font-family; src: $src; font-weight: $font-weight; font-style: $font-style; @content; } } @function fontSrc( $fonts-path, $font-family, $font-file, $font-types: $font-file-types ) { $src: (local('☺')); $family-folder: str-replace($font-family, ' ', '-'); @each $type in $font-types { $format-type: $type; @if $type == 'ttf' { $format-type: 'truetype'; } @if $type == 'otf' { $format-type: 'opentype'; } $src: append( $src, url('#{$fonts-path}/#{$family-folder}/#{nth($font-file, 1)}.#{$type}') format('#{$format-type}'), 'comma' ); } @return $src; } @mixin font-face($fonts: $fonts, $types: $font-file-types, $path: $fonts-path) { @each $font-family, $font-set in $fonts { @each $font-weight, $font-file in $font-set { @if type-of($font-file) == 'string' { $src: fontSrc($path, $font-family, $font-file, $types); @include generate-font-face($font-family, $src, $font-weight) { @content; } } @else { @each $font-style, $file in $font-file { $src: fontSrc($path, $font-family, $file, $types); @include generate-font-face( $font-family, $src, $font-weight, $font-style ) { @content; } } } } } }
Дополнительно:
Что же вам неймется? Остался один актуальный формат шрифтов: woff2. Даже если вам нужно поддерживать какие-то древние браузеры и просто woff, то это всё равно меньше строк, чем в тоё простыне, что у вас выше.
Просто подключите обычным способом и оставьте мозг в покое.
Зачем так много форматов тянуть?
Достаточно будет woff и woff2.
Если нужно супер старые браузеры поддерживать добавь ещё .eot
Зачем изобретать велосипед?
https://gist.github.com/jonathantneal/d0460e5c2d5d...
- мне кроссбраузерность не в первую очередь, просто хочу автоматизировать процесс создания css файла с подключением шрифтов.
А какое в gulp есть расширение для генерации eot?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для подключения font-face генератора на вашем веб-сайте необходимо выполнить несколько шагов. Во-первых, вам потребуется создать шрифтовой файл в формате WOFF, WOFF2, TTF или EOT. Вы можете воспользоваться онлайн-генераторами шрифтов, такими как Font Squirrel или Fontie, чтобы создать нужные файлы.
После того как у вас есть необходимые файлы шрифтов, вам нужно добавить следующий код в секцию стилей вашего веб-сайта:
@font-face { font-family: 'YourFontName'; src: url('path/to/your/font.woff') format('woff'), url('path/to/your/font.woff2') format('woff2'), url('path/to/your/font.ttf') format('truetype'), url('path/to/your/font.eot') format('embedded-opentype'); font-weight: normal; font-style: normal; }
Замените 'YourFontName' на имя вашего шрифта и укажите путь к каждому файлу шрифта. Обратите внимание, что различные браузеры поддерживают разные форматы шрифтов, поэтому лучше указать несколько форматов для обеспечения совместимости.
После этого вы можете использовать ваш шрифт в стилях вашего веб-сайта, просто указав его имя в свойстве font-family:
body { font-family: 'YourFontName', sans-serif; }
Теперь ваш шрифт будет корректно отображаться на вашем веб-сайте. Не забудьте загрузить все файлы шрифтов на сервер и указать правильные пути к ним в коде.