CSS of making Obsidian's font rendering as elegant as Yuque.

yuque-mac-minimal.css

/* ============================================================
   Yuque-style Minimal Typography for Obsidian (macOS)
   Author intent: Chinese-first readability, calm rhythm,
   long writing friendly, default theme safe.
   ============================================================ */

/* -----------------------------
   1. Core variables
----------------------------- */
:root {
  /* macOS-first font stack, Yuque-like */
  --yuque-font-text: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;

  --yuque-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  /* Reading rhythm */
  --yuque-text-size: 16px;
  --yuque-line-height: 1.82;
  --yuque-paragraph-gap: 0.92em;

  /* Colors inherit from Obsidian theme */
  --yuque-text-color: var(--text-normal);
  --yuque-muted-color: var(--text-muted);

  /* Subtle surfaces */
  --yuque-inline-code-bg: rgba(0, 0, 0, 0.06);
  --yuque-quote-bg: rgba(0, 0, 0, 0.035);
  --yuque-quote-border: rgba(0, 0, 0, 0.14);

  --yuque-link-underline: rgba(0, 0, 0, 0.28);
}

/* -----------------------------
   2. Base typography
----------------------------- */
.markdown-reading-view,
.markdown-source-view.mod-cm6 .cm-scroller {
  font-family: var(--yuque-font-text);
  font-size: var(--yuque-text-size);
  line-height: var(--yuque-line-height);
  color: var(--yuque-text-color);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------
   3. Paragraph rhythm
----------------------------- */
.markdown-reading-view p,
.markdown-source-view.mod-cm6 .cm-content p {
  margin-block: var(--yuque-paragraph-gap);
}

/* -----------------------------
   4. Headings
----------------------------- */
.markdown-reading-view h1,
.markdown-reading-view h2,
.markdown-reading-view h3,
.markdown-reading-view h4,
.markdown-reading-view h5,
.markdown-reading-view h6 {
  font-family: var(--yuque-font-text);
  font-weight: 650;
  letter-spacing: 0.01em;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
}

.markdown-reading-view h1 { font-size: 1.8em; }
.markdown-reading-view h2 { font-size: 1.5em; }
.markdown-reading-view h3 { font-size: 1.25em; }
.markdown-reading-view h4 { font-size: 1.1em; }

/* -----------------------------
   5. Lists
----------------------------- */
.markdown-reading-view ul,
.markdown-reading-view ol {
  padding-left: 1.4em;
  margin-block: 0.7em;
}

.markdown-reading-view li {
  margin-block: 0.35em;
}

.markdown-reading-view li > p {
  margin-block: 0.3em;
}

/* -----------------------------
   6. Blockquotes
----------------------------- */
.markdown-reading-view blockquote {
  margin: 0.9em 0;
  padding: 0.75em 0.9em;
  border-left: 4px solid var(--yuque-quote-border);
  background: var(--yuque-quote-bg);
  border-radius: 8px;
  color: var(--yuque-muted-color);
}

.markdown-reading-view blockquote p {
  margin-block: 0.4em;
}

/* -----------------------------
   7. Links
----------------------------- */
.markdown-reading-view a {
  text-decoration: underline;
  text-decoration-color: var(--yuque-link-underline);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* -----------------------------
   8. Inline code and code blocks
----------------------------- */
.markdown-reading-view code,
.markdown-source-view.mod-cm6 .cm-content code {
  font-family: var(--yuque-font-mono);
  font-size: 0.95em;
  padding: 0.12em 0.35em;
  border-radius: 6px;
  background: var(--yuque-inline-code-bg);
}

.markdown-reading-view pre code,
.markdown-source-view.mod-cm6 .cm-content pre code {
  background: transparent;
  padding: 0;
}

.markdown-reading-view pre {
  border-radius: 10px;
  padding: 0.9em 1em;
  margin: 0.9em 0;
}

/* -----------------------------
   9. Tables
----------------------------- */
.markdown-reading-view table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.9em 0;
}

.markdown-reading-view th,
.markdown-reading-view td {
  padding: 0.55em 0.7em;
  vertical-align: top;
}

.markdown-reading-view thead th {
  font-weight: 600;
}

/* -----------------------------
   10. Images
----------------------------- */
.markdown-reading-view img {
  border-radius: 10px;
}

/* -----------------------------
   11. Callouts
----------------------------- */
.markdown-reading-view .callout {
  border-radius: 12px;
  padding: 0.8em 0.9em;
}

/* -----------------------------
   12. Editor comfort tweaks
----------------------------- */
.markdown-source-view.mod-cm6 .cm-content {
  line-height: var(--yuque-line-height);
  padding-bottom: 8vh;
}

/* -----------------------------
   13. Optional serif reading mode
   Uncomment if you want a book-like feel
----------------------------- */
/*
.markdown-reading-view {
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}
*/