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抗锯齿是可以的，我测试了这个。我还尝试了仅用于svg字体的@media screen and (-webkit-min-device-pixel-ratio:0)声明，但没有成功。我意识到这可能是一个转贴，但尝试了相关问题的所有解决方案，我有点绝望。 enter image description here

Answer 1

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

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

Answer 2

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

原因是 SVG字体的支持度非常低，并且支持率正在下降。截至本文（2015年），SVG字体为no longer supported by Chrome (38)，仅受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" >

Answer 4

Font Squirrel's webfont generator像这样安排他们的@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/

如果它仍然给你带来麻烦，请尝试使用上述生成器，选择EXPERT选项，然后使用不同的设置（特别是在渲染和X高度下）。

Answer 5

试试@ font-face implementation

@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

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

5 个答案: