如何设置字体排版使其像素完美？

Question

我现在正在这个网站上工作，它是我的朋友的商店和复古电脑。他希望我添加8位字体。我在网上搜索并找到了Munro字体。首先我在演示页面上看到它，看起来很棒。我把它嵌在https://retro-cloud.eu上并且没有注意到任何丑陋的东西。不完全，可能在文本的某些部分有点模糊。现在我知道这是因为我有非常高分辨率的WQHD。我的朋友说，在较低的分辨率下，模糊的文字更加明显。

如何修复此字体显示？我知道如果我将字体像素与屏幕像素对齐，就不应该有模糊效果。我也知道CSS中有几分像素......我应该只使用指定的字体大小吗？

这就是我在CSS中声明字体的方式

@font-face {
    font-family: 'Munro Narrow';
    src: url('hinted-MunroNarrow.eot');
    src: url('hinted-MunroNarrow.eot?#iefix') format('embedded-opentype'),
        url('hinted-MunroNarrow.woff2') format('woff2'),
        url('hinted-MunroNarrow.woff') format('woff'),
        url('hinted-MunroNarrow.ttf') format('truetype'),
        url('hinted-MunroNarrow.svg#MunroNarrow') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Munro';
    src: url('hinted-Munro.eot');
    src: url('hinted-Munro.eot?#iefix') format('embedded-opentype'),
        url('hinted-Munro.woff2') format('woff2'),
        url('hinted-Munro.woff') format('woff'),
        url('hinted-Munro.ttf') format('truetype'),
        url('hinted-Munro.svg#Munro') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Munro Small';
    src: url('hinted-MunroSmall.eot');
    src: url('hinted-MunroSmall.eot?#iefix') format('embedded-opentype'),
        url('hinted-MunroSmall.woff2') format('woff2'),
        url('hinted-MunroSmall.woff') format('woff'),
        url('hinted-MunroSmall.ttf') format('truetype'),
        url('hinted-MunroSmall.svg#MunroSmall') format('svg');
    font-weight: normal;
    font-style: normal;
}