lbineau
1/6/2017 - 1:41 PM

Non western languages

Non western languages

// font-familly
$ff-balaquin: 'balaquin';

// font-weight
$fw-thin: 100;
$fw-xlight: 200;
$fw-light: 300;
$fw-normal: 400;
$fw-medium: 500;
$fw-semibold: 600;
$fw-bold: 700;

@mixin getLang($lang) {
  @at-root {
    @if ($lang == asian) {
      [lang="zh-Hans"] &,
      [lang="zh-Hant"] &,
      [lang="ja"] &,
      [lang="ko"] & {
        @content;
      }
    ;
    } @else if ($lang == chinese) {
      [lang="zh-Hans"] &,
      [lang="zh-Hant"] & {
        @content;
      }
    ;
    } @else if ($lang == hans) {
      [lang="zh-Hans"] & {
        @content;
      }
    ;
    } @else if ($lang == hant) {
      [lang="zh-Hant"] & {
        @content;
      }
    ;
    } @else if ($lang == jp) {
      [lang="ja"] & {
        @content;
      }
      ;
    } @else if ($lang == ko) {
      [lang="ko"] & {
        @content;
      }
    ;
    } @else if ($lang == ru) {
      [lang="ru"] & {
        @content;
      }
    ;
    }
  }
}

@font-face {
  font-family: $ff-balaquin;
  src: url('~assets/fonts/palanquin-extralight-webfont.woff2') format('woff2'), url('~assets/fonts/palanquin-extralight-webfont.woff') format('woff');
  font-weight: $fw-xlight;
  font-style: normal;
}
@font-face {
  font-family: $ff-balaquin;
  src: url('~assets/fonts/palanquin-light-webfont.woff2') format('woff2'), url('~assets/fonts/palanquin-light-webfont.woff') format('woff');
  font-weight: $fw-light;
  font-style: normal;
}
@font-face {
  font-family: $ff-balaquin;
  src: url('~assets/fonts/palanquin-thin-webfont.woff2') format('woff2'), url('~assets/fonts/palanquin-thin-webfont.woff') format('woff');
  font-weight: $fw-thin;
  font-style: normal;
}
@font-face {
  font-family: $ff-balaquin;
  src: url('~assets/fonts/palanquin-regular-webfont.woff2') format('woff2'), url('~assets/fonts/palanquin-regular-webfont.woff') format('woff');
  font-weight: $fw-normal;
  font-style: normal;
}
@font-face {
  font-family: $ff-balaquin;
  src: url('~assets/fonts/palanquin-medium-webfont.woff2') format('woff2'), url('~assets/fonts/palanquin-medium-webfont.woff') format('woff');
  font-weight: $fw-medium;
  font-style: normal;
}
@font-face {
  font-family: $ff-balaquin;
  src: url('~assets/fonts/palanquin-semibold-webfont.woff2') format('woff2'), url('~assets/fonts/palanquin-semibold-webfont.woff') format('woff');
  font-weight: $fw-semibold;
  font-style: normal;
}
@font-face {
  font-family: $ff-balaquin;
  src: url('~assets/fonts/palanquin-bold-webfont.woff2') format('woff2'), url('~assets/fonts/palanquin-bold-webfont.woff') format('woff');
  font-weight: $fw-bold;
  font-style: normal;
}

%font-balaquin {
  font-family: $ff-balaquin, "Arial Unicode MS", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: greyscale;

  @at-root {
    @include getLang(chinese) {
      font-family: $ff-balaquin, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", "Arial Unicode MS";
    }
    @include getLang(jp) {
      font-family: $ff-balaquin, "メイリオ","MS PGothic", Verdana, Helvetica, sans-serif;
    }
    @include getLang(ko) {
      font-family: $ff-balaquin, 'Malgun Gothic', "Arial Unicode MS";
    }
    @include getLang(ru) {
      font-family: $ff-balaquin, "Geneva CY", "Helvetica CY", "Arial Unicode MS";
    }
  }

}

body {
  @extend %font-balaquin
}
<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <a href="http://www.w3schools.com/TAgs/ref_language_codes.asp">See all the possible languages codes</a>
  </body>
</html>