@font-face在Chrome中的SVG格式无法正常工作？

Question

@font-face在Chrome中的SVG格式无法正常工作？

cssgoogle-chromesvgfont-facetruetype

18

我遇到了一个问题，与特定字体及其在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的抗锯齿效果很好，我测试过了。我还尝试过针对仅svg字体的 @media screen and (-webkit-min-device-pixel-ratio: 0) 声明，但没有成功。我意识到这可能是一个再次发布的文章，但是由于已经尝试过与相关问题的所有解决方案，我有点绝望。 enter image description here

- Radu Cojocaru

2

使用这个神奇的工具来生成你的字体。 http://www.fontsquirrel.com/tools/webfont-generator - Sandeep Pattanaik

它被称为数字符号。 - rw-nandemo

5个回答

9

如Lily和字体松鼠所建议的，你的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浏览器47不再支持SVG字体。Safari和iOS Safari仍然支持它们，似乎是唯一支持它们的浏览器。

- Luke

6

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

- Adam Sheridan

2

Font Squirrel的Web字体生成器会按照以下方式排列它们的@font-face CSS：

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

关于为什么顺序很重要的更多信息，请查看此处：http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

如果仍然有问题，尝试使用上述生成器，选择“专家”选项，并尝试在不同的设置下进行调整（特别是在渲染和X高度下）。

- Lily

1

尝试使用这个 @font-face 实现。

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

h1 {
  font-family: 'OpenSans';
  font-weight: 300%;
}

欲了解更多信息，请查看此示例https://github.com/ttibensky/BulletProof-font-face-implementation

- Tomáš Tibenský

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Supercranky · Accepted Answer

为了让Chrome在Windows上呈现良好的抗锯齿效果，您需要在字体声明中使用这种格式：

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

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