CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – Google网络字体在Windows上的Chrome中呈现断续大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用我的网站上的Google Webfonts服务,并严重依赖它。它在大多数浏览器上呈现正常,但在Windows上的Chrome中,它呈现的特别糟糕。非常破碎和像素化。

我发现到目前为止,Chrome需要首先加载.svg格式的字体。我使用的字体,称为Asap,只有.woff可用。我使用免费在线服务将其转换为.svg,但当我添加到我的样式表(.woff之前),它没有改变任何东西。

我也试过:

-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;

希望或者将帮助文本呈现更顺利。

现在我已经用完了想法,我会讨厌改变字体。有没有人有一个想法我如何可以解决这个问题?我一直在使用Adobe Browserlab来测试渲染,看看我如何只有一个mac。链接到网站是:www.symvoli.nl/about

提前致谢!

编辑:2013年4月11日:

Chrome 35 Beta似乎终于解决了这个问题:

解决方法

2014年8月更新

问题

由于chrome实际上无法使用正确的抗锯齿渲染TrueType字体,因此会创建该问题。然而,chrome仍然渲染SVG文件。如果你移动你的svg文件的调用在你的语法上面的woff,chrome将下载svg并使用它而不是woff文件。像你的一些技巧建议工作,但只有某些字体大小。

但是这个bug是Chrome开发者团队非常熟知的,并且自2012年7月以来一直在修复。请参见官方错误报告线程在这里:https://code.google.com/p/chromium/issues/detail?id=137692

更新2013年10月(感谢@ Catch22)

显然,一些网站在渲染svg时可能会出现间歇性间隔问题。所以有一个better way到皮肤它。如果您使用特定于Chrome的媒体查询来调用svg,间距问题就会消失:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.svg#svgFontName') format('svg');
  }
}

第一种方法解决方案:

修改Fontspring bulletproof语法以首先提供svg:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),url('webfont.svg#svgFontName') format('svg'),url('webfont.woff') format('woff'),url('webfont.ttf')  format('truetype');
}

进一步阅读:

> CSS properties that affect type rendering
> Smoother Web Font Rendering in Chrome for Windows
> How to Bulletproof @font-face Web Fonts

大佬总结

以上是大佬教程为你收集整理的css – Google网络字体在Windows上的Chrome中呈现断续全部内容,希望文章能够帮你解决css – Google网络字体在Windows上的Chrome中呈现断续所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: