HTML页面中的消除锯齿字体

Question

有没有一种很好的方法可以在网页中创建清晰,清晰的LARGE字体？我需要在我的主页上创建一个具有不同字体大小和颜色的标签云效果.

我已经在HTML/CSS中设置了它,但在较旧的浏览器或操作系统上,它们不支持抗锯齿,因为它看起来有点......糟糕.

我玩过sIFR,效果很好,但给了我一些可怕的负载效果,但我现在想知道是否有办法:

a)进行浏览器/操作系统检测以通过浏览器/操作系统组合分割用户,我知道支持消除锯齿(他们获得原始HTML)和获得图像标签的"其他人".

b)添加抗锯齿的某种JavaScript？

c)在div中加载BG图像并隐藏HTML文本的永久解决方案.(我知道,我知道,谷歌关于去索引的恐怖故事......但它有可能吗？)

Answer 1

a) 当然你可以使用浏览器检测。最简单的方法可能是使用jQuery的浏览器方法。（jQuery 是一个很棒的 JavaScript 库，如果您还没有听说过，它可以使许多 JS 开发变得更容易）

根据您获得的浏览器（或操作系统）结果，您可以向用户提供不同的解决方案，从普通文本到 Flash 解决方案等。

不过，我建议不要这样做。新机器上的情况比旧机器上看起来更好。事情就是这样，这就是为什么我建议不要把宝贵的时间花在旧浏览器的小故障上。——当然，除非使用较旧浏览器的用户是您的主要受众。在这种情况下，您是否完全在 Flash 中完成呢？如果一种解决方案始终有效，那么编写两种解决方案就没有意义，对吗？

b) 事实上，您可以通过 JavaScript 创建抗锯齿文本。看看我的项目Die Stimme Gottes（“上帝之声”——不适合宗教上神经质的人）作为例子。在这个项目中，我为此使用了优秀的typeface.js 。

c) 只使用 CSS 可以吗？

h1.welcome {
    background: url('the-welcome-image.png') no-repeat;
    color: transparent;

}

嗯.. 最初对 typeface.js 印象深刻，直到我尝试放大页面。看起来很糟糕！http://typeface.neocracy.org/examples.html (2认同)

Answer 2

+1汉克的评论.这样做你几乎没有什么收获.某些桌面浏览器(包括IE7 +和Safari)默认情况下会打开消除锯齿功能,即使它在操作系统级别关闭也是如此,而现代(XP后)操作系统无论如何都倾向于将其打开.通过强制AA休息,你将:

(+)为IE6和XP + Firefox用户改善了显示效果,他们在不知不觉中没有AA

( - )使每个人的加载速度变慢(但特别是有限移动设备的用户)

( - )击败首选字体大小

( - )不必要地惹恼那些刻意禁用抗锯齿的luddites因为它"模糊不清"(*)

(*:在有限的情况下,这甚至是有意义的,特别是对于旧的模糊CRT显示器.)