如何在Windows上的CSS 3中更流畅地呈现精简字体？
Pho*_*gan 38 html5 fonts rendering css3 web
当我在Adobe Flash Pro CS6中设计我的网站时,字体如下所示:
字体看起来平滑而且稍厚,当我创建HTML和CSS来在浏览器中呈现字体时,它们分别在IE,Firefox和Chrome中显示.
在某些区域看起来更薄且像素化.我在OS X上看到了更平滑的字体渲染.如何在这些浏览器中使字体看起来更流畅？我认为这是ClearType的一个问题,看起来像这样的瘦字体是可怕的.
这是我用来测试的代码,所以答案可以在发布之前进行测试:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' />
</head>
<body>
<span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span>
</body>
</html>
Ric*_*cee 74
您永远不会让网站在不同的浏览器或操作系统中看起来相同,他们使用不同的技术等.
这是你不应该真正关心的事情.使用IE的用户不会切换到Firefox或Chrome,反之亦然.它们习惯于字体的外观和不会注意到的方式.
浏览器不一致是前端开发人员必须忍受的事情(遗憾的是).如果它们看起来都一样,但它不会发生,那就太好了
您可以尝试的事情,您可能需要针对不同浏览器的不同修复:
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
编辑1:DirectWrite现在用于Windows的chrome,这将改善渲染.
编辑2(2017):系统UI字体
您可以尝试的另一件事是使用系统字体来改进UX.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
Readup -
smashingmagazine Readup - booking.com
Readup - medium
- 人们没有注意到细节,但这并不意味着他们在眼睛疲劳方面不会受到影响,也不意味着页面看起来不那么精心设计或专业而不能确定究竟是什么.如果在性能,可维护性或最佳实践方面没有太大的代价,那么在每个人都会有意识地注意到的细节上花一点时间仍然值得IMO. (5认同)
小智 6
text-rendering:optimizeLegibility将字距调整应用于字体,这可以提高可读性,但前提是显示的分辨率和字体大小足够高.如果它之前太薄,它不会使字体更大胆.
这里的问题可能是字体系列,它有一个或多个比正常情况更轻的面(字体重量:400) - 比如Googles Lato.
如果您将所有光线加载到Lato的常规面上,就像这样
@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);
我观察到大多数Windows浏览器和Chrome OSX使用font-weight:100如果你指定任何轻于400的东西 - (或正常,常规).尽管检查员工具坚持要求机器显示例如font-weight:200,否则将font-weight:更改为200或300不会产生任何不同.它不是.
删除较轻的重量(在我的情况下为100)解决了这个问题,并且让我至少分别使用font-weight:200.渲染在各浏览器中并不完全相同,但至少相似.
@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);
这当然不能解决无法访问指定的轻量级字体的实际问题.
据我所知,对此没有单一的解决方法.它实现了多种修复,以适应每个浏览器,IE除外.给这些镜头:
对于Chrome以及使用webkit的任何其他浏览器:
-webkit-font-smoothing:antialiased !important;
将它放在你的html CSS中,或者放在你认为合适的元素中.您还可以将其与上述内容一起添加:
text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);
尝试使用不同的Alpha值,但您应该保持阴影大小不变.
我不知道你能做什么,但这至少应该解决Chrome最大的问题(加上其他webkit浏览器).
我发现在Google Chrome中您可以添加-webkit-text-stoke来改善字体的外观.
例如:
-webkit-text-stroke: .025em rgba(51,51,51,0.50);
| 归档时间： |
|
| 查看次数： |
72101 次 |
| 最近记录： |