Question

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

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

有关该主题的任何其他想法？

Answer 1

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

我的解决方案是使用Webfont Generator工具（http://www.fontsquirrel.com/tools/webfont-generator）将我的字体转换为各种网页格式，并将其提供的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％相同，只是重新排列了一下）。

Answer 2

要在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" />

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

字体在Chrome中看起来很棘手

2 个答案: