18

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

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

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 字体的声明，但没有成功。我意识到这可能是一个转贴，但在尝试了相关问题的所有解决方案后，我有点绝望。在此处输入图像描述

4

5 回答 5

22

要使 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:13:11.330 回答
8

正如 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 仍然支持它们，并且似乎是唯一支持它们的浏览器。

于 2015-01-14T22:08:11.903 回答
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" >

于 2014-01-14T22:45:14.747 回答
2

Font Squirrel 的 webfont 生成器是这样排列@font-faceCSS 的：

@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 高度下）。

于 2013-05-01T17:24:00.493 回答
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

于 2014-01-27T12:53:06.547 回答