Я скачал шрифт, а там целый пак шрифтов — Regular, Bold, Light, Italic... И не получается управлять через font-weight, font-style. Как исправить?

Question

[alexandrnevajno1]

Я скачал шрифт, а там целый пак шрифтов - Regular, Bold, Light, Italic...
Если я подключу обычный шрифт (Regular), то я не смогу использовать жирный за счет font-weight: bold. Нужно подключать жирный и ставить его в font-family.
Мне это неудобно. Можно ли как-нибудь объединить все шрифты в 1? Или подключить нужные мне (bold, regular) и управлять ими через соотвествующие CSS свойства, а не через один лишь font-family?

Comments

[ой всё]

покажите как вы их подключаете
там еще разные форматы для декстопа и веба, проверьте те ли у вас файлы

Answer 1

[Андрей Хохлов]

@font-face {
  font-family: "SuperFont";
  src: url("fonts/SuperFont/SuperFontRegular.eot");
  src:
    local("☺"),
    url("fonts/SuperFont/SuperFontRegular.eot?#iefix") format("embedded-opentype"),
    url("fonts/SuperFont/SuperFontRegular.woff2") format("woff2"),
    url("fonts/SuperFont/SuperFontRegular.woff") format("woff"),
    url("fonts/SuperFont/SuperFontRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SuperFont";
  src: url("fonts/SuperFont/SuperFontBold.eot");
  src:
    local("☺"),
    url("fonts/SuperFont/SuperFontBold.eot?#iefix") format("embedded-opentype"),
    url("fonts/SuperFont/SuperFontBold.woff2") format("woff2"),
    url("fonts/SuperFont/SuperFontBold.woff") format("woff"),
    url("fonts/SuperFont/SuperFontBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: "SuperFont", sans-serif;
}

Comments

[alexandrnevajno1]

Спасибо за ответ! Кстати, а зачем вы подключаете ttf, если у вас есть woff? На caniuse можно увидеть, что woff поддерживает то же, что и ttf, и + IE11 нормально (зеленым цветом показано, а не желтым).

[Андрей Хохлов]

alexandrnevajno1, на всякий случай / по привычке

Answer 2

[Vasyl Kovbassa]

Вот, нашел в загашнике, если используешь sass. Я тут что-то такое, когда-то намутил, сам уже не пойму как оно работает, но помню, что работало на ура.

@mixin font-face($font-name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
  $src: null;

  $extmods: (
    eot: "?#iefix",
    svg: "#" + str-replace($font-name, " ", "_") //- сама функция под миксином
  );

  $formats: (
    eot: "embedded-opentype",
    otf: "opentype",
    ttf: "truetype"
  );

  @each $ext in $exts {
    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
    $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
  }

  @font-face {
    font-family: quote($font-name);
    font-style: $style;
    font-weight: $weight;
    @if(map-has-key($extmods, eot)){ src: url("#{$path}.eot")}
    src: $src;
  }

    // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering//

   @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
      font-family: $font-family;
        src: url('#{$path}.svg##{$font-family}') format('svg');
    }
  }
}
//функция str-replace для поддержки svg формата

@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;
}