Skip to content

Instantly share code, notes, and snippets.

@lbineau
Last active January 6, 2017 13:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lbineau/11525ffacf0a1c5fe06704b11250a77f to your computer and use it in GitHub Desktop.
Save lbineau/11525ffacf0a1c5fe06704b11250a77f to your computer and use it in GitHub Desktop.
Non western languages
<!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>
// 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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment