css – Chrome中的Web字体

我有一个在Firefox上看起来很棒的webfont,而不是Chrome.我尝试过使用文本渲染属性,结果不那么引人注目.我的CSS是这样的:
@font-face {
    font-family: 'TextFont';
    src: url('[my font file url]') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: TextFont,Tahoma,Geneva,sans-serif;
    text-rendering: auto;
}

改变文本渲染似乎在Firefox中没有任何作用,所以我发布了一个截图.

结果:

> Firefox(a.k.a.“应该是什么样子”)

> Chrome – 文字渲染:自动

> Chrome – 文本呈现:optimizeLegibility

> Chrome – 文字渲染:optimizeSpeed

> Chrome – 文本渲染:geometricPrecision

与Firefox版相比,所有Chrome屏幕截图看起来都很糟糕. CSS中缺少什么东西?

我使用的是Windows 7,Firefox 8.0和Chrome 15.0.

解决方法

你真的没有什么可以通过CSS来改善这一点. Firefox和Chrome之间的文本呈现引擎不同,您可以看到结果.如果没有正确地提示并为网络字体准备字体,您可以期望增强这样的结果.

字体从哪里获得?

您可以尝试通过FontSquirrel运行它,看看Ethan提供的任何自动提示是否可能使这一点正常化.

关于渲染和DiretWrite的一些额外信息,这是你所看到的最重要的区别…. http://www.hlogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效
js如何实现文字闪烁特效?(图文+视频)
CSS3怎么实现背景颜色渐变?(图文+视频)
Css3如何实现文本溢出隐藏并显示省略号效果
添加CSS的三种方式
css如何实现单边阴影效果
css font-size-adjust属性怎么用
三分钟了解css中z-index属性
css text-align-last属性怎么用
css设置背景图片模糊,内容不模糊
弹性盒子布局flex是什么
圆角边框的css属性是什么
前端特效之520表白神器-旋转照片墙
css font-style属性怎么用
css position属性怎么用