Vue
Font rendering difference between dev vite server and built #12415
Unanswered
alexchexes
asked this question in
Help/Questions
Replies: 1 comment 1 reply
-
|
Cannot reproduce on a Mac. But I think maybe you should try diff all computed styles to see what's changed. 
|
Beta Was this translation helpful? Give feedback.
1 reply
-
|
I mentioned in the reproduction steps and system info that the setup is on Windows, not Mac. Regarding computed styles, they are identical, as I mentioned. The only difference (when selecting "Show all") is that in the build, there are no |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Vue version
3.5.12
Link to minimal reproduction
https://github.com/alexchexes/vue-built-font-rendering-difference
Steps to reproduce
pnpm install,pnpm devpnpm run build,pnpm run previewWhat is expected?
The font should render identically in both environments — live preview via the Vite dev server and the built HTML
What is actually happening?
The font renders thinner in the Vite dev server compared to the built HTML (or the other way around - font rendered thicker in the built HTML compared to the Vite dev server)
System Info
System: OS: Windows 11 10.0.26100 CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H Memory: 42.78 GB / 63.67 GB Binaries: Node: 22.11.0 - C:\Program Files\nodejs\node.EXE npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD pnpm: 9.12.3 - ~\AppData\Roaming\npm\pnpm.CMD Browsers: Edge: Chromium (130.0.2849.80) Chrome 130.0.6723.117 (Official Build) (64-bit) (cohort: Stable) npmPackages: vue: ^3.5.12 => 3.5.13Any additional comments?
The issue arises in the default Vue HelloWorld template with all styles and settings being default. Only a single line of HTML and one CSS rule were added to demonstrate the issue.
I first encountered this while setting up Tailwind CSS in a freshly created Vue HelloWorld app. Later, I reproduced the issue without Tailwind or any other modifications — only the default Vue HelloWorld setup was used.
Here is a screencast demonstration:
chrome_2024-11-16--13-30-01--632.mp4
Vite dev server:
Build:
Computed styles are identical in both cases:
Beta Was this translation helpful? Give feedback.
All reactions