Css Chrome无法呈现@font-face ttf/woff平滑

我正在为一个项目使用iconmon@font-face图标字体

---

当仅包含.svg和/或.eot字体时，或者当使用其他浏览器（如IE9）浏览时，该字体呈现良好且平滑。但当使用Chrome浏览器浏览网站时，包括.ttf和/或.woff格式，图标会变得非常杂乱，根本没有抗锯齿功能。有没有办法告诉Chrome加载.eot或.svg而不是.ttf或.woff？

也许这个css属性可以解决您的问题：

yourSelector {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}

我发现这对那个问题有效。我认为字体平滑解决方案实际上不起作用

@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   src: url('fonts/montserrat-regular-webfont.eot'); /* IE9 Compat Modes */
   src: url('fonts/montserrat-regular-webfont.eot?iefix') format('eot'), 
       url('fonts/montserrat-regular-webfont.ttf')  format('truetype'), 
       url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'),
       url('fonts/montserrat-regular-webfont.woff') format('woff'); 
}

Firefox将选择列表中的最后一个（woff），工作与否，IE将使用eot，以及 Chrome将选择第一个有效的（svg）。Woff在chrome中也起作用，但会导致 别名符号，所以将svg置于woff之前可以解决这一问题*

此解决方案可行，但在Safari中会引起额外的请求，您可以像最初一样将svg放在woff下面，然后添加：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'OpenSansLightItalic';
    src: url('fonts/montserrat-regular-webfont.svg#montserratregular')  format('svg');
  }
}

---

请在此处阅读：

尝试一下字体的小小旋转，希望它能对您有所帮助

例如：

p{
  transform: rotate(-0.0000000001deg);
}

---

将svg字体的url放在所有其他字体之前，Chrome将加载svg，您将获得良好的渲染效果，尤其是对于浅色字体。

顺便说一句，唯一支持“eot”格式的浏览器是IE。Chrome也支持“svg”格式，您可以在@font-face样式规则中包含指向“svg”文件的链接，但如果还提供了“ttf”或“otf”链接，大多数浏览器更喜欢使用SVG字体。SVG字体要么不起作用，要么在Chrome中不推荐使用（取决于操作系统）。SVG字体要么无法使用，要么在Chrome中不推荐使用（取决于操作系统）。哈哈，那有点用。可悲的是，最小的工作温度是0.1度，这使得页面看起来不稳定。