In my large screen project, to adapt the display to screens of different sizes, I have implemented a scaling solution. However, after scaling, the text becomes blurry. Are there any ways to resolve the issue of blurry fonts?

my css code:

    position: fixed;
    transform: scale(var(--scale)) translate(-50%, -50%);
    transform-origin: 0px 0px;
    left: 50%;
    top: 50%;
    z-index: 999;
    width: 1920px;
    height: 1080px;
    background-color: rgb(255, 255, 255);
    --scale: 0.5537037037037037

I tried adjusting the font smoothness, but it had no effect.

-webkit-font-smoothing: antialiased