@font-face svg在Chrome中无法正常工作？
我有一个特定的字体和它在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声明/font文件上。如果我根本不使用散列标签，只保留.svg，它将呈现抗锯齿，但在不同的行高，定位略有偏差。如果我添加.svg#anything，它根本不会消除锯齿，而且看起来很难看。
欢迎任何建议，以帮助我解决这个相当恼人的问题。
附言: Windows抗锯齿是可以的，我测试了这个。我还尝试了仅针对svg字体的@media screen and (-webkit-min-device-pixel-ratio:0)声明，但没有成功。我意识到这可能是一篇转帖，但在尝试了相关问题的所有解决方案后，我有点绝望。
回答 4
Stack Overflow用户
发布于 2013-10-08 20:13:11
要在Windows上的Chrome中使用良好的抗锯齿效果呈现Web字体，您需要在字体声明中使用以下格式：
@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的值并使其与其他字体格式版本相匹配。
Stack Overflow用户
发布于 2014-01-15 06:45:15
当在@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" >
Stack Overflow用户
发布于 2013-05-02 01:24:00
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-height下)。
https://stackoverflow.com/questions/15422770
复制相似问题