|
| 1 | +/* font i18n */ |
| 2 | +:root { |
| 3 | + /* customizable localized variables */ |
| 4 | + :lang(ja) { |
| 5 | + --fonts-override: var(--fonts-default-override-ja); |
| 6 | + } |
| 7 | + :lang(zh-CN) { |
| 8 | + --fonts-override: var(--fonts-default-override-zh-cn); |
| 9 | + } |
| 10 | + :lang(zh-TW) { |
| 11 | + --fonts-override: var(--fonts-default-override-zh-tw); |
| 12 | + } |
| 13 | + :lang(zh-HK) { |
| 14 | + --fonts-override: var(--fonts-default-override-zh-hk); |
| 15 | + } |
| 16 | + :lang(ko) { |
| 17 | + --fonts-override: var(--fonts-default-override-ko); |
| 18 | + } |
| 19 | +} |
| 20 | + |
| 21 | +[lang] { |
| 22 | + font-family: var(--fonts-regular); |
| 23 | +} |
| 24 | + |
| 25 | +each(@fonts, { |
| 26 | + @weights: .gen-weights-all(@value); |
| 27 | + @locale: replace(@key, "@", "-"); |
| 28 | + .font-face-cjk(~"system-ui@{locale}", @weights[@light], 300); |
| 29 | + .font-face-cjk(~"system-ui@{locale}", @weights[@regular], 400); |
| 30 | + .font-face-cjk(~"system-ui@{locale}", @weights[@medium], 500); |
| 31 | + .font-face-cjk(~"system-ui@{locale}", @weights[@bold], 700); |
| 32 | + /* Safari on macOS/iOS */ |
| 33 | + @font-face { |
| 34 | + font-family: ~"system-ui@{locale}"; |
| 35 | + src: local("HelveticaNeue"); |
| 36 | + unicode-range: U+A0; |
| 37 | + } |
| 38 | + /* Other browsers on macOS/iOS */ |
| 39 | + @supports not (-webkit-hyphens:none) { |
| 40 | + @font-face { |
| 41 | + font-family: ~"system-ui@{locale}"; |
| 42 | + src: local("HelveticaNeue"); |
| 43 | + unicode-range: U+20; |
| 44 | + } |
| 45 | + } |
| 46 | + :root { |
| 47 | + /* Special handling for Firefox on Windows/Linux */ |
| 48 | + @supports (-moz-appearance:none) { |
| 49 | + --fonts-default-override@{locale}: ~"var(--fonts-proportional), system-ui@{locale}"; |
| 50 | + } |
| 51 | + --fonts-default-override@{locale}: ~"system-ui@{locale}, var(--fonts-proportional)"; |
| 52 | + } |
| 53 | +}); |
| 54 | + |
| 55 | +@fonts: { |
| 56 | + @ja: |
| 57 | + "HiraginoSans-:{W2,W4,W5,W6}", "HiraKakuProN-:{W3,W6}", "Hiragino Kaku Gothic ProN :{W3,W6}", |
| 58 | + .shs("JP")[], .shs("J")[], .noto("JP")[], .shs("")[], |
| 59 | + /* https://acetaminophen.hatenablog.com/entry/2016/02/15/225009 */ |
| 60 | + "Yu Gothic :{Regular,Medium,Bold}", "YuGothic :{Regular,Medium,Bold}", |
| 61 | + "Droid Sans Japanese:{}", "Meiryo:{, Bold}", "MS PGothic:{}"; |
| 62 | + @zh-cn: |
| 63 | + .pingfang("SC")[], |
| 64 | + .shs("CN")[], .shs("SC")[], .noto("SC")[], |
| 65 | + "HiraginoSansGB-:{W3,W6}", "Hiragino Sans GB :{W3,W6}", |
| 66 | + "Microsoft YaHei:{ Light,, Bold}", "Heiti SC :{Light,Medium}", "SimHei:{}"; |
| 67 | + @zh-tw: |
| 68 | + .pingfang("TC")[], |
| 69 | + .shs("TW")[], .shs("TC")[], .noto("TC")[], |
| 70 | + "HiraginoSansTC-:{W3,W6}", "Hiragino Sans TC :{W3,W6}", |
| 71 | + "Microsoft JhengHei:{ Light,, Bold}", "Heiti TC :{Light,Medium}", "PMingLiU:{}"; |
| 72 | + @zh-hk: |
| 73 | + .pingfang("HK")[], |
| 74 | + .shs("HK")[], .shs("HC")[], .noto("HK")[], .shs("TC")[], .noto("TC")[], |
| 75 | + "HiraginoSansTC-:{W3,W6}", "Hiragino Sans TC :{W3,W6}", |
| 76 | + "Microsoft JhengHei:{ Light,, Bold}", "Heiti TC :{Light,Medium}", "PMingLiU_HKSCS:{}", "PMingLiU:{}"; |
| 77 | + @ko: |
| 78 | + "AppleSDGothicNeo-:{Light,Regular,Medium,SemiBold}", |
| 79 | + .shs("KR")[], .shs("K")[], .noto("KR")[], |
| 80 | + "NanumBarunGothic:{ Light,, Bold}", |
| 81 | + "Malgun Gothic:{ Semilight,, Bold}", "Nanum Gothic:{, Bold}", "Dotum:{}"; |
| 82 | +} |
| 83 | + |
| 84 | +.noto(@suffix) { @value: "Noto Sans CJK @{suffix} ", "NotoSansCJK@{suffix}-"; } |
| 85 | +.shs(@suffix) { @value: replace("Source Han Sans @{suffix} ", " ", " "), "SourceHanSans@{suffix}-"; } |
| 86 | +.pingfang(@suffix) { @value: "PingFang@{suffix}-:{Light,Regular,Medium,Semibold}"; } |
| 87 | +.font-face-cjk(@family, @src, @weight) { |
| 88 | + @font-face { |
| 89 | + font-family: @family; |
| 90 | + src: @src; |
| 91 | + font-weight: @weight; |
| 92 | + unicode-range: ~"U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????"; |
| 93 | + } |
| 94 | +} |
| 95 | + |
| 96 | +.gen-weights(@family) when (isstring(@family)) { |
| 97 | + @family-str: replace(@family, ":\{.*\}$", ""); |
| 98 | + // apply standard style names if none is given |
| 99 | + // should the font have no styles, use :{}, as in "SimHei:{}" |
| 100 | + @weights-str: if(@family = @family-str, "Light,Regular,Medium,Bold", replace(@family, ".*:\{(.*)\}$", "$1")); |
| 101 | + @lightest: replace(@weights-str, ",.*", ""); |
| 102 | + @boldest: replace(@weights-str, ".*,", ""); |
| 103 | + @2ndboldest: replace(@weights-str, "(?:.*,|)([^,]*),.*$", "$1"); |
| 104 | + @2ndlightest: if(@2ndboldest = @lightest, @lightest, replace(@weights-str, "^.*?,([^,]*).*", "$1")); |
| 105 | + |
| 106 | + @light: local("@{family-str}@{lightest}"); |
| 107 | + @regular: local("@{family-str}@{2ndlightest}"); |
| 108 | + @medium: local("@{family-str}@{2ndboldest}"); |
| 109 | + @bold: local("@{family-str}@{boldest}"); |
| 110 | +} |
| 111 | +.gen-weights(@family) when not (isstring(@family)) { |
| 112 | + .gen-weights-all(@family); |
| 113 | +} |
| 114 | +.gen-weights(@family, @last) { |
| 115 | + @this: .gen-weights(@family); |
| 116 | + |
| 117 | + @light: @last[@light], @this[@light]; |
| 118 | + @regular: @last[@regular], @this[@regular]; |
| 119 | + @medium: @last[@medium], @this[@medium]; |
| 120 | + @bold: @last[@bold], @this[@bold]; |
| 121 | +} |
| 122 | +.gen-weights-all(@family) when not (isstring(@family)) { |
| 123 | + .gen-weights-all(@family, length(@family)); |
| 124 | +} |
| 125 | +.gen-weights-all(@family, 1) when not (isstring(@family)) { |
| 126 | + .gen-weights(extract(@family, 1)); |
| 127 | +} |
| 128 | +.gen-weights-all(@family, @ctr) when not (isstring(@family)) and (@ctr > 1) and (@ctr <= length(@family)) { |
| 129 | + .gen-weights(extract(@family, @ctr), .gen-weights-all(@family, @ctr - 1)); |
| 130 | +} |
0 commit comments