字体在台式机上亮，但在移动设备上不亮

Question

I have this class on some of my texts .description {font-weight: lighter;font-size: 22px; } .description {font-weight: lighter;font-size: 22px; }

But the font-weight attribute works on desktop but not on mobile, why is that?

When I scale chrome on my desktop to mobile size everything works fine, and the text is as light as it should be, but on mobile its not.

Answer 1

It's working. The problem is that when you resize it to mobile it may seem as you have a bigger font. You may want to use responsive design so when the screen size is lower your font weight gets lower.

.description {
font-weight: 500;font-size: 22px; 
}

@media screen and (max-width: 500px) {
    body {
        font-weight: 300;font-size: 22px; 
    }
}

Or something like that. You can also set the font size lower and it may appear that your font weigth is lower too.