|
| 1 | +/* font i18n */ |
| 2 | +:root { |
| 3 | + /* customizable localized variables */ |
| 4 | + :lang(ja) { |
| 5 | + --fonts-regular: var(--fonts-emoji), system-ui-ja, var(--fonts-proportional); |
| 6 | + } |
| 7 | + :lang(zh-CN) { |
| 8 | + --fonts-regular: var(--fonts-emoji), system-ui-zh-cn, var(--fonts-proportional); |
| 9 | + } |
| 10 | + :lang(zh-TW) { |
| 11 | + --fonts-regular: var(--fonts-emoji), system-ui-zh-tw, var(--fonts-proportional); |
| 12 | + } |
| 13 | + :lang(zh-HK) { |
| 14 | + --fonts-regular: var(--fonts-emoji), system-ui-zh-hk, var(--fonts-proportional); |
| 15 | + } |
| 16 | + :lang(ko) { |
| 17 | + --fonts-regular: var(--fonts-emoji), system-ui-ko, var(--fonts-proportional); |
| 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 | +}); |
| 33 | + |
| 34 | +@fonts: { |
| 35 | + @ja: |
| 36 | + "HiraginoSans-:{W2,W4,W5,W6}", "Hiragino Kaku Gothic ProN :{W3,W6}", |
| 37 | + .shs("JP")[], .shs("J")[], .noto("JP")[], .shs("")[], |
| 38 | + /* https://acetaminophen.hatenablog.com/entry/2016/02/15/225009 */ |
| 39 | + "Yu Gothic :{Regular,Medium,Medium,Bold}", "YuGothic :{Regular,Medium,Medium,Bold}", |
| 40 | + "Droid Sans Japanese:{}", "Meiryo:{, Bold}", "MS PGothic:{}"; |
| 41 | + @zh-cn: |
| 42 | + .pingfang("SC")[], |
| 43 | + .shs("CN")[], .shs("SC")[], .noto("SC")[], |
| 44 | + "HiraginoSansGB-:{W3,W6}", "Hiragino Sans GB :{W3,W6}", |
| 45 | + "Microsoft YaHei:{ Light,, Bold}", "Heiti SC :{Light,Medium}", "SimHei:{}"; |
| 46 | + @zh-tw: |
| 47 | + .pingfang("TC")[], |
| 48 | + .shs("TW")[], .shs("TC")[], .noto("TC")[], |
| 49 | + "HiraginoSansTC-:{W3,W6}", "Hiragino Sans TC :{W3,W6}", |
| 50 | + "Microsoft JhengHei:{ Light,, Bold}", "Heiti TC :{Light,Medium}", "PMingLiU:{}"; |
| 51 | + @zh-hk: |
| 52 | + .pingfang("HK")[], |
| 53 | + .shs("HK")[], .shs("HC")[], .noto("HK")[], .shs("TC")[], .noto("TC")[], |
| 54 | + "Microsoft JhengHei:{ Light,, Bold}", "Heiti TC :{Light,Medium}", "PMingLiU_HKSCS:{}", "PMingLiU:{}"; |
| 55 | + @ko: |
| 56 | + "AppleSDGothicNeo-:{Light,Regular,Medium,Semibold}", |
| 57 | + .shs("KR")[], .shs("K")[], .noto("KR")[], |
| 58 | + "NanumBarunGothic:{ Light,, Bold}", |
| 59 | + "Malgun Gothic:{ Semilight,, Bold}", "Nanum Gothic:{, Bold}", "Dotum:{}"; |
| 60 | +} |
| 61 | + |
| 62 | +.noto(@suffix) { @value: "Noto Sans CJK @{suffix} ", "NotoSansCJK@{suffix}-"; } |
| 63 | +.shs(@suffix) { @value: replace("Source Han Sans @{suffix} ", " ", " "), "SourceHanSans@{suffix}-"; } |
| 64 | +.pingfang(@suffix) { @value: "PingFang@{suffix}-:{Light,Regular,Medium,Semibold}"; } |
| 65 | +.font-face-cjk(@family, @src, @weight) { |
| 66 | + @font-face { |
| 67 | + font-family: @family; |
| 68 | + src: @src; |
| 69 | + font-weight: @weight; |
| 70 | + unicode-range: ~"U+11??, U+2E80-4DBF, U+AC00-D7FF, U+4E00-9FFF, U+FF00-FFEF, U+1F2??"; |
| 71 | + } |
| 72 | +} |
| 73 | + |
| 74 | +.gen-weights(@family) when (isstring(@family)) { |
| 75 | + @family-str: replace(@family, ":\{.*\}$", ""); |
| 76 | + // apply standard style names if none is given |
| 77 | + // should the font have no styles, use :{}, as in "SimHei:{}" |
| 78 | + @weights-str: if(@family = @family-str, "Light,Regular,Medium,Bold", replace(@family, ".*:\{(.*)\}$", "$1")); |
| 79 | + @lightest: replace(@weights-str, ",.*", ""); |
| 80 | + @boldest: replace(@weights-str, ".*,", ""); |
| 81 | + @2ndboldest: replace(@weights-str, "(?:.*,|)([^,]*),.*$", "$1"); |
| 82 | + @2ndlightest: if(@2ndboldest = @lightest, @lightest, replace(@weights-str, "^.*?,([^,]*).*", "$1")); |
| 83 | + |
| 84 | + @light: local("@{family-str}@{lightest}"); |
| 85 | + @regular: local("@{family-str}@{2ndlightest}"); |
| 86 | + @medium: local("@{family-str}@{2ndboldest}"); |
| 87 | + @bold: local("@{family-str}@{boldest}"); |
| 88 | +} |
| 89 | +.gen-weights(@family) when not (isstring(@family)) { |
| 90 | + .gen-weights-all(@family); |
| 91 | +} |
| 92 | +.gen-weights(@family, @last) { |
| 93 | + @this: .gen-weights(@family); |
| 94 | + |
| 95 | + @light: @last[@light], @this[@light]; |
| 96 | + @regular: @last[@regular], @this[@regular]; |
| 97 | + @medium: @last[@medium], @this[@medium]; |
| 98 | + @bold: @last[@bold], @this[@bold]; |
| 99 | +} |
| 100 | +.gen-weights-all(@family) when not (isstring(@family)) { |
| 101 | + .gen-weights-all(@family, length(@family)); |
| 102 | +} |
| 103 | +.gen-weights-all(@family, 1) when not (isstring(@family)) { |
| 104 | + .gen-weights(extract(@family, 1)); |
| 105 | +} |
| 106 | +.gen-weights-all(@family, @ctr) when not (isstring(@family)) and (@ctr > 1) and (@ctr <= length(@family)) { |
| 107 | + .gen-weights(extract(@family, @ctr), .gen-weights-all(@family, @ctr - 1)); |
| 108 | +} |
0 commit comments