Font weight turns lighter on Mac/Safari

╄→гoц情女王★ 提交于 2019-11-27 00:18:55

So I fixed my problem with applying:

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

Now my font is consistent on every browsers.

try both

{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}

Just use this: link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet"

Instead of this: link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"

problem solved for me this way!

Using -webkit-font-smoothing: subpixel-antialiased worked a little bit, but there was still too much of a difference between Safari, Chrome, and Firefox. I realized trying to make the font thicker in Safari wasn't going to work, so instead I made the font lighter in other browsers and then used a slightly thicker font weight. What ended up normalizing the font weights across browsers for me is this:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Try this:

transform: translateZ(0.1px);

Webkit browsers on Mac has known problem with antialiasing 2d and 3d text elements differently. Giving the 3d property to the element usually fixes the problem.

the truth is that the solution to this problem (until apple fix this) is very simple. Create a css file (example.css) and inside insert this:

* {-webkit-font-smoothing:subpixel-antialiased;}

Then go to Safari > Preferences > Advanced > Style Sheet click it and select the css file that we just created. Restart Safari.

TADA!! Problem solved. For now

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!