HTML页面中的消除锯齿字体

时间:2009-03-19 10:15:30

标签: antialiasing browser-detection

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

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

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

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

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

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

6 个答案:

答案 0 :(得分:5)

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

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

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

( - )击败首选字体

( - )不必要地惹恼了故意禁用抗锯齿的luddites,因为它“一切都模糊”(*)

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

答案 1 :(得分:4)

a)当然,您可以使用浏览器检测。最简单的方法是使用jQuerybrowser方法。 (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;

}

答案 2 :(得分:0)

从外观上看,最好的方法(没有实际顺序)是:

1)使用图像。如果你依赖于网站的搜索引擎优化,那么一定要添加html并使用css using one of these methods隐藏它

2)typeface.js - JS可以在大多数现代浏览器中使用。有一些错误和故障,但工作得很好。如果您要对用户强制使用抗锯齿功能,那么这样可行。谨慎使用。编写Opera和IE8兼容性的作者虽然......

2)sIFR - 优秀的脚本,动态替换您选择的文本区域与Flash电影。再一些错误和故障,但如果你只是对令人敬畏的外观感兴趣,那么这是完美的。虽然增加了你的页面负载,但是越多越少,请谨慎使用。

我倾向于不使用JS重型解决方案,因为我喜欢闪电般的快速页面加载,但如果你必须拥有一些好看的字体,那么这些似乎是最优雅和简单的方法。

答案 3 :(得分:0)

强制背景颜色,为具有相同背景颜色的类或元素重新定义背景颜色。它有效。

span.your_class {
    writing-mode: tb-rl;
    filter: flipv fliph;
    background-color: #006cb8 !important;
}

答案 4 :(得分:0)

-webkit-font-smoothing:antialiased;

答案 5 :(得分:-5)

Flash或Silverlight是您获得精美外观字体渲染的最佳选择