Merge pull request #48 from ClovertaTheTrilobita/dev

update overall font

src/components/Posts/PostItem.astro

@@ -96,19 +96,7 @@ const tags = data.tags;
 
   .post-title {
     margin: 0;
-    font-family:
+    font-family: var(--font-serif);
-      "Noto Sans SC",
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont,
-      "Segoe UI",
-      Roboto,
-      Oxygen,
-      Ubuntu,
-      Cantarell,
-      "Open Sans",
-      "Helvetica Neue",
-      sans-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;
+    }
   }
 </style>

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;

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"
 		/>
-		<link
-			href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
-			rel="stylesheet"
-		/>
 		<meta name="generator" content={Astro.generator} />
 		<title>{pageTitle}</title>
 	</head>

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:
+    font-family: var(--font-serif);
-      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-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;
   }

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;

src/styles/global.css

@@ -16,14 +16,9 @@ article svg[id^="mermaid-"] {
 }
 
 html {
-  /* font-family: "Maple Mono", "Maple Mono CN", monospace; */
+  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
-  font-family:
+    "STSong", "SimSun", serif;
-    "Noto Serif SC",
+  font-family: var(--font-serif);
-    "Source Han Serif SC",
-    "Songti SC",
-    "STSong",
-    "SimSun",
-    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;
-}
+}

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;
 }