Question

当我在Adobe 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>

Answer 1

您永远不会让网站在不同的浏览器或操作系统中看起来一样，他们使用不同的技术等等。

这是不应该真正关心的事情。使用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上用于将改善渲染的窗口。

编辑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

Answer 2

text-rendering：optimizeLegibility将字距调整应用于字体，可以提高可读性，但前提是显示的分辨率和字体大小足够高。如果之前的字体太薄，它就不会使字体变得更大胆。

这里的问题可能是字体系列一个或多个更轻 的面孔比正常情况（font-weight：400） - 就像Googles Lato一样。

如果您将所有灯光加载到Lato的常规面孔，就像这样

@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);

我观察到大多数Windows浏览器和Chrome OSX使用font-weight：100，如果指定任何轻于400的东西 - （或正常，常规）。将字体权重：更改为200或300并不会呈现任何不同，尽管检查员工具坚持要求机器显示例如字体重量：200。它不是。

删除较轻的重量（在我的情况下为100）解决了这个问题，并且让我至少分别使用font-weight：200。渲染在各浏览器中并不完全相同，但至少相似。

@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);

这当然无法解决无法按指定方式访问轻量级字体的实际问题。

Answer 3

据我所知，目前还没有单一的解决办法。它实现了多个修复程序以适应每个浏览器，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浏览器）。

Answer 4

我发现在Google Chrome中你可以添加-webkit-text-stroke来改善字体的外观。

例如：

-webkit-text-stroke: .025em rgba(51,51,51,0.50);

Answer 5

我认为这更像是Windows问题，而不是浏览器问题。相同的浏览器在其他操作系统（如Linux或Mac）上更平滑地呈现相同的字体。

在Chrome以及任何webkit浏览器中，您可以使用以下代码来平滑字体：

-webkit-font-smoothing: antialiased;

或

-webkit-font-smoothing: antialiased !important;

通常情况下，我发现这并没有做很多事情。我想我们只需要等待微软做点什么。

Answer 6

我在所有网站上都使用它，它涵盖了大多数字体渲染问题。

text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;

Answer 7

我最近遇到了类似的问题，相同的字体系列和大小在Chrome，Safari和Firefox上看起来有所不同。 chrome和firefox看起来特别厚。这可能不是最好的方式，但对我有用

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

此外，它值得花一些时间来检查不同的渲染引擎。 CSS What are -moz- and -webkit-?

Answer 8

您可以使用css属性text-rendering修复此问题。

示例：

text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit

您可能希望使用文本呈现：optimizeLegibilty。

此处提供更多信息：MDN Text-Rendering

Answer 9

我要给它加上一个hack，但我不喜欢它，但是它可以工作

transform: rotate(-0.0002deg)

它使字体明显更平滑，尽管更细

Answer 10

已经晚了，但是您是否曾经尝试提示字体文件？转到transfonter网站并上传您的字体文件。然后，选项区域检查自动提示选项。

如何在Windows上的CSS 3中更流畅地呈现精简字体？

10 个答案:

编辑1：DirectWrite现在在Chrome上用于将改善渲染的窗口。

编辑2（2017）：系统UI字体