scss Sass Mixin用于typekit变体特定的字体系列名称

Posted 2021-05-18

Sass Mixin for typekit variation-specific font-family names
Typekit IE6-8 Support (http://help.typekit.com/customer/portal/articles/6855-Using-multiple-weights-and-styles)

$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;


// Must include fallbacks for EACH typekit font — set them each as variables
//************************************************************************//
$typekit-fonts:     "source-sans-pro", "ff-tisa-web-pro";  // index [1, 2]
$typekit-fallbacks:  $lucida-grande,   $georgia;

@mixin font($weight: 400, $style: normal, $font: 1) {
  $font-weight: $weight;
  $font-style:  $style;

  // Translate Weight
  @if ($weight == 100) or ($weight == thin) or ($weight == ultralight) {
    $weight: 1;
  }
  @if ($weight == 200) or ($weight == extralight) {
    $weight: 2;
  }
  @if ($weight == 300) or ($weight == light) {
    $weight: 3;
  }
  @if ($weight == 400) or ($weight == normal) or ($weight == book) {
    $weight: 4;
  }
  @if ($weight == 500) or ($weight == medium) {
    $weight: 5;
  }
  @if ($weight == 600) or ($weight == semibold) or ($weight == demi) {
    $weight: 6;
  }
  @if ($weight == 700) or ($weight == bold) {
    $weight: 7;
  }
  @if ($weight == 800) or ($weight == extrabold) {
    $weight: 8;
  }
  @if ($weight == 900) or ($weight == black) or ($weight == heavy) {
    $weight: 9;
  }

  // Translate Style
  @if $style == normal {
    $style: n;
  }
  @else if $style == italic {
    $style: i;
  }

  // Assemble $font-family
  $primary-font:   nth($typekit-fonts, $font) + "-" + $style + $weight;
  $secondary-font: nth($typekit-fonts, $font);
  $fallback-fonts: nth($typekit-fallbacks, $font);
  $font-family:    quote($primary-font), quote($secondary-font), $fallback-fonts;

  font-family: $font-family;
  font-style:  $font-style;
  font-weight: $font-weight;
}

//Example #1:
//************************************************************************//
h1 {
  @include font (bold);
}

h1 {
  font-family: "source-sans-pro-n7", "source-sans-pro", "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
  font-weight: bold;
}

//Example #2:
//************************************************************************//
h2 {
  @include font (300, italic, 2);
}

h2 {
  font-family: "ff-tisa-web-pro-n4", "ff-tisa-web-pro", Georgia, Cambria, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 300;
}

// Used in conjunction with bourbon: http://thoughtbot.com/bourbon