ساس و @font-face

Question

لدي CSS التالية - كيف أصفها في ساس؟ لقد حاولت تجميعها العكسي مع CSS2Sass ، واستمرت في الحصول على الأخطاء .... هل هي CSS الخاصة بي (التي تعمل ؛-))؟

@font-face {
  font-family: 'bingo';
    src: url("bingo.eot");
    src: local('bingo'),
       url("bingo.svg#bingo") format('svg'),
       url("bingo.otf") format('opentype');
}

Answer 1

في حال كان أي شخص يتساءل - ربما كان CSS الخاص بي ...

@font-face
  font-family: "bingo"
  src: url('bingo.eot')
  src: local('bingo')
  src: url('bingo.svg#bingo') format('svg')
  src: url('bingo.otf') format('opentype')

سوف تقدم كما

@font-face {
  font-family: "bingo";
  src: url('bingo.eot');
  src: local('bingo');
  src: url('bingo.svg#bingo') format('svg');
  src: url('bingo.otf') format('opentype'); }

الذي يبدو أنه قريب بما فيه الكفاية ... فقط بحاجة إلى التحقق من عرض SVG

Answer 2

لقد كنت أعاني من ذلك لفترة من الوقت الآن. حل Dycey صحيح في تحديد src عدة مرات يخرج نفس الشيء في ملف CSS الخاص بك. ومع ذلك ، يبدو أن هذا يكسر OSX Firefox 23 (ربما الإصدارات الأخرى أيضًا ، لكن ليس لدي وقت للاختبار).

المتصفح المتقاطع @font-face الحل من خط السنجاب يشبه هذا:

@font-face {
    font-family: 'fontname';
    src: url('fontname.eot');
    src: url('fontname.eot?#iefix') format('embedded-opentype'),
         url('fontname.woff') format('woff'),
         url('fontname.ttf') format('truetype'),
         url('fontname.svg#fontname') format('svg');
    font-weight: normal;
    font-style: normal;
}

لإنتاج src الخاصية ذات القيم المفصولة بفاصلة ، تحتاج إلى كتابة جميع القيم على سطر واحد ، حيث لا يتم دعم قواطع الخط في SASS. لإنتاج الإعلان أعلاه ، ستكتب Sass التالية:

@font-face
  font-family: 'fontname'
  src: url('fontname.eot')
  src: url('fontname.eot?#iefix') format('embedded-opentype'), url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), url('fontname.svg#fontname') format('svg')
  font-weight: normal
  font-style: normal

أعتقد أنه يبدو سخيفًا أن أكتب المسار مجموعة من المرات ، ولا أحب خطوطًا طويلة بشكل مفرط في الكود الخاص بي ، لذلك عملت حوله عن طريق كتابة هذا الخليط:

=font-face($family, $path, $svg, $weight: normal, $style: normal)
  @font-face
    font-family: $family
    src: url('#{$path}.eot')
    src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg##{$svg}') format('svg')
    font-weight: $weight
    font-style: $style

الاستخدام: على سبيل المثال ، يمكنني استخدام Mixin السابق لإعداد خط Frutiger Light مثل هذا:

+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')

Answer 3

لأولئك الذين يبحثون عن مختلط SCSS بدلاً من ذلك ، بما في ذلك Woff2:

@mixin fface($path, $family, $type: '', $weight: 400, $svg: '', $style: normal) {
  @font-face {
    font-family: $family;
    @if $svg == '' {
      // with OTF without SVG and EOT
      src: url('#{$path}#{$type}.otf') format('opentype'), url('#{$path}#{$type}.woff2') format('woff2'), url('#{$path}#{$type}.woff') format('woff'), url('#{$path}#{$type}.ttf') format('truetype');
    } @else {
      // traditional src inclusions
      src: url('#{$path}#{$type}.eot');
      src: url('#{$path}#{$type}.eot?#iefix') format('embedded-opentype'), url('#{$path}#{$type}.woff2') format('woff2'), url('#{$path}#{$type}.woff') format('woff'), url('#{$path}#{$type}.ttf') format('truetype'), url('#{$path}#{$type}.svg##{$svg}') format('svg');
    }
    font-weight: $weight;
    font-style: $style;
  }
}
// ========================================================importing
$dir: '/assets/fonts/';
$famatic: 'AmaticSC';
@include fface('#{$dir}amatic-sc-v11-latin-regular', $famatic, '', 400, $famatic);

$finter: 'Inter';
// adding specific types of font-weights
@include fface('#{$dir}#{$finter}', $finter, '-Thin-BETA', 100);
@include fface('#{$dir}#{$finter}', $finter, '-Regular', 400);
@include fface('#{$dir}#{$finter}', $finter, '-Medium', 500);
@include fface('#{$dir}#{$finter}', $finter, '-Bold', 700);
// ========================================================usage
.title {
  font-family: Inter;
  font-weight: 700; // Inter-Bold font is loaded
}
.special-title {
  font-family: AmaticSC;
  font-weight: 700; // default font is loaded
}

ال $type المعلمة مفيدة لتكديس العائلات ذات الصلة مع أوزان مختلفة.

ال @if بسبب الحاجة إلى دعم بين الخط (على غرار Roboto) ، الذي يحتوي على OTF ولكن ليس لديه أنواع SVG و EOT في هذا الوقت.

إذا حصلت على ملف لا يمكن حلها خطأ ، تذكر أن تحقق مضاعفة دليل الخطوط الخاصة بك ($dir).