diff --git a/src/components/Posts/PostItem.astro b/src/components/Posts/PostItem.astro
index a105f44..0cb2dbe 100644
--- a/src/components/Posts/PostItem.astro
+++ b/src/components/Posts/PostItem.astro
@@ -96,19 +96,7 @@ const tags = data.tags;
.post-title {
margin: 0;
- font-family:
- "Noto Sans SC",
- system-ui,
- -apple-system,
- BlinkMacSystemFont,
- "Segoe UI",
- Roboto,
- Oxygen,
- Ubuntu,
- Cantarell,
- "Open Sans",
- "Helvetica Neue",
- sans-serif;
+ font-family: var(--font-serif);
font-weight: 500;
font-size: 1.34rem;
line-height: 1.5;
@@ -184,6 +172,30 @@ const tags = data.tags;
color: #aab7c4;
}
+ :global(html:lang(zh)) .post-title {
+ font-size: 1.5rem;
+ line-height: 1.45;
+ }
+
+ :global(html:lang(zh)) .post-description {
+ font-size: 1.0625rem;
+ line-height: 1.8;
+ }
+
+ :global(html:lang(zh)) .tags {
+ margin-top: 0.6rem;
+ font-size: 0.9375rem;
+ }
+
+ :global(html:lang(zh)) .post-meta-row {
+ margin-top: 0.6rem;
+ font-size: 0.875rem;
+ }
+
+ :global(html:lang(zh)) .post-card + .post-card {
+ margin-top: 1.75rem;
+ }
+
@media (max-width: 600px) {
.post-link {
display: grid;
@@ -240,5 +252,21 @@ const tags = data.tags;
padding-bottom: 0.2rem;
padding-top: 0.2rem;
}
+
+ :global(html:lang(zh)) .post-title {
+ font-size: 1.4375rem;
+ }
+
+ :global(html:lang(zh)) .post-link {
+ grid-template-columns: minmax(0, 1fr) clamp(6rem, 30vw, 8rem);
+ }
+
+ :global(html:lang(zh)) .post-image-link {
+ width: 100%;
+ }
+
+ :global(html:lang(zh)) .post-image {
+ height: auto;
+ }
}
diff --git a/src/components/TagLink.astro b/src/components/TagLink.astro
index 767ad33..5f4771a 100644
--- a/src/components/TagLink.astro
+++ b/src/components/TagLink.astro
@@ -14,7 +14,7 @@ const { tag, lang } = Astro.props;
display: inline-block;
max-width: 100%;
padding-block: 0.2rem;
- font-family: "Noto Sans SC", system-ui, sans-serif;
+ font-family: var(--font-serif);
font-size: inherit;
font-weight: 400;
line-height: 1.6;
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index fba5da0..a796a61 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -35,10 +35,6 @@ const {
href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap"
rel="stylesheet"
/>
-
{pageTitle}
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
index 7d5bb9b..addee57 100644
--- a/src/layouts/MarkdownPostLayout.astro
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -309,17 +309,7 @@ const publishedDate = new Intl.DateTimeFormat(
--article-muted: #596672;
--article-rule: rgba(83, 100, 147, 0.25);
--article-tint: rgba(83, 100, 147, 0.045);
- font-family:
- system-ui,
- -apple-system,
- BlinkMacSystemFont,
- "Segoe UI",
- "PingFang SC",
- "Hiragino Sans GB",
- "Microsoft YaHei",
- "Noto Sans CJK SC",
- "Source Han Sans SC",
- sans-serif;
+ font-family: var(--font-serif);
font-size: 1.07rem;
font-weight: 400;
line-height: 1.85;
@@ -330,13 +320,18 @@ const publishedDate = new Intl.DateTimeFormat(
margin-top: 0;
}
+ :global(html:lang(zh)) .post-content {
+ font-size: 1.125rem;
+ line-height: 1.9;
+ }
+
.post-content :global(p) {
margin-block: 1.05em;
}
.post-content :global(h2) {
margin: 3.2rem 0 1rem;
- font-family: "Noto Sans SC", system-ui, sans-serif;
+ font-family: var(--font-serif);
font-size: clamp(1.35rem, 2vw, 1.55rem);
line-height: 1.4;
text-wrap: balance;
@@ -344,7 +339,7 @@ const publishedDate = new Intl.DateTimeFormat(
.post-content :global(h3) {
margin: 2.25rem 0 0.8rem;
- font-family: "Noto Sans SC", system-ui, sans-serif;
+ font-family: var(--font-serif);
font-size: clamp(1.12rem, 1.6vw, 1.28rem);
line-height: 1.45;
text-wrap: balance;
@@ -352,7 +347,7 @@ const publishedDate = new Intl.DateTimeFormat(
.post-content :global(h4) {
margin: 1.8rem 0 0.65rem;
- font-family: "Noto Sans SC", system-ui, sans-serif;
+ font-family: var(--font-serif);
line-height: 1.5;
font-size: 1.05em;
}
@@ -398,7 +393,7 @@ const publishedDate = new Intl.DateTimeFormat(
.post-content :global(figcaption) {
margin-top: 0.55rem;
color: var(--article-muted);
- font-family: "Noto Sans SC", system-ui, sans-serif;
+ font-family: var(--font-serif);
font-size: 0.78rem;
line-height: 1.5;
text-align: center;
@@ -495,7 +490,7 @@ const publishedDate = new Intl.DateTimeFormat(
gap: 0.3rem 0.55rem;
margin: 0.3rem 0;
color: #66717c;
- font-family: "Noto Sans SC", system-ui, sans-serif;
+ font-family: var(--font-serif);
font-size: 0.8rem;
font-weight: 400;
line-height: 1.5;
@@ -507,6 +502,15 @@ const publishedDate = new Intl.DateTimeFormat(
opacity: 0.65;
}
+ :global(html:lang(zh)) .description {
+ font-size: 1.0625rem;
+ line-height: 1.8;
+ }
+
+ :global(html:lang(zh)) .post-byline {
+ font-size: 0.875rem;
+ }
+
:global(html.dark) .post-byline {
color: #aab7c4;
}
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 302a7f0..d745620 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -83,13 +83,19 @@ const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml";
.section-title,
.index :global(.latest-comments > h2) {
margin: 0 0 1.25rem;
- font-family: "Noto Sans SC", system-ui, sans-serif;
+ font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 500;
line-height: 1.5;
color: #66717c;
}
+ :global(html:lang(zh)) .section-title,
+ :global(html:lang(zh)) .index :global(.latest-comments > h2) {
+ font-size: 1.0625rem;
+ margin-bottom: 1rem;
+ }
+
:global(html.dark) .section-title,
:global(html.dark) .index :global(.latest-comments > h2) {
color: #aab7c4;
diff --git a/src/styles/global.css b/src/styles/global.css
index f3714c8..f9ae9f5 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -16,14 +16,9 @@ article svg[id^="mermaid-"] {
}
html {
- /* font-family: "Maple Mono", "Maple Mono CN", monospace; */
- font-family:
- "Noto Serif SC",
- "Source Han Serif SC",
- "Songti SC",
- "STSong",
- "SimSun",
- serif;
+ --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
+ "STSong", "SimSun", serif;
+ font-family: var(--font-serif);
font-weight: 500;
/* background-color: #ffffff; */
background-color: var(--background-color);
@@ -36,6 +31,18 @@ html {
scrollbar-color: #828282 transparent;
}
+/* 中文保留适合阅读的常规字重。 */
+html:lang(zh) {
+ font-weight: 400;
+}
+
+button,
+input,
+select,
+textarea {
+ font-family: var(--font-serif);
+}
+
body {
margin: 0 auto;
width: 100%;
@@ -99,6 +106,10 @@ html.dark body::after {
body {
font-size: 1rem;
}
+
+ html:lang(zh) body {
+ font-size: 1.0625rem;
+ }
}
@@ -156,4 +167,4 @@ img {
max-width: 100%;
height: auto;
display: block;
-}
\ No newline at end of file
+}
diff --git a/src/styles/latest-comments.css b/src/styles/latest-comments.css
index 873b04a..569288c 100644
--- a/src/styles/latest-comments.css
+++ b/src/styles/latest-comments.css
@@ -84,7 +84,7 @@
justify-content: center;
background: rgba(160, 175, 190, 0.14);
color: #5e6b77;
- font-family: system-ui, sans-serif;
+ font-family: var(--font-serif);
font-size: 0.85rem;
font-weight: 600;
user-select: none;
@@ -101,7 +101,7 @@
align-items: baseline;
gap: 0.25rem 0.55rem;
min-width: 0;
- font-family: system-ui, sans-serif;
+ font-family: var(--font-serif);
line-height: 1.35;
}
@@ -126,7 +126,7 @@
max-height: 4.65em;
overflow: hidden;
color: #3f4a54;
- font-family: system-ui, sans-serif;
+ font-family: var(--font-serif);
font-size: 0.93rem;
font-weight: 400;
line-height: 1.55;
@@ -143,7 +143,7 @@
gap: 0.55rem 1rem;
min-width: 0;
color: #89939c;
- font-family: system-ui, sans-serif;
+ font-family: var(--font-serif);
font-size: 0.75rem;
line-height: 1.45;
}