Merge pull request #98 from xiaolai/letterspacing-for-different-languages
中英文混排之时,中文字符之间有字间距,英文字符之间没有字间距。
This commit is contained in:
commit
98f61e5ec1
4 changed files with 47 additions and 3 deletions
|
@ -767,13 +767,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
autoSpacing () {
|
autoSpacing () {
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
const callback = () => {
|
||||||
const $$rootList = document.querySelectorAll(this.rootSelector);
|
const $$rootList = document.querySelectorAll(this.rootSelector);
|
||||||
|
|
||||||
for (let $$root of $$rootList) {
|
for (let $$root of $$rootList) {
|
||||||
this.spacingElement($$root);
|
this.spacingElement($$root);
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
|
if (document.readyState === 'complete') setTimeout(callback);
|
||||||
|
else document.addEventListener('DOMContentLoaded', callback);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -131,7 +131,7 @@
|
||||||
src: local("Source Han Sans KR Heavy"), local("Noto Sans CJK KR Heavy");
|
src: local("Source Han Sans KR Heavy"), local("Noto Sans CJK KR Heavy");
|
||||||
}
|
}
|
||||||
|
|
||||||
font-face {
|
@font-face {
|
||||||
font-family: "Heti Hei SC Black Fallback";
|
font-family: "Heti Hei SC Black Fallback";
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
src: local("Microsoft YaHei"), local("Droid Sans Fallback");
|
src: local("Microsoft YaHei"), local("Droid Sans Fallback");
|
||||||
|
@ -204,6 +204,7 @@ font-face {
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.heti::before, .heti::after {
|
.heti::before, .heti::after {
|
||||||
|
@ -327,6 +328,22 @@ font-face {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.heti:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti:not(:lang(zh)) {
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heti a,
|
||||||
|
.heti abbr,
|
||||||
|
.heti code,
|
||||||
|
.heti heti-spacing,
|
||||||
|
.heti [lang="en-US"] {
|
||||||
|
/*
|
||||||
|
There should be no leeter-spacing between
|
||||||
|
English characters.
|
||||||
|
*/
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
.heti h1,
|
.heti h1,
|
||||||
.heti h2,
|
.heti h2,
|
||||||
.heti h3,
|
.heti h3,
|
||||||
|
|
|
@ -106,4 +106,23 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 非中文时不加间距
|
||||||
|
letter-spacing: $letter-spacing-medium;
|
||||||
|
@include non-cjk-block {
|
||||||
|
letter-spacing: $letter-spacing-normal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
abbr,
|
||||||
|
code,
|
||||||
|
heti-spacing,
|
||||||
|
[lang="en-US"] {
|
||||||
|
/*
|
||||||
|
There should be no leeter-spacing between
|
||||||
|
English characters.
|
||||||
|
*/
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -54,6 +54,12 @@ $line-height-expanded-ultra: 2.25 !default;
|
||||||
//$line-height-condensed: 1.25 !default;
|
//$line-height-condensed: 1.25 !default;
|
||||||
//$line-height-condensed-ultra: 1 !default;
|
//$line-height-condensed-ultra: 1 !default;
|
||||||
|
|
||||||
|
// 字符间距
|
||||||
|
$letter-spacing-normal: 0 !default;
|
||||||
|
$letter-spacing-small: 0.01em !default;
|
||||||
|
$letter-spacing-medium: 0.02em !default;
|
||||||
|
$letter-spacing-large: 0.05em !default;
|
||||||
|
|
||||||
$line-height-size-normal: $font-size-normal * $line-height-normal !default;
|
$line-height-size-normal: $font-size-normal * $line-height-normal !default;
|
||||||
$line-height-size-large: $line-height-size-normal !default;
|
$line-height-size-large: $line-height-size-normal !default;
|
||||||
$line-height-size-x-large: $font-size-x-large * $line-height-normal !default;
|
$line-height-size-x-large: $font-size-x-large * $line-height-normal !default;
|
||||||
|
|
Loading…
Reference in a new issue