@ font-face svg在Chrome中无法正常工作？

Question

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

Firefox使用ttf正确显示字体.

Chrome不使用抗锯齿,字体过于"尖锐"且难看.

这是我用过的css声明

@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#anything,它根本不会消除它并且看起来很难看.

欢迎任何建议,以帮助我解决这个相当恼人的问题.

PS:Windows抗锯齿是可以的,我测试了这个.我也尝试过@media screen and (-webkit-min-device-pixel-ratio:0)svg字体的声明,没有成功.我意识到这可能是一个转贴,但尝试了相关问题的所有解决方案,我有点绝望.

Answer 1

要在Windows上的Chrome中使用良好的抗锯齿渲染Webfonts,您需要在字体声明中使用此格式:

@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" />

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

Answer 2

正如Lily和font squirrel建议的那样,你的SVG字体几乎总是位于你的@font-face源列表的底部.您不希望浏览器使用SVG字体,除非它不能使用任何其他内容.

原因是SVG字体支持非常差,支持正在减少.截至本文(2015年),Chrome(38)不再支持 SVG字体,仅支持Safari 8,iOS Safari 8.1和Android浏览器37. http://caniuse.com/#feat=svg-fonts

编辑:截至2016年2月,Android Browser 47不再支持SVG字体.Safari和iOS Safari仍然支持它们,并且似乎是唯一的浏览器.

Answer 3

在@font-face 中引用 SVG 文件时，文件路径中的 id (#) 指定了 .svg 文件中的元素。要找到正确的 ID，您可以在编辑器中打开它并检查<font>标签。

例如：

@font-face {
    font-family: 'latobold';
    src: url('../fonts/lato/lato-bold-webfont.eot');
    src: url('../fonts/lato/lato-bold-webfont.svg#latobold') format('svg'),
         url('../fonts/lato/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato/lato-bold-webfont.woff') format('woff'),
         url('../fonts/lato/lato-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

涉及到：

<font id="latobold" horiz-adv-x="1187" >