vuestic-admin icon indicating copy to clipboard operation
vuestic-admin copied to clipboard

[issue]the Chinese font was occluded

Open sunrui opened this issue 1 year ago • 6 comments

Hi, the Chinese font was occluded in chrome 112.0.1722.46, the figure below shows, see 用户名、密码.

my env: vuestic version 3.1.0 mac version: 13.3.1 (22E261)

  1. chrome preview 截屏2023-04-30 19 24 44

  2. safari preview 截屏2023-04-30 19 33 38

sunrui avatar Apr 30 '23 11:04 sunrui

maybe your chrome has configured the minimum font size to have a greater value than 9px.

according to my chrome inspector viewing https://vuestic.epicmax.co/auth/login, the input label should have a computed font-size of 9.6px

image


or if you want to keep the minimum font-size, then you can tune the label height by overriding the css var like this https://ui.vuestic.dev/en/styles/css-variables

--va-input-container-label-font-size: 0.6rem;
--va-input-container-label-letter-spacing: 0.0375rem;
--va-input-container-label-line-height: 1.2;
--va-input-container-label-font-weight: 700;

lkho avatar Apr 30 '23 19:04 lkho

thanks, it seems works but doesn't solve the problem

1)This is the effect I compiled after downloading it from the official website.

截屏2023-05-01 23 18 11

2)now i copy the code to the "src/scss/vuestic-sass/index.scss" like this,

截屏2023-05-01 23 19 16

now it's the effect below

截屏2023-05-01 23 18 11

3)it seems that when i changed the code

--va-input-container-label-line-height: 1.0;

the effect is ok below 截屏2023-05-01 23 26 08

bug It will get big font when click

截屏2023-05-01 23 26 12

sunrui avatar May 01 '23 15:05 sunrui

by the way, the effect of this address "https://vuestic.epicmax.co/auth/login" is correct i tried 截屏2023-05-01 23 31 55

sunrui avatar May 01 '23 15:05 sunrui

哈啰 美女 请问你这个问题后面解决了吗 现在是否还在用这个模板, 可否交流一下

TPanic98 avatar Jun 28 '23 15:06 TPanic98

哈啰 美女 请问你这个问题后面解决了吗 现在是否还在用这个模板, 可否交流一下

没有解决😄

sunrui avatar Jun 30 '23 01:06 sunrui