Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Chinese font is overridden #3864

Closed
4 tasks done
shellRaining opened this issue May 4, 2024 · 1 comment
Closed
4 tasks done

Custom Chinese font is overridden #3864

shellRaining opened this issue May 4, 2024 · 1 comment
Labels
bug: pending triage Maybe a bug, waiting for confirmation

Comments

@shellRaining
Copy link
Contributor

shellRaining commented May 4, 2024

Describe the bug

image

After updating to the latest version of vitepress, I found that my custom font was overridden. I have specified the font as LXGW WenKai, but it is overridden by the higher-level selector :root:lang(zh)

Reproduction

@import url("https://cdn.jsdelivr.net/gh/CMBill/lxgw-wenkai-web/style.css");

:root {
  --vp-font-family-base: "LXGW WenKai";
  --vp-font-family-mono: "LXGW WenKai Mono", monospace;
}

The above is the code of my font.css.

import DefaultTheme from "vitepress/theme-without-fonts";
import "./fonts.css";
import "./custom.css";

export default {
  extends: DefaultTheme,
}

This is how I use it

Expected behavior

Display the correct font and modify the document to provide the latest practices.

System Info

System:
    OS: macOS 14.1
    CPU: (8) arm64 Apple M1
    Memory: 207.77 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.3 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.5.0 - /opt/homebrew/bin/npm
    pnpm: 9.0.6 - ~/Library/pnpm/pnpm
    bun: 1.0.18 - ~/.bun/bin/bun
    Watchman: 2024.04.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Safari: 17.1
  npmPackages:
    vitepress: latest => 1.1.4

Additional context

No response

Validations

@shellRaining shellRaining added the bug: pending triage Maybe a bug, waiting for confirmation label May 4, 2024
@shellRaining
Copy link
Contributor Author

shellRaining commented May 4, 2024

I guess the problem comes from this piece of code

:root:lang(zh) {
--vp-font-family-base: 'Punctuation SC', 'Inter', ui-sans-serif, system-ui,
'PingFang SC', 'Noto Sans CJK SC', 'Noto Sans SC', 'Heiti SC', 'DengXian',
'Microsoft YaHei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
}

I added the following code to increase the priority of my CSS selector, and it seems to have solved it.

:root[lang] {
  --vp-font-family-base: "LXGW WenKai";
  --vp-font-family-mono: "LXGW WenKai Mono", monospace;
}

@brc-dd brc-dd closed this as completed in fa2f38a May 4, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 12, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug: pending triage Maybe a bug, waiting for confirmation
Projects
None yet
Development

No branches or pull requests

1 participant