@ font-face svg在Chrome中无法正常使用？ [英] @font-face svg not working properly in Chrome?

问题描述

我对特定字体及其在Chrome中呈现的方式有问题。

I have an issue with a specific font and the way it's rendered in Chrome.

由于使用ttf，Firefox正确显示字体。

Firefox shows the font properly due to using ttf.

Chrome不使用抗锯齿，字体太尖锐和丑陋。

Chrome doesn't use antialias and the font is too 'sharp' and ugly.

这是我使用的CSS声明

This is the css declaration I used

@font-face {
    font-family: 'HelveticaNeueLT Std Thin';
    src: url(../fonts/h2.eot);
    src: url(../fonts/h2.svg#test) format('svg'),
         url(../fonts/h2.woff) format('woff'),
         url(../fonts/h2.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}

我已经得出结论，问题是svg声明/字体文件。
如果我根本不使用哈希标记，并将其保留为只有.svg，它呈现抗锯齿，但在不同的行高，略有定位。如果我添加.svg＃任何东西，它根本不antialias它看起来丑陋。

I have come to the conclusion that the problem is with the svg declaration/font file. If I don't use the hash tag at all and leave it as only .svg, it renders antialiased but at a different line-height, with slightly off positioning. If I add .svg#anything, it doesn't antialias it at all and looks ugly.

欢迎任何建议帮助我解决这个令人讨厌的问题。

Any suggestions are welcome to help me fix this rather annoying problem.

PS：Windows抗锯齿是可以的，我测试了这个。我也尝试了 @media屏幕和（-webkit-min-device-pixel-ratio：0）声明的svg字体，没有成功。
我意识到这可能是一个转贴，但试过所有的解决方案，从相关问题，我有点绝望。

PS: Windows antialiasing is OK, i tested this. I also tried out the @media screen and (-webkit-min-device-pixel-ratio:0) declaration for the svg font only, to no success. I realize this may be a repost but having tried all the solutions from the related questions, I'm a bit desperate.

推荐答案

要使网络字体在Windows上的Chrome中显示良好的抗锯齿效果，在字体声明中使用此格式：

To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:

@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）。

Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.

此外：有时基线位置在OpenType字体和SVG字体之间不匹配，但您可以调整这通过简单地编辑SVG字体文件。 SVG字体基于xml，如果您查看声明

Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration

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

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

You can change the value for ascent and get it to match the other font format versions.

这篇关于@ font-face svg在Chrome中无法正常使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！