1

我在这里找到了关于图形设计的答案： https ://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that -rend 这正是我的字体正在做的事情，但我试图找出是否有办法使用 html 或 css 或任何基于 Web 的东西来防止这种情况发生。

我使用“platin”作为我的字体。我只需要找到不同的字体吗？

关于这个话题还有其他想法吗？

4

2 回答 2

0

如果这是由使用网络字体引起的，我发现这篇 SO 帖子（以及接受的答案）很有帮助：Google webfonts render chopper in Chrome on Windows

我的解决方案是使用 Webfont Generator 工具 ( http://www.fontsquirrel.com/tools/webfont-generator ) 将我的字体转换为各种 Web 格式，并将它们提供的 CSS 复制到我的样式表中。我使用的是 Google 的 Fauna One 字体，所以我必须从 Google 下载它，然后将它上传到 FontSquirrel。

关键是把SVG线放在TTF上面，让Chrome先用。这对我有用：

@font-face {
    font-family: 'Fauna One';
    src: url('fonts/faunaone-regular-webfont.eot');
    src: url('fonts/faunaone-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/faunaone-regular-webfont.svg#fauna_oneregular') format('svg'),
     url('fonts/faunaone-regular-webfont.woff') format('woff'),
     url('fonts/faunaone-regular-webfont.ttf') format('truetype');
}

（这与 Webfont Generator 生成的 CSS 文件有 99% 相同，只是重新排列了一下）。

于 2013-09-06T22:00:50.877 回答
0

要使 webfonts 在 Windows 上的 Chrome 中以良好的抗锯齿呈现，您需要在字体声明中使用此格式：

@font-face {
    font-family: 'Futura';
    src: url('futura.eot');
    src: url('futura.eot?#iefix') format('embedded-opentype'),
         url('futura.woff') format('woff'),
         url('futura.ttf') format('truetype'),
         url('futura.svg#futura') format('svg');

    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Futura';
        src: url('futura.svg#futura') format('svg');
    }
}

基本上，您需要强制 Chrome 使用 SVG 字体格式。您可以通过将 .svg 版本的 url 移到顶部来做到这一点，但是 Windows 上的 Chrome 在执行此操作时会出现布局混乱的问题（直到并包括版本 30）。通过使用媒体查询覆盖字体声明，这些问题得到解决。

另一件事：这个技巧将导致浏览器下载两个版本的字体，但对于好看的文本来说这是一个很小的代价！

另外：有时基线位置在 OpenType 字体和 SVG 字体之间不匹配，但您可以通过简单地编辑 SVG 字体文件来调整它。SVG 字体是基于 xml 的，如果你看一下声明

<font-face units-per-em="2048" ascent="1900" descent="-510" />

您可以更改 ascent 的值并使其与其他字体格式版本匹配。

于 2013-10-08T12:23:06.600 回答