2

我现在在这个网站上工作，它是我朋友的复古电脑商店。他要我添加类似 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;
}
4

0 回答 0