Skip to content

Instantly share code, notes, and snippets.

@CL-Jeremy

CL-Jeremy/_font_i18n.less

Created February 15, 2021 00:55
Show Gist options
  • Save CL-Jeremy/efd1351858c4feb894d6aee0bea448e0 to your computer and use it in GitHub Desktop.
Save CL-Jeremy/efd1351858c4feb894d6aee0bea448e0 to your computer and use it in GitHub Desktop.
Download ZIP
Extendable native font stack for cross-platform support, (here) for CJK language support for Gitea
Raw
_font_i18n.less
/* font i18n */
@font-face {
font-family: system-emoji;
src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Noto Color Emoji"), local("Twemoji Mozilla");
unicode-range: ~"U+2310-329F, U+FE0?, U+1F000-1FAFF";
}
[lang] {
font-family: var(--fonts-regular);
}
:root {
--fonts-proportional: -apple-system, "Segoe UI", system-ui, "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "Liberation Sans", sans-serif;
--fonts-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
--fonts-emoji: system-emoji;
--fonts-regular: var(--fonts-emoji), var(--fonts-proportional);
:lang(ja) {
--fonts-regular: var(--fonts-emoji), system-ui-ja, var(--fonts-proportional);
}
:lang(zh-CN) {
--fonts-regular: var(--fonts-emoji), system-ui-zh-cn, var(--fonts-proportional);
}
:lang(zh-TW) {
--fonts-regular: var(--fonts-emoji), system-ui-zh-tw, var(--fonts-proportional);
}
:lang(zh-HK) {
--fonts-regular: var(--fonts-emoji), system-ui-zh-hk, var(--fonts-proportional);
}
:lang(ko) {
--fonts-regular: var(--fonts-emoji), system-ui-ko, var(--fonts-proportional);
}
}
[lang] {
font-family: var(--fonts-regular);
}
each(@fonts, {
@weights: .gen-weights-all(@value);
@locale: replace(@key, "@", "-");
.font-face-cjk(~"system-ui@{locale}", @weights[@light], 300);
.font-face-cjk(~"system-ui@{locale}", @weights[@regular], 400);
.font-face-cjk(~"system-ui@{locale}", @weights[@medium], 500);
.font-face-cjk(~"system-ui@{locale}", @weights[@bold], 700);
});
@fonts: {
@ja:
"HiraginoSans-:{W2,W4,W5,W6}", "Hiragino Kaku Gothic ProN :{W3,W6}",
.shs("JP")[], .shs("J")[], .noto("JP")[], .shs("")[],
/* https://acetaminophen.hatenablog.com/entry/2016/02/15/225009 */
"Yu Gothic :{Regular,Medium,Bold}", "YuGothic :{Regular,Medium,Bold}",
"Droid Sans Japanese:{}", "Meiryo:{, Bold}", "MS PGothic:{}";
@zh-cn:
.pingfang("SC")[],
.shs("CN")[], .shs("SC")[], .noto("SC")[],
"HiraginoSansGB-:{W3,W6}", "Hiragino Sans GB :{W3,W6}",
"Microsoft YaHei:{ Light,, Bold}", "Heiti SC :{Light,Medium}", "SimHei:{}";
@zh-tw:
.pingfang("TC")[],
.shs("TW")[], .shs("TC")[], .noto("TC")[],
"HiraginoSansTC-:{W3,W6}", "Hiragino Sans TC :{W3,W6}",
"Microsoft JhengHei:{ Light,, Bold}", "Heiti TC :{Light,Medium}", "PMingLiU:{}";
@zh-hk:
.pingfang("HK")[],
.shs("HK")[], .shs("HC")[], .noto("HK")[], .shs("TC")[], .noto("TC")[],
"HiraginoSansTC-:{W3,W6}", "Hiragino Sans TC :{W3,W6}",
"Microsoft JhengHei:{ Light,, Bold}", "Heiti TC :{Light,Medium}", "PMingLiU_HKSCS:{}", "PMingLiU:{}";
@ko:
"AppleSDGothicNeo-:{Light,Regular,Medium,Semibold}",
.shs("KR")[], .shs("K")[], .noto("KR")[],
"NanumBarunGothic:{ Light,, Bold}",
"Malgun Gothic:{ Semilight,, Bold}", "Nanum Gothic:{, Bold}", "Dotum:{}";
}
.noto(@suffix) { @value: "Noto Sans CJK @{suffix} ", "NotoSansCJK@{suffix}-"; }
.shs(@suffix) { @value: replace("Source Han Sans @{suffix} ", " ", " "), "SourceHanSans@{suffix}-"; }
.pingfang(@suffix) { @value: "PingFang@{suffix}-:{Light,Regular,Medium,Semibold}"; }
.font-face-cjk(@family, @src, @weight) {
@font-face {
font-family: @family;
src: @src;
font-weight: @weight;
unicode-range: ~"U+11??, U+2E80-4DBF, U+AC00-D7FF, U+4E00-9FFF, U+FF00-FFEF, U+1F2??";
}
}
.gen-weights(@family) when (isstring(@family)) {
@family-str: replace(@family, ":\{.*\}$", "");
// apply standard style names if none is given
// should the font have no styles, use :{}, as in "SimHei:{}"
@weights-str: if(@family = @family-str, "Light,Regular,Medium,Bold", replace(@family, ".*:\{(.*)\}$", "$1"));
@lightest: replace(@weights-str, ",.*", "");
@boldest: replace(@weights-str, ".*,", "");
@2ndboldest: replace(@weights-str, "(?:.*,|)([^,]*),.*$", "$1");
@2ndlightest: if(@2ndboldest = @lightest, @lightest, replace(@weights-str, "^.*?,([^,]*).*", "$1"));
@light: local("@{family-str}@{lightest}");
@regular: local("@{family-str}@{2ndlightest}");
@medium: local("@{family-str}@{2ndboldest}");
@bold: local("@{family-str}@{boldest}");
}
.gen-weights(@family) when not (isstring(@family)) {
.gen-weights-all(@family);
}
.gen-weights(@family, @last) {
@this: .gen-weights(@family);
@light: @last[@light], @this[@light];
@regular: @last[@regular], @this[@regular];
@medium: @last[@medium], @this[@medium];
@bold: @last[@bold], @this[@bold];
}
.gen-weights-all(@family) when not (isstring(@family)) {
.gen-weights-all(@family, length(@family));
}
.gen-weights-all(@family, 1) when not (isstring(@family)) {
.gen-weights(extract(@family, 1));
}
.gen-weights-all(@family, @ctr) when not (isstring(@family)) and (@ctr > 1) and (@ctr <= length(@family)) {
.gen-weights(extract(@family, @ctr), .gen-weights-all(@family, @ctr - 1));
}
Raw
font_i18n.css
@font-face {
font-family: system-emoji;
src: local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Noto Color Emoji"), local("Twemoji Mozilla");
unicode-range: u+2310-329f, u+fe0?, u+1f000-1faff
}
[lang] {
font-family: var(--fonts-regular);
}
:root {
--fonts-proportional: -apple-system, "Segoe UI", system-ui, "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "Liberation Sans", sans-serif;
--fonts-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
--fonts-emoji: system-emoji;
--fonts-regular: var(--fonts-emoji), var(--fonts-proportional);
}
:root :lang(ja) {
--fonts-regular: var(--fonts-emoji), system-ui-ja, var(--fonts-proportional)
}
:root :lang(zh-CN) {
--fonts-regular: var(--fonts-emoji), system-ui-zh-cn, var(--fonts-proportional)
}
:root :lang(zh-TW) {
--fonts-regular: var(--fonts-emoji), system-ui-zh-tw, var(--fonts-proportional)
}
:root :lang(zh-HK) {
--fonts-regular: var(--fonts-emoji), system-ui-zh-hk, var(--fonts-proportional)
}
:root :lang(ko) {
--fonts-regular: var(--fonts-emoji), system-ui-ko, var(--fonts-proportional)
}
@font-face {
font-family: system-ui-ja;
src: local("HiraginoSans-W2"), local("Hiragino Kaku Gothic ProN W3"), local("Source Han Sans JP Light"), local("SourceHanSansJP-Light"), local("Source Han Sans J Light"), local("SourceHanSansJ-Light"), local("Noto Sans CJK JP Light"), local("NotoSansCJKJP-Light"), local("Source Han Sans Light"), local("SourceHanSans-Light"), local("Yu Gothic Regular"), local("YuGothic Regular"), local("Droid Sans Japanese"), local("Meiryo"), local("MS PGothic");
font-weight: 300;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-ja;
src: local("HiraginoSans-W4"), local("Hiragino Kaku Gothic ProN W3"), local("Source Han Sans JP Regular"), local("SourceHanSansJP-Regular"), local("Source Han Sans J Regular"), local("SourceHanSansJ-Regular"), local("Noto Sans CJK JP Regular"), local("NotoSansCJKJP-Regular"), local("Source Han Sans Regular"), local("SourceHanSans-Regular"), local("Yu Gothic Medium"), local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"), local("MS PGothic");
font-weight: 400;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-ja;
src: local("HiraginoSans-W5"), local("Hiragino Kaku Gothic ProN W3"), local("Source Han Sans JP Medium"), local("SourceHanSansJP-Medium"), local("Source Han Sans J Medium"), local("SourceHanSansJ-Medium"), local("Noto Sans CJK JP Medium"), local("NotoSansCJKJP-Medium"), local("Source Han Sans Medium"), local("SourceHanSans-Medium"), local("Yu Gothic Medium"), local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"), local("MS PGothic");
font-weight: 500;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-ja;
src: local("HiraginoSans-W6"), local("Hiragino Kaku Gothic ProN W6"), local("Source Han Sans JP Bold"), local("SourceHanSansJP-Bold"), local("Source Han Sans J Bold"), local("SourceHanSansJ-Bold"), local("Noto Sans CJK JP Bold"), local("NotoSansCJKJP-Bold"), local("Source Han Sans Bold"), local("SourceHanSans-Bold"), local("Yu Gothic Bold"), local("YuGothic Bold"), local("Droid Sans Japanese"), local("Meiryo Bold"), local("MS PGothic");
font-weight: 700;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-cn;
src: local("PingFangSC-Light"), local("Source Han Sans CN Light"), local("SourceHanSansCN-Light"), local("Source Han Sans SC Light"), local("SourceHanSansSC-Light"), local("Noto Sans CJK SC Light"), local("NotoSansCJKSC-Light"), local("HiraginoSansGB-W3"), local("Hiragino Sans GB W3"), local("Microsoft YaHei Light"), local("Heiti SC Light"), local("SimHei");
font-weight: 300;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-cn;
src: local("PingFangSC-Regular"), local("Source Han Sans CN Regular"), local("SourceHanSansCN-Regular"), local("Source Han Sans SC Regular"), local("SourceHanSansSC-Regular"), local("Noto Sans CJK SC Regular"), local("NotoSansCJKSC-Regular"), local("HiraginoSansGB-W3"), local("Hiragino Sans GB W3"), local("Microsoft YaHei"), local("Heiti SC Light"), local("SimHei");
font-weight: 400;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-cn;
src: local("PingFangSC-Medium"), local("Source Han Sans CN Medium"), local("SourceHanSansCN-Medium"), local("Source Han Sans SC Medium"), local("SourceHanSansSC-Medium"), local("Noto Sans CJK SC Medium"), local("NotoSansCJKSC-Medium"), local("HiraginoSansGB-W3"), local("Hiragino Sans GB W3"), local("Microsoft YaHei"), local("Heiti SC Light"), local("SimHei");
font-weight: 500;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-cn;
src: local("PingFangSC-Semibold"), local("Source Han Sans CN Bold"), local("SourceHanSansCN-Bold"), local("Source Han Sans SC Bold"), local("SourceHanSansSC-Bold"), local("Noto Sans CJK SC Bold"), local("NotoSansCJKSC-Bold"), local("HiraginoSansGB-W6"), local("Hiragino Sans GB W6"), local("Microsoft YaHei Bold"), local("Heiti SC Medium"), local("SimHei");
font-weight: 700;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-tw;
src: local("PingFangTC-Light"), local("Source Han Sans TW Light"), local("SourceHanSansTW-Light"), local("Source Han Sans TC Light"), local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"), local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"), local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"), local("Heiti TC Light"), local("PMingLiU");
font-weight: 300;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-tw;
src: local("PingFangTC-Regular"), local("Source Han Sans TW Regular"), local("SourceHanSansTW-Regular"), local("Source Han Sans TC Regular"), local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"), local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"), local("Hiragino Sans TC W3"), local("Microsoft JhengHei"), local("Heiti TC Light"), local("PMingLiU");
font-weight: 400;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-tw;
src: local("PingFangTC-Medium"), local("Source Han Sans TW Medium"), local("SourceHanSansTW-Medium"), local("Source Han Sans TC Medium"), local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"), local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"), local("Hiragino Sans TC W3"), local("Microsoft JhengHei"), local("Heiti TC Light"), local("PMingLiU");
font-weight: 500;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-tw;
src: local("PingFangTC-Semibold"), local("Source Han Sans TW Bold"), local("SourceHanSansTW-Bold"), local("Source Han Sans TC Bold"), local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"), local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"), local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"), local("Heiti TC Medium"), local("PMingLiU");
font-weight: 700;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-hk;
src: local("PingFangHK-Light"), local("Source Han Sans HK Light"), local("SourceHanSansHK-Light"), local("Source Han Sans HC Light"), local("SourceHanSansHC-Light"), local("Noto Sans CJK HK Light"), local("NotoSansCJKHK-Light"), local("Source Han Sans TC Light"), local("SourceHanSansTC-Light"), local("Noto Sans CJK TC Light"), local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"), local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"), local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
font-weight: 300;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-hk;
src: local("PingFangHK-Regular"), local("Source Han Sans HK Regular"), local("SourceHanSansHK-Regular"), local("Source Han Sans HC Regular"), local("SourceHanSansHC-Regular"), local("Noto Sans CJK HK Regular"), local("NotoSansCJKHK-Regular"), local("Source Han Sans TC Regular"), local("SourceHanSansTC-Regular"), local("Noto Sans CJK TC Regular"), local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"), local("Hiragino Sans TC W3"), local("Microsoft JhengHei"), local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
font-weight: 400;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-hk;
src: local("PingFangHK-Medium"), local("Source Han Sans HK Medium"), local("SourceHanSansHK-Medium"), local("Source Han Sans HC Medium"), local("SourceHanSansHC-Medium"), local("Noto Sans CJK HK Medium"), local("NotoSansCJKHK-Medium"), local("Source Han Sans TC Medium"), local("SourceHanSansTC-Medium"), local("Noto Sans CJK TC Medium"), local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"), local("Hiragino Sans TC W3"), local("Microsoft JhengHei"), local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
font-weight: 500;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-zh-hk;
src: local("PingFangHK-Semibold"), local("Source Han Sans HK Bold"), local("SourceHanSansHK-Bold"), local("Source Han Sans HC Bold"), local("SourceHanSansHC-Bold"), local("Noto Sans CJK HK Bold"), local("NotoSansCJKHK-Bold"), local("Source Han Sans TC Bold"), local("SourceHanSansTC-Bold"), local("Noto Sans CJK TC Bold"), local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"), local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"), local("Heiti TC Medium"), local("PMingLiU_HKSCS"), local("PMingLiU");
font-weight: 700;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-ko;
src: local("AppleSDGothicNeo-Light"), local("Source Han Sans KR Light"), local("SourceHanSansKR-Light"), local("Source Han Sans K Light"), local("SourceHanSansK-Light"), local("Noto Sans CJK KR Light"), local("NotoSansCJKKR-Light"), local("NanumBarunGothic Light"), local("Malgun Gothic Semilight"), local("Nanum Gothic"), local("Dotum");
font-weight: 300;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-ko;
src: local("AppleSDGothicNeo-Regular"), local("Source Han Sans KR Regular"), local("SourceHanSansKR-Regular"), local("Source Han Sans K Regular"), local("SourceHanSansK-Regular"), local("Noto Sans CJK KR Regular"), local("NotoSansCJKKR-Regular"), local("NanumBarunGothic"), local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
font-weight: 400;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-ko;
src: local("AppleSDGothicNeo-Medium"), local("Source Han Sans KR Medium"), local("SourceHanSansKR-Medium"), local("Source Han Sans K Medium"), local("SourceHanSansK-Medium"), local("Noto Sans CJK KR Medium"), local("NotoSansCJKKR-Medium"), local("NanumBarunGothic"), local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
font-weight: 500;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
@font-face {
font-family: system-ui-ko;
src: local("AppleSDGothicNeo-Semibold"), local("Source Han Sans KR Bold"), local("SourceHanSansKR-Bold"), local("Source Han Sans K Bold"), local("SourceHanSansK-Bold"), local("Noto Sans CJK KR Bold"), local("NotoSansCJKKR-Bold"), local("NanumBarunGothic Bold"), local("Malgun Gothic Bold"), local("Nanum Gothic Bold"), local("Dotum");
font-weight: 700;
unicode-range: u+11??, u+2e80-4dbf, u+ac00-d7ff, u+4e00-9fff, u+ff00-ffef, u+1f2??
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment