CSS @font-face svg 在 Chrome 中无法正常工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15422770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face svg not working properly in Chrome?
提问by Radu Cojocaru
I have an issue with a specific font and the way it's rendered in Chrome.
我对特定字体及其在 Chrome 中的呈现方式有疑问。
Firefox shows the font properly due to using ttf.
由于使用 ttf，Firefox 正确显示字体。
Chrome doesn't use antialias and the font is too 'sharp' and ugly.
Chrome 不使用抗锯齿，字体太“尖锐”和丑陋。
This is the css declaration I used
这是我使用的 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;
}
I have come to the conclusion that the problem is with the svg declaration/font file. If I don't use the hash tag at all and leave it as only .svg, it renders antialiased but at a different line-height, with slightly off positioning. If I add .svg#anything, it doesn't antialias it at all and looks ugly.
我得出的结论是问题出在 svg 声明/字体文件上。如果我根本不使用 hash 标签而只保留 .svg，它会呈现抗锯齿但在不同的行高处，稍微偏离定位。如果我添加 .svg#anything，它根本不会抗锯齿，而且看起来很难看。
Any suggestions are welcome to help me fix this rather annoying problem.
欢迎任何建议来帮助我解决这个相当烦人的问题。
PS: Windows antialiasing is OK, i tested this. I also tried out the @media screen and (-webkit-min-device-pixel-ratio:0)declaration for the svg font only, to no success.
I realize this may be a repost but having tried all the solutions from the related questions, I'm a bit desperate.
PS：Windows 抗锯齿还可以，我对此进行了测试。我也只尝试了@media screen and (-webkit-min-device-pixel-ratio:0)svg 字体的声明，但没有成功。我意识到这可能是一个转贴，但在尝试了相关问题的所有解决方案后，我有点绝望。
回答by Supercranky
To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:
为了让 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');
}
}
Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.
基本上，您需要强制 Chrome 使用 SVG 字体格式。您可以通过将 .svg 版本的 url 移动到顶部来完成此操作，但是 Windows 上的 Chrome 在执行此操作时会出现布局混乱的问题（直到并包括版本 30）。通过使用媒体查询覆盖字体声明，这些问题得到解决。
Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration
另外：有时基线位置在 OpenType 字体和 SVG 字体之间不匹配，但您可以通过简单地编辑 SVG 字体文件来调整它。SVG 字体是基于 xml 的，如果您查看声明
<font-face units-per-em="2048" ascent="1900" descent="-510" />
You can change the value for ascent and get it to match the other font format versions.
您可以更改 ascent 的值并使其与其他字体格式版本相匹配。
回答by Luke
As Lily and font squirrel suggest, your SVG font should almost always come at the bottom of your list of @font-facesources. You don't want a browser to use an SVG font unless it can't use anything else.
正如 Lily 和 font squirrel 所建议的，您的 SVG 字体应该几乎总是位于您的@font-face源列表的底部。您不希望浏览器使用 SVG 字体，除非它不能使用任何其他字体。
The reason for this is that SVG fonts are very poorly supported, and support is decreasing. As of this post (2015), SVG fonts are no longer supported by Chrome (38)and are only supported by Safari 8, iOS Safari 8.1 and the Android browser 37. http://caniuse.com/#feat=svg-fonts
造成这种情况的原因是对SVG 字体的支持非常差，并且支持率正在下降。截至本文（2015 年），Chrome 不再支持SVG 字体（38），仅支持 Safari 8、iOS Safari 8.1 和 Android 浏览器 37。http ://caniuse.com/#feat=svg-fonts
Edit:As of Feb 2016, Android Browser 47 no longer supports SVG fonts. Safari and iOS Safari still support them, and seem the be the only browsers that do.
编辑：截至 2016 年 2 月，Android 浏览器 47 不再支持 SVG 字体。Safari 和 iOS Safari 仍然支持它们，并且似乎是唯一支持它们的浏览器。
回答by Adam Sheridan
When referencing SVG files in @font-face the id (#) in the filepath is specifying the element inside the .svg file. To find the correct id you can open it in an editor and inspect the <font>tag.
在@font-face 中引用 SVG 文件时，文件路径中的 id (#) 指定了 .svg 文件中的元素。要找到正确的 ID，您可以在编辑器中打开它并检查<font>标签。
For example:
例如：
@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;
}
relates to:
涉及到：
<font id="latobold" horiz-adv-x="1187" >
<font id="latobold" horiz-adv-x="1187" >
回答by Lily
Font Squirrel's webfont generatorarranges their @font-faceCSS like this:
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;
}
More information about why the order is important here: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
有关该顺序为何如此重要的更多信息：http: //paulirish.com/2009/bulletproof-font-face-implementation-syntax/
If it's still giving you trouble, try using the aforementioned generator, choose the EXPERT option, and play around with the different settings (especially under Rendering and X-height).
如果它仍然给您带来麻烦，请尝试使用上述生成器，选择 EXPERT 选项，并尝试不同的设置（尤其是在 Rendering 和 X-height 下）。
回答by Tomá? Tibensky
try this @font-face implementation
试试这个@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%;
}
for more information check out this example https://github.com/ttibensky/BulletProof-font-face-implementation
有关更多信息，请查看此示例https://github.com/ttibensky/BulletProof-font-face-implementation
