HTML页面中的抗锯齿字体

Question

HTML页面中的抗锯齿字体

antialiasingbrowser-detection

7

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

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

我尝试过sIFR，它工作得非常好，但给我带来了一些可怕的加载效果，现在我想知道是否有一种方法：

a）进行浏览器/操作系统检测，将用户按照我知道支持反锯齿的浏览器/操作系统组合（他们获得原始HTML）和“其他人”（他们获得图片标签）分开。

b）某种JavaScript添加抗锯齿？

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

- hfidgen

2

真的很重要吗？网络的本质是您无法对内容的显示进行像素级控制 - 这是明确的设计目标。一般来说，最好接受这一点，并将精力集中在其他事情上。 - Hank Gay

我完全赞同汉克的观点！ - winsmith

1

在这种情况下，这真的很重要 - 这是一个展示主页，所以像素完美很重要。只需要找到最优雅的实现方式即可。 - MrFidge

6个回答

5

+1 Hank的评论。你做这件事情所获得的好处非常少。一些桌面浏览器（包括IE7+和Safari）即使在操作系统中关闭了抗锯齿，也会默认打开它，而现代（XP之后）的操作系统通常默认打开它。通过强制其他地方开启抗锯齿，你将会：

(+) 为那些不知道自己没有开启抗锯齿的IE6和XP+Firefox用户改善一点显示效果。

(-) 让所有人（但特别是使用受限移动设备的用户）加载更慢。

(-) 打破优先字体大小。

(-) 没有必要地惹恼那些故意关闭抗锯齿的技术保守者，因为他们认为它“太模糊”(*)

（*：对于老旧模糊的CRT监视器，有极少数情况下确实需要开启抗锯齿。）

- bobince

1

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

1）使用图像。如果您依赖SEO来优化网站，则可以添加HTML并使用CSS将其隐藏使用其中一种方法

2）typeface.js-JS可在大多数现代浏览器上运行。存在一些错误和故障，但效果很好。如果您要强制用户使用反锯齿，则此方法有效。请谨慎使用。作者正在处理Opera和IE8兼容性问题...

3）sIFR-出色的脚本，可动态替换所选文本区域与Flash电影。同样存在一些错误和故障，但如果您只对字体外观感兴趣，则这是完美的选择。会增加页面加载时间，因此请谨慎使用。

我倾向于不使用JS重型解决方案，因为我喜欢快速加载页面，但如果您必须拥有一些漂亮的字体，则这些似乎是最优雅和简单的方法。

- hfidgen

1

-webkit-font-smoothing:antialiased;

- yairniz

0

强制背景颜色，通过重新定义具有相同背景颜色的类或元素来实现。它有效。

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

- DMC

-4

使用Flash或Silverlight是获得良好字体渲染效果的最佳选择。

- Harry

1

甚至比带有alt标签的图像或使用图像背景的<h1>标签更不易访问。我拒绝。 - Rob Howard

是的，因为这个原因我不想使用Flash。sIFR是一个很好的妥协方案，因为它可以降级到普通的HTML，但不幸的是我们不能使用它。 - MrFidge

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- winsmith · Accepted Answer

a) 当然，您可以使用浏览器检测。最简单的方法可能是使用jQuery的browser方法。（如果您没有听说过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;

}