Button text looks blurry on Windows

[srirambv]

• Did you search for similar issues before submitting this one?
  Yes

• Describe the issue you encountered:
  Button text looks blurry on Windows

• Platform (Win7, 8, 10? macOS? Linux distro?):
  Windows 10 x64

• Brave Version (revision SHA):

Brave	0.18.27
rev	eba55a1
Muon	4.3.16

• Steps to reproduce

  1. Check for update, see button text, looks blurry
  2. Hover over the button, both button and text looks sharp

• Actual result:
  See screenshot

• Expected result:
  Text should be sharp irrespective of hover only button should show the hover effect

• Will the steps above reproduce in a fresh profile? If not what other info can be added?
  Yes

• Is this an issue in the currently released version?
  Yes verified on older builds same issue

• Can this issue be consistently reproduced?
  Yes

• Extra QA steps:

  1. Verified on 100% DPI same issue but not very noticeable as everything looks very small
  2. Adding -webkit-font-smoothing: antialiased; makes no difference

• Screenshot if needed:
  125% DPI
  
  100%DPI
  

• Any related issues:
  cc: @luixxiul @cezaraugusto @jenn-rhim

[luixxiul]

For me on Windows (ja-JP) the blur cannot be noticed (I cannot see the issue even on the gif animation). I am wondering if it is related with monitors or font-family.

[srirambv]

Difference in frames.

Text looks blurry without hover

Text is crisp on hover

[luixxiul]

-webkit-font-smoothing is supported only on macOS, so theoretically you get only the blurry button on Windows. See: https://caniuse.com/#search=font-smooth

I am going to set -webkit-font-smooth: initial to browserButton, modifying the font-weight and font-family at the same time, in order to make button rendering consistent among platforms.

If it does not work either, I must say we will need to add wontfix to this issue.

[luixxiul]

@srirambv On #10951 I modified font-family and font-weight. Would you mind trying the PR on your environment and letting me know if it works (ie. please check if font rendering of the button label is different from other elements)?

[srirambv]

Manually tested the branch 3acca8d and text looks much sharp 👍
Normal

On hover

[luixxiul]

Thanks for confirming that! would you mind checking that other buttons style is not regressed? thanks :-)