gpt4 book ai didi

html - 如何在 Windows 上的 CSS 3 中更流畅地呈现细字体?

转载 作者:技术小花猫 更新时间:2023-10-29 11:40:04 24 4
gpt4 key购买 nike

当我在 Adob​​e Flash Pro CS6 中设计我的网站时,字体看起来像这样:

Font rendered in Adobe Flash Pro CS6

字体看起来很平滑,略粗,当我创建 HTML 和 CSS 以在浏览器中呈现字体时,分别在 IE、Firefox 和 Chrome 中显示如下。

Font rendered in IE, Firefox, and Chrome browsers

它在某些区域显得更薄和像素化。我在 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>

最佳答案

您永远不会让站点在不同的浏览器或操作系统中看起来相同,它们使用不同的技术等等。

这是您不应该真正关心的事情。使用 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现在在 chrome for windows 上,改进渲染。

编辑 2 (2017):系统 UI 字体

您可以尝试的另一件事是使用系统字体来改善用户体验。

字体系列:-apple-system、BlinkMacSystemFont、“Segoe UI”、“Roboto”、“Oxygen”、“Ubuntu”、“Cantarell”、“Fira Sans”、“Droid Sans”、“Helvetica” Neue", sans-serif;

Readup - smashingmagazine
Readup - booking.com
Readup - medium

关于html - 如何在 Windows 上的 CSS 3 中更流畅地呈现细字体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22769474/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com