antialiasing - HTML页面中的抗锯齿字体

Question

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

我已经在 HTML/CSS 中设置了它，但是在默认不支持抗锯齿的旧浏览器或操作系统上，它看起来有点……糟糕。

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

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

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

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

score 5 · Accepted Answer

+1 汉克的评论。这样做你几乎没有什么收获。一些桌面浏览器（包括 IE7+ 和 Safari）默认打开抗锯齿，即使它在操作系统级别关闭，现代（后 XP）操作系统倾向于默认打开它。通过在其余部分强制 AA，您将：

(+) 为不知不觉没有 AA 的 IE6 和 XP+Firefox 用户改善显示效果

(-) 让每个人的加载速度变慢（尤其是移动设备有限的用户）

(-) 击败首选字体大小

(-) 不必要地惹恼那些故意禁用抗锯齿功能的 luddites，因为它“完全模糊”(*)

（*：在有限的情况下，这甚至是有意义的，特别是对于旧的、模糊的 CRT 显示器。）

score 4 · Accepted Answer

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;

}

score 0 · Accepted Answer

从外观上看，最好的方法（没有实际顺序）是：

1）使用图像。如果您依赖网站的 SEO，那么请务必使用这些方法之一添加 html 并使用 css 隐藏它

2) typeface.js - 适用于大多数现代浏览器的 JS。有一些错误和小故障，但效果很好。如果您要对您的用户强制使用抗锯齿，那么这是可行的。谨慎使用。虽然作者致力于 Opera 和 IE8 的兼容性...

2) sIFR - 出色的脚本，可以用 Flash 电影动态替换您选择的文本区域。再次出现一些错误和故障，但如果您只是对看起来很棒的字体感兴趣，那么这是完美的。但是会增加您的页面负载，因此越少越好，请谨慎使用。

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

-webkit-font-smoothing:antialiased;

于 2020-07-09T11:48:29.643 回答

score -5 · Accepted Answer

-5

Flash 或 Silverlight 是您获得漂亮字体渲染的最佳选择

于 2009-03-19T10:21:27.910 回答

6 回答 6