网站标题横幅的文字与图片？

Question

我正在创建的网站上有一个相当大的标题文字。使用普通字体给它一个非常锯齿状的外观，但似乎反锯齿图像将是一个相当大的下载。哪种方式是最好的选择，还是有更好的大型游戏方法？

这是纯文字的横幅。按比例缩小它并不明显，但全尺寸大约600px。单独打开图像以获得完整效果：

Answer 1

图像就是我要去的方式。有techniques out there可以使图像尺寸更小而不会在质量方面放弃太多。此外，一旦第一次下载，它就可以被缓存，因此不需要再次下载。

Answer 2

有些字体比其他涉及锯齿的字体更好。话虽这么说，一个无位移文本阴影与文本相同的颜色与模糊的一个像素将解决大多数时间的问题：

h1 {
   .
   .
   .
   color: white;
   text-shadow: 0 0 1px white;
}

我发现它足以对字体进行抗锯齿处理，如果我没有将文本阴影用于任何其他效果，那么它对于任何合理的现代化都是一个很好的解决方案。较旧的浏览器（你知道你是谁）会得到锯齿，但你无法赢得所有。

Answer 3

我总是建议不要将图片用于文字内容。现代浏览器具有内置的抗锯齿功能，因此大字体看起来比几年前更好。 （并且它在今天变得越来越好。）此外，使用<h1>之类的标记可以保留标题的语义值，当您使用<img>标记或CSS {{{ 1}}。