我有一个特定字体的问题和在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#任何东西，它根本不反对它，看起来很丑陋。
欢迎任何建议帮助我解决这个令人讨厌的问题。
PS：Windows抗锯齿是好的，我测试了这个。我还尝试了只有svg字体的@media屏幕和(-webkit-min-device-pixel-ratio：0)声明，没有成功。
我意识到这可能是一个转贴，但已经尝试了相关问题的所有解决方案，我有点绝望。
解决方法
要在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版本的网址移动到顶部来执行此操作，但是，Windows上的Chrome在执行此操作时会遇到问题(包括版本30)。通过使用媒体查询覆盖字体声明，解决了这些问题。
另外：有时基线位置与OpenType字体和SVG字体不匹配，但您可以通过简单地编辑SVG字体文件进行调整。 SVG字体是基于xml的，如果你看这个声明
<font-face units-per-em="2048" ascent="1900" descent="-510" />
您可以更改上升的值，并将其与其他字体格式版本相匹配。
